/Food-Ordering-Website

A Food ordering website where customers can order food items from a particular restaurant

Primary LanguageJavaScript

Food-Ordering-Website

A website where user can buy food products from a specific hotel to which the website belongs to.
College: K.J.Somaiya College of Engineering, Mumbai
Class TY COMPS B

Contributors:

Simulation:

Food-Ordering-Website.mp4

Installation:

  1. Clone the repository.
  2. Run the command npm i after going to the main main project directory to install all node modules.
  3. Go to the frontend directory and run the npm i command to install all node modules required for frontend.
  4. Create two terminals.On one terminal go to frontend directory and run command npm start to start the frontend and on other terminal go to backend directory and run command node server.js to run the backend of the project.

Technologies Used:

  1. We have a MERN architecture for developing a website.
  2. MongoDB is used as a cloud database for the website.
  3. App level state management is done by making use of redux which reduces complexity of state management.
  4. Cloudinary is used for storing the images. Eg: When image is uploaded by a user as a profile picture or storing food product images etc.
  5. For authentication, we have made use of jwt tokens which expire after a certain time.
  6. We have used stripe api for payment .
  7. We have used send grid api for sending mail to the user.

Features:

Registered User:

  1. User can explore different products. He/She can apply different filters category.
  2. User can choose products between different prize range as well as he can choose different products having specific ratings.
  3. User can login for shopping.
  4. There is cart provided to each user where user can keep items which they want to buy. User can add and remove different items from cart.
  5. There is search bar which will show all the products related to search in search bar.
  6. There is email provided in contact field which will redirect to mail page.
  7. User will able to change his details (credentials) in edit profile option.
  8. All orders of each user are viewed to him on a separate page.
  9. User will able to give review on products.
  10. User can add no of products to cart and then he will put shipping info and then finally card details for payment.

Unregistered User:

He will able to browse all items. But he will have to register to buy any product. After registering he will be able to access all the functionalities of registered user.

Admin:

  1. Admin has access to dashboard which shows users, products and orders.
  2. Admin can add, remove, update different products
  3. Admin can make another user as admin and can also add or remove user.
  4. Admin can see status of all the orders in one place and can update the same. '

References:

  • Offical documentation for node, react, npm packages, jwt, stripe api,cloudinary api.
  • Youtube
  • MDN Docs
  • StackOverflow

UI Screens(For user):

1. Login:

image

2. Register:

image

3. Food Items Page:

image

4. Food Items Info Page:

image

5. My Profile Page:

image

6. My Orders Page:

image

7. Order Details Page:

image

8. My Cart Page:

image

UI Screens(For Admin):

1. My Profile Page:

image

2. Update Profile Page:

image

3. Update Password Page:

image

4. Dashboard Page:

image

5. All Products Page:

image

6. Create Product Page:

image

7. Update Product Page:

image

8. All Orders Page:

image

9. Update Order(Status) Page:

image

10. All Users Page:

image

11. Update User(Role) Page:

image

12. All Reviews Page:

image