A modern and interactive restaurant web application built with React.js and Tailwind CSS.
This app provides a smooth user experience with advanced UI features such as dark mode, dynamic product management, cart system, and theme customization.
- 📂 JSON-based Data – Fetch and render restaurant menu from a JSON file.
- 🔎 Search Bar – Search dishes in real-time.
- 🔃 Code Splitting and Lazy Loading for Performance.
- 🖱️ Click-to-View Details – Click any product to see its full details page.
- 🛒 Cart & Checkout – Add products to the cart and simulate payments.
- 🌙 Dark Mode Toggle – Seamlessly switch between light and dark themes.
- 🎨 Custom Navbar Theme – Change the look and feel of the navigation bar.
- ➕ Add New Product – Admin-like feature to create and display new items.
- ⚡ Smooth Animations – Modern transitions powered by Tailwind.
- 📱 Responsive Design – Optimized for desktop, tablet, and mobile.
- React.js – Component-based frontend library
- Code Splitting and Lazy Loading for Performance.
- Tailwind CSS – Utility-first CSS framework for styling
- JavaScript (ES6+) – Core functionality
- JSON – Data storage and fetching
- React Router – Page navigation
restaurant-app/
│── public/
│── data/
│ ├── data.json # Menu data (products, prices, descriptions)
│── src/
│ ├── components/ # Reusable UI components
│ ├── Hooks/ # UseFeatch , UseTheme
│ ├── pages/ # Home, Product Details, Cart, Checkout
│ ├── context/ # Cart & Theme context providers
│ ├── App.jsx # Main app
│ ├── index.jsx # React entry point
│── tailwind.config.js # Tailwind setup
│── package.json # Dependencies
# Clone repository
git clone https://github.com/MahdiJDS/restaurant-app.git
# Navigate to project folder
cd restaurant-app
# Install Dependencies
npm install
# Run Development Server
npm run dev| 🛒 Cart & Checkout | 🌗 Light Mode & Home | 🔎 Add & Details |
|---|---|---|
 |
 |
 |
🔥 Made with ❤️, MahdiJDS✨