A modern React-based restaurant menu application with shopping cart functionality, built using Figma design system.
- Interactive Menu: Browse appetizers, main courses, and desserts
- Shopping Cart: Add items, adjust quantities, and view total price
- Figma Design System: Authentic design matching provided Figma file
- Real Images: Uses actual images downloaded from Figma design
- Responsive Design: Works perfectly on desktop and mobile devices
- Modern UI: Clean typography, proper spacing, and smooth interactions
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser: Visit http://localhost:5173 to view the application
npm run build- React 18 with hooks for state management
- Vite for fast development and building
- Modern CSS with Figma-accurate styling
- Component Architecture for maintainable code
- Figma Integration with downloaded design assets
- Appetizers: Bruschetta, Antipasto Platter, Calamari Fritti
- Main Courses: Pasta, Pizza, Osso Buco, Risotto
- Desserts: Tiramisu, Panna Cotta, Cannoli
- Add/remove items
- Quantity adjustment
- Real-time price calculation
- Modal overlay interface
- Typography: Inter font family
- Colors: Black (#000000) text, gray (#828282) accents
- Layout: 80px container padding, 32px grid gaps
- Buttons: 8px border radius with hover effects
- Cards: Product cards with proper image scaling
src/
├── components/
│ ├── Navigation.jsx # Header with cart functionality
│ ├── HeroSection.jsx # Restaurant banner
│ ├── MenuSection.jsx # Menu categories and items
│ ├── Cart.jsx # Shopping cart modal
│ └── Footer.jsx # Footer with links
├── App.jsx # Main application component
└── App.css # Figma-accurate styling
public/
└── images/ # Downloaded Figma images
├── hero-image.jpg
├── product-1.jpg to product-6.jpg
├── about-image.jpg
└── featured-product.jpg
This application is built using design elements from the provided Figma file, ensuring pixel-perfect accuracy and authentic visual appeal.
Built with ❤️ using React and Figma design system