/food-delivery

The Hungry Helper is a web app built using React JS for frontend and Node JS, Express for creating the REST APIs along with Mongo DB to store data. It has an admin panel where we can track order, add / update new food items, and edit order status.

Primary LanguageJavaScript

Logo

🍽️ The Hungry Helper - Online Food Ordering App 🍽️

🌐 Website 🌐

This is a web app built using React JS for frontend and Node JS, Express for creating the REST APIs along with Mongo DB to store data.

It has an admin panel where we can track order, add / update new food items, and edit order status.

πŸš€ Key Features:-

  • πŸ” Used JWT for secured authentication and authorization
  • ☁️ Used Cloudinary to save image files on cloud for faster retrieval
  • πŸ’Ύ Used local storage to save user cart items
  • 🎟️ Integrated COUPON CODE system
  • πŸ’³ Integrated payment system by Stripe
  • πŸ’΅ Multiple payment options available including Cash On Delivery
  • πŸ“¦ Advanced order tracking system

πŸ› οΈ Tech Stack used:-

  • βš›οΈ React JS
  • 🟒 Node JS
  • πŸš€ Express
  • πŸƒ Mongo DB

πŸ“š Libraries used:-

  • πŸ“‘ Axios
  • 🍞 Toastify
  • πŸ”‘ JWT
  • πŸ“¦ Multer
  • ☁️ Cloudinary
  • πŸ›‘οΈ bcrypt
  • πŸ’³ Stripe
  • βœ… Validator

Screenshot 1

 

Screenshot 2

 

Screenshot 3

 

Screenshot 4

 

Screenshot 5

 

Screenshot 6

πŸ–₯️ How to run in your local server?

  1. πŸ› οΈ Clone this repo.
  2. πŸ“‚ Open each directory in separate terminals.
  3. πŸ’» "npm install" in all 3 terminals.
  4. πŸš€ Finally, "npm run dev" in all 3 terminals.

πŸ”— Access the live version -

https://tomato-food-delivery.onrender.com
Website 🌐
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Opera
Opera
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

The Hungry Helper is an innovative πŸ” online food ordering app designed to streamline the process of getting your favorite meals delivered right to your doorstep πŸšͺ. The app is built with React JS for the frontend πŸ–₯️, and Node JS and Express for creating the REST APIs 🌐. It leverages MongoDB to store data πŸ“¦, ensuring a robust and scalable backend. This combination of technologies ensures a smooth and efficient user experience πŸ†, from browsing the menu πŸ“œ to placing an order πŸ›’ and tracking its delivery 🚚.

One of the standout features ⭐ of The Hungry Helper is its admin panel πŸ› οΈ, which provides comprehensive order management capabilities. Administrators can track orders in real-time ⏱️, add or update food items 🍲, and edit the status of orders πŸ“‹, all from a single interface. This makes it easier to manage the flow of orders πŸ“ˆ and ensure timely deliveries ⏳.

Security πŸ” is a top priority for The Hungry Helper, which is why it uses JWT (JSON Web Tokens) for authentication and authorization. This ensures that user data is kept secure πŸ›‘οΈ and that only authorized users can access certain parts of the app πŸ”’. JWT is a widely used technology for securing web applications 🌍, making it a reliable choice for The Hungry Helper.

To enhance the user experience 😊, The Hungry Helper uses Cloudinary to store image files on the cloud ☁️. This not only speeds up the retrieval of images πŸ–ΌοΈ but also reduces the load on the server, resulting in faster load times πŸš€ for users. Cloudinary is known for its robust image management capabilities 🏞️, making it a perfect fit for The Hungry Helper.

Local storage is used to save user cart items πŸ›οΈ, allowing users to pick up where they left off even if they navigate away from the app πŸƒ. This feature enhances the convenience for users, as they don’t have to start over every time they use the app πŸ”. It’s a small but significant feature that improves the overall user experience 🌟.

The app also features an integrated coupon code system 🎟️, allowing users to apply discounts πŸ’Έ and save money on their orders. This adds a layer of excitement πŸŽ‰ and encourages users to keep coming back for more. The coupon system is flexible and easy to manage πŸ”§, making it a valuable addition to the app.

Payment integration is handled by Stripe πŸ’³, a leading payment processing platform. Stripe supports multiple payment options πŸ’°, including credit cards, debit cards, and even Cash On Delivery πŸ’΅. This flexibility ensures that users can choose the payment method that best suits their needs πŸ’‘. Stripe’s robust security features also ensure that all transactions are secure πŸ›‘οΈ.

One of the key features of The Hungry Helper is its advanced order tracking system πŸ“. Users can track their orders in real-time ⏱️, from the moment they place the order to the moment it’s delivered πŸ“¦. This transparency builds trust 🀝 and keeps users informed every step of the way πŸ—ΊοΈ.

The tech stack used to build The Hungry Helper includes React JS for the frontend πŸ–₯️, Node JS for the server-side logic πŸ”§, Express for building the REST APIs 🌐, and MongoDB for the database πŸ“¦. This combination of technologies ensures a seamless and efficient user experience πŸ†. React JS is known for its flexibility and performance, making it an ideal choice for the frontend πŸš€. Node JS and Express are widely used for building scalable and efficient server-side applications, and MongoDB provides a flexible and scalable database solution πŸ—„οΈ.

Several libraries have been used to enhance the functionality of The Hungry Helper πŸ“š. Axios is used for making HTTP requests 🌐, Toastify is used for displaying notifications πŸ“’, and JWT is used for authentication πŸ”‘. Multer and Cloudinary are used for handling file uploads and storage πŸ“‚, while bcrypt is used for hashing passwords πŸ”’. Stripe is used for payment processing πŸ’³, and Validator is used for validating user input ✍️.

The app also includes several screenshots that showcase its user interface and features πŸ“Έ. These screenshots provide a visual representation of the app 🎨, giving users a glimpse of what to expect πŸ‘€. From the clean and intuitive design 🧼 to the detailed order tracking, the screenshots highlight the key features of The Hungry Helper 🌟.

Running The Hungry Helper on a local server is straightforward πŸ› οΈ. Users need to clone the repository πŸ“, open each directory in separate terminals πŸ“‚, run npm install in all terminals πŸ”„, and finally run npm run dev in all terminals πŸš€. This simple setup process makes it easy for developers to get started with The Hungry Helper πŸ”§.

The Hungry Helper is designed to be compatible with all major browsers 🌐, including IE10, IE11, Edge, Firefox, Chrome, Safari, iOS Safari, and Opera. This ensures that users can access the app from any device πŸ“±, regardless of the browser they are using. Cross-browser compatibility is a crucial aspect of modern web applications πŸ–₯️, and The Hungry Helper has been designed with this in mind 🧠.

In summary, The Hungry Helper is a comprehensive and user-friendly online food ordering app 🌟. Its robust tech stack πŸ› οΈ, advanced features πŸš€, and secure authentication πŸ” make it a reliable choice for both users and administrators πŸ‘₯. Whether you’re looking to order your favorite meals πŸ• or manage a food delivery service 🚚, The Hungry Helper has you covered. With its intuitive design and powerful features, The Hungry Helper is set to revolutionize the way we order food online 🌐.