https://github.com/aburaihan98/dineease-client

This project is a Restaurant Management Website built with the MERN Stack (MongoDB, Express.js, React.js, Node.js). It includes user authentication (email/password and social logins), JWT-secured routes, and a responsive design, enhancing restaurant operations and customer experience.
https://github.com/aburaihan98/dineease-client

expressjs firebase framer-motion jwt momentjs mongodb nodejs react-lightbox reactjs tailwindcss tanstack-query

Last synced: 3 months ago
JSON representation

This project is a Restaurant Management Website built with the MERN Stack (MongoDB, Express.js, React.js, Node.js). It includes user authentication (email/password and social logins), JWT-secured routes, and a responsive design, enhancing restaurant operations and customer experience.

• Host: GitHub
• URL: https://github.com/aburaihan98/dineease-client
• Owner: aburaihan98
• Created: 2025-01-27T11:21:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-11T07:03:35.000Z (over 1 year ago)
• Last Synced: 2025-03-11T07:34:25.224Z (over 1 year ago)
• Topics: expressjs, firebase, framer-motion, jwt, momentjs, mongodb, nodejs, react-lightbox, reactjs, tailwindcss, tanstack-query
• Language: JavaScript
• Homepage: https://dine-ease-aacad.web.app/
• Size: 173 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dine-Ease - Restaurant Management Website 🍽️

Dine-Ease is a full-stack restaurant management platform designed to improve the efficiency of food ordering and inventory management. Built using the MERN stack, the website provides functionalities like food management, user authentication, and a seamless user experience for both customers and staff.

![EquiSports Screenshot](https://i.ibb.co.com/fYFrvB5J/dineease.png)

## live project links:

https://dine-ease-aacad.web.app/

## Key Features

- **User Authentication**: Email/password-based login and registration. Google login integration. Password verification (uppercase, lowercase, and minimum length).

  

- **Food Management**: Add, update, and delete food items. View food details on the "All Foods" page. Filter food items using MongoDB’s `$and` operators.

- **Food Purchase**: Users can purchase food with quantity restrictions. Display purchase count for each food item.

- **Gallery Section**: 48 static images with image lightbox functionality using `react-lightbox`.

- **User Profile**: Display logged-in user’s profile image and name. Manage user-specific food items and orders.

- **Responsive Design**: Fully responsive design for mobile, tablet, and desktop.

- **Search and Filter**: Search food items by name. Filter food items based on price and origin.

- **Pagination**: Pagination for food items with 9 items per page.

- **JWT Authentication**: JWT tokens for secure private routes.

- **Toast & Sweetalert2 Notifications**: Display notifications for login, registration, and food purchase actions.

- **Food Quantity Management**: Restrict purchases based on available food quantity. Notify users when a food item is out of stock.

- **Gallery Infinite Scrolling**: Infinite scrolling for gallery images.

## Technologies Used  

### Frontend:  

- **React.js** – Component-based UI development  

- **React Router** – Client-side navigation  

- **Firebase Authentication** – User authentication (Email/Google login)  

- **React Toastify** – Notifications  

- **Sweetalert2** – Interactive alerts  

- **Framer Motion** – Animations  

- **Lottie-web** – Lottie animations  

- **Moment.js** – Date formatting  

- **Axios** – API requests  

- **React Query (TanStack)** – State & data fetching management  

- **React Rating Stars Component** – User rating system  

- **React Infinite Scroll Component** – Infinite scrolling feature  

- **React Lightbox** – Image preview functionality  

- **FontAwesome** – Icon library  

### Backend:  

- **Node.js** – Server-side runtime  

- **Express.js** – Backend framework  

- **MongoDB** – NoSQL database  

- **Firebase Authentication** – User authentication management  

- **Axios** – API handling  

## Dependencies

- **Frontend:**

  - `react`

  - `react-router-dom`

  - `firebase`

  - `axios`

  - `react-toastify`

  - `sweetalert2`

  - `framer-motion`

  - `moment`

  - `react-infinite-scroll-component`

  - `react-lightbox`

  - `react-rating-stars-component`

- **Backend:**

  - `express`

  - `mongoose`

  - `jsonwebtoken`

  - `dotenv`

## Running the Project Locally

### Prerequisites

- Node.js

- MongoDB instance

- Firebase credentials (for authentication)

## Steps to Run Locally

### 1. Clone this repository -

git clone https://github.com/aburaihan98/DineEase-client.git

### 2. Go to the cloned project directory

cd DineEase-client

### 3. Just run this command to install node dependencies

npm install

### 4. Just run this command

npm run dev