A restaurant-based web application built over the MERN stack to provide clients with a quick, responsive web application with better, modern, and simple UI and User Experience with fast ordering options.
These instructions will get you a copy of this project running on your local machine for development and testing purposes. It also contains development details. Click here
This project contains readable code with proper documentation. In case of queries, feel free to ping me :)
This is my first MERN stack application :) where I have built a REST API to provide the easy management of sign-in, registration, contact and ordering components. I tested this API using Postman. The frontend and the backend are fully connected and I have handled the CORS error which came while pushing data from the frontend to the backend using a proxy server.
Built over ReactJS, it is a client-side rendered and responsive homepage.
Mapped these menu items into card components dynamically from an array.
I have used an API to get food items based on the user search, the result will get dynamically fetched and will be displayed in the form of cards on the screen. Searching it will add the item to the window.
You can check the API used here
For the register component, I have used tokens and cookies to authorize users. Cookies are programmed in a way such that they get deleted automatically after 30 days and the user gets logged out. The passwords are hashed after entering using BcryptJS while user registration and are compared while authenticating the client while signing in.
After registering successfully, user will get a customized confirmation email. I implemented this using EmailJS.
Used React useContext hook (Context API) along with useReducer hook to manage state globally in the application and to toggle the navbar elements.
If the user is logged in successfully, the logout option will appear. The username of the logged-in user will be shown on the navbar.
The year in the footer gets dynamically fetched, so there is no need to take care of changing it every year.
User can subscribe for the newsletter and will get a confirmation email for the same. I implemented this using EmailJS.
My database is hosted on MongoDB Atlas. I have used ExpressJS and NodeJS to make routes, schema and middlewares in the backend. I have used a .env file to configure my application environment constants and to keep them safe.
Stored the JWT tokens in an array.