I developed a full-stack Restaurant Management website using the MERN stack (MongoDB, Express.js, React.js, and Node.js). The platform allows users to browse all food items, view detailed information on single items, and provides admins with functionalities to add, delete, and modify menu items. This project significantly enhanced the restaurant's online presence, improved customer interaction, and streamlined internal management processes.
- Full-Stack MERN Development: Utilizing MongoDB, Express.js, React.js, and Node.js to create a seamless and engaging website.
- User-Friendly Interface: Intuitive design aimed at enhancing user interaction and satisfaction.
- CRUD Operations: Create, Read, Update, and Delete operations for managing food items and user interactions.
- Responsive Design: Ensuring a consistent and enjoyable experience across all devices - mobile, tablet, and desktop.
- Secure Authentication: Implementing JWT tokens for secure user authentication and authorization of private routes.
- Visually Appealing: Attention to design details, color contrast, and overall aesthetics to create a visually stunning website.
- Gallery Experience: Showcase user-generated content in a captivating gallery section with interactive overlays.
Prerequisites - Your need to download and install Git and Node on your desktop or laptop to run this project
Make sure you have the latest versions of both Git and Node on your computer.
node --version
git --version- Clone the repository:
git clone https://github.com/Porgramming-Hero-web-course/b9a11-client-side-nrbnayon.git- Install dependencies:
cd b9a11-client-side-nrbnayon
npm installCreate a .env file in the root directory and add the following variables:
Visit emailjs.com to create a new account for mail sending. In the free trial, you will get 200 emails per month. After setting up your emailjs account, add the following variables.
VITE_PUBLIC_EMAILJS_SERVICE_ID=your_emailjs_service_id
VITE_PUBLIC_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
VITE_PUBLIC_EMAILJS_PUBLIC_KEY=your_emailjs_public_id
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
- Start the server:
npm run dev- Open the website in your browser at
http://localhost:5173.
- Home: Start your culinary journey here.
- All Foods: Explore our delightful menu offerings.
- Gallery: Experience the visual delights shared by our community.
- Login/Logout: Access your account for personalized experiences.
- My Profile: Manage your profile and interactions.
- Contact Us: Easily reach out to us for any inquiries, feedback, or assistance directly from the website interface.
- Banner Section: Captivating visuals beckon you to explore.
- Top Foods Section: Discover our top-selling culinary delights.
- See All Button: Direct access to our complete menu offerings.
- Extra Sections: Engaging content to spark your curiosity.
- Page Title: Dive into our delectable menu offerings.
- Food Cards: Browse through our extensive collection of culinary delights.
- Search Functionality: Easily find your favorite dishes with our search feature.
- Detailed Information: Dive deep into the specifics of each culinary masterpiece.
- Purchase Button: Indulge in your desired dish with a single click.
- Order Form: Complete your culinary journey with a seamless purchase experience.
- Toast/Alert: Receive instant confirmation and feedback on your purchase.
- Gallery Section: Immerse yourself in the visual feast shared by our community.
- Add Button: Contribute to our gallery with your own culinary experiences.
- Registration Page: Join our community and unlock personalized experiences.
- Login Page: Access your account for seamless interactions.
- Error Messages: Receive prompt feedback on any registration or login issues.
- My Added Food Items: Manage your contributed culinary creations.
- Add a Food Item: Expand our menu offerings with your own dishes.
- My Ordered Food Items: Track and manage your culinary indulgences.
- Error Page: Encounter a delightful surprise in the event of a page not found.
- Single Food Quantity: Ensure a seamless purchase experience with real-time quantity updates and availability checks.
- Authorization with JWT: Protect sensitive routes and ensure secure user interactions.
- Loading Spinner: Enhance user experience with engaging loading animations.
| Package Name |
|---|
| @emailjs/browser |
| @emotion/react |
| @emotion/styled |
| @heroicons/react |
| @material-tailwind/react |
| @mui/material |
| @mui/x-date-pickers |
| animate.css |
| aos |
| axios |
| dayjs |
| firebase |
| localforage |
| lodash |
| lodash.debounce |
| lottie-react |
| match-sorter |
| prop-types |
| react |
| react-awesome-button |
| react-awesome-reveal |
| react-dom |
| react-icons |
| react-leaflet |
| react-loader-spinner |
| react-router-dom |
| react-simple-typewriter |
| react-toastify |
| sweetalert2 |
| swiper |
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
This project is licensed under the MIT License - see the LICENSE file for details.
This README file includes all the necessary information and is formatted for readability.