Welcome to the Food Website! This project is designed to provide users with a seamless way to explore menus, order food, and enjoy a rich, interactive experience. Additionally, administrators can manage the menu dynamically using an admin panel with Cloudinary integration for image uploads. Below, you'll find an overview of how the website works, its features, and how to run it locally.
- Home Page: A visually appealing landing page showcasing featured dishes and promotional offers.
- Menu: A categorized list of dishes with descriptions, images, and prices.
- Search Functionality: Search for dishes by name or category.
- Order System: Add items to your cart and place an order with ease.
- User Authentication: Register, log in, and manage your profile.
- Responsive Design: Optimized for both desktop and mobile devices.
- Admin Panel:
- Add, update, or delete food items dynamically.
- View and manage all orders.
- Cloudinary Integration: Food item images are securely uploaded and stored using Cloudinary.
The homepage serves as the gateway to the website:
- Displays a banner with the latest offers.
- Features a "Top Dishes" section with popular items.
- The menu is organized into categories (e.g., Starters, Main Course, Desserts, Beverages).
- Each menu item includes an image, name, description, price, and an "Add to Cart" button.
- Users can search for dishes by name or filter by category.
- Results are displayed dynamically without reloading the page.
- Add items to your cart by clicking the "Add to Cart" button.
- View the cart to see selected items, quantities, and the total price.
- Place the order by clicking "Checkout" and providing necessary details (like delivery address).
- Navigate to
/adminto access the admin panel. - Use the provided form to upload new food items, including name, description, price, and image.
- Images are uploaded securely to Cloudinary.
- Manage existing menu items by updating or deleting them.
The website adapts seamlessly to different screen sizes:
- Desktop: Full menu and navigation.
- Mobile: Collapsible menu and optimized layouts for smaller screens.
- Frontend: React.js, Tailwind CSS
- Backend: Node.js, Express.js
- Database: MongoDB
- Image Storage: Cloudinary
- Payment Integration: Stripe (for demo purposes)
- Deployment: Vercel (Frontend), Render (Backend)
Follow these steps to run the project on your local machine:
- Node.js and npm installed.
- MongoDB running locally or a cloud database (e.g., MongoDB Atlas).
-
Clone the repository:
git clone https://github.com/omwagh28/food-website.git
-
Navigate to the project directory:
cd food-website -
Install dependencies:
npm install
-
Set up environment variables:
- Create a
.envfile in the root directory. - Add the following:
MONGO_URI=<your-mongodb-connection-string> PORT=5000 CLOUDINARY_NAME=<your-cloudinary-name> CLOUDINARY_API_KEY=<your-cloudinary-api-key> CLOUDINARY_API_SECRET=<your-cloudinary-api-secret> STRIPE_SECRET_KEY=<your-stripe-secret-key>
- Create a
-
Start the development server:
npm start
-
Open your browser and visit:
http://localhost:3000
- Implement real-time order tracking.
- Add support for multiple languages.
- Integrate with third-party food delivery services.
- Add user reviews and ratings for dishes.
Contributions are welcome! If you'd like to contribute:
- Fork the repository.
- Create a new branch for your feature:
git checkout -b feature-name
- Commit your changes:
git commit -m "Add feature-name" - Push to the branch:
git push origin feature-name
- Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
For any inquiries, feel free to reach out:
- Email: omwagh28@example.com
- GitHub: omwagh28