Skip to content

A restaurant-based responsive web application built over the MERN stack πŸ•

Notifications You must be signed in to change notification settings

aakankshabhende/Delicaacy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

27 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Delicaacy πŸ•

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.

Getting Started

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 :)

Tech Stack

MongoDB Express React NodeJs

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.

Components

Homepage ✨

Built over ReactJS, it is a client-side rendered and responsive homepage.



Responsiveness βœ…

Mapped these menu items into card components dynamically from an array.

Orders πŸ₯—

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

Select the items you want

After making your Fav Order 🍜

Login/Register πŸ‘€

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.


Navbar

Used React useContext hook (Context API) along with useReducer hook to manage state globally in the application and to toggle the navbar elements.

Before



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.

After

Footer

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.



Backend

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.

Releases

No releases published

Packages

No packages published