Skip to content

The overall goal of the project is to create a responsive restaurant application with a complete MERN stack implementation, allowing users to view and filter products, add them to their cart, make secure payments, and provide an intuitive user experience.

Notifications You must be signed in to change notification settings

pattjoshi/MERN_restaurant

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

MERN_restaurant


Features 🔥

✔️ only Admid add the product
✔️ Filtering product
✔️ Authentication login
✔️ Sign up , user upload profile picture
✔️ Add to Cart Items
✔️ Cart Items Insrease and decrease
✔️ Authentication user only Buy Item
✔️ Payment method Stripe
✔️ Error hendeling 404 page
✔️ Responsive Design using Tailwind
✔️ State menagment Redux toolkit
✔️ Deploy the App LIVE on vercel(FE) and render (BE)


Technologies used 🛠️

✔️ Build a COMPLETE Fullstack Restudent Responsive MERN App
✔️ Frontend : - React.js
✔️ Style :- Tailwind
✔️ Backend :- Node.js and Express.js
✔️ DataBase :- mongoDb
✔️ State management :- Redux toolkit
✔️ Routing :- react-router-dom
✔️ Payment :- Stripe
✔️ Frontend Hosting :- vercel
✔️ Back end Hosting :- render
✔️ package manager :- npm


description :

  • The project is a MERN (MongoDB, Express.js, React.js, Node.js) restaurant application with various features. Here is a description of the project

  • The application allows the admin to add products to the restaurant menu. Users can then view and filter the available products. To access the application, users need to authenticate by loging in or signing up. During the sign-up process, users can upload a profile picture.

  • Once logged in, users can add items to their cart. The cart allows users to increase or decrease the quantity of items. Only authenticated users are allowed to proceed with the purchase of items.

  • For payment processing, the Stripe payment method is implemented in the application. This enables secure and convenient online transactions.

  • To enhance user experience, the application includes error handling with a 404 page for handling missing pages or routes. The design of the application is responsive, ensuring compatibility across different devices and screen sizes. Tailwind CSS is used for styling the user interface.

  • State management in the application is implemented using Redux Toolkit, which provides a predictable state container for managing the application's data.

  • The application is deployed live on Vercel for the frontend hosting, while the backend is hosted on Render. This allows the application to be accessible to users on the internet.


Images:

image image image image image image image image image image image image

Vedio :-

untitled_ibDGa22z.mp4

Screenshot

Mobile View Desktop View
image

|

Built with

MongoDB Express.js React NodeJS Redux tailwindcss

How to own this

Must have in Yor System (STAP 1)

node mongo npm

STAP-2

git clone https://github.com/pattjoshi/MERN_restaurant.git

STAP 3

FRONT_END :- .env

REACT_APP_SERVER_DOMIN = ""
REACT_APP_ADMIN_EMAIL = ""
REACT_APP_STRIPE_PUBLIC_KEY = ""

STAP 4 (frontend is front-end) local host 3000

cd frontend

npm install

npm start

BACK_END :- .env

MONGODB_URL = ""
STRIPE_SECRET_KEY = ""
FRONTEND_URL = "http://localhost:3000"

STAP 5:- (backend is back-end) local host 8080

cd backend

npm install

npm run dev


🙏 If you find this repo helpful then don't forget to give a star ❇️ to this repository. :)

Animated footer bars


Back to top

About

The overall goal of the project is to create a responsive restaurant application with a complete MERN stack implementation, allowing users to view and filter products, add them to their cart, make secure payments, and provide an intuitive user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published