A sophisticated, high-end web application designed for seamless party menu planning. Built with a focus on "Premium" aesthetics, this app features a dark-themed, glassmorphic UI with gold accents, providing an elegant experience for users selecting dishes for their events.
- Luxury UI/UX: A bespoke dark theme using CSS variables, gold gradients, and glassmorphism effects.
- Dynamic Menu Management: Efficiently handles diverse dish categories (Starters, Main Course, Desserts, Classics) with real-time selection tracking.
- Smart Search & Filter: Instant search functionality and category-based navigation for quick dish discovery.
- Responsive Design: Fully optimized for Desktop, iPad, and Mobile devices with touch-friendly scrolling and adaptive layouts.
- Context-Driven State: Centralized selection logic using React Context API for consistent data across the application.
- Interactive Details: "Read More" functionality for dish descriptions and dedicated ingredient view pages.
- Modern Typography: Sophisticated font pairings using Playfair Display for headings and Inter for readability.
- Frontend: React.js
- State Management: React Context API
- Icons: Lucide React
- Styling: Modern CSS3 (Custom Properties, Flexbox, CSS Grid)
- Routing: React Router DOM
- Deployment: Vercel (Optimized for SPAs)
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository:
git clone [your-repo-url]
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Build for production:
npm run build
The app is meticulously tested for:
- Desktop: Wide grid layouts with fixed search and navigation.
- Tablets (iPad): Adaptive stacking and optimized spacing.
- Mobile: Horizontal swipable category tabs and full-width touch targets.
This project is licensed under the MIT License - see the LICENSE file for details.