Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amhjadkhan/resturent_clint

RESTURENT ORDER MANAGEMENT
https://github.com/amhjadkhan/resturent_clint

admin-dashboard expressjs food-ordering fullstack-javascript mern-stack mongodb nodejs payments reactjs responsive rest-api user-dashboard

Last synced: 8 days ago
JSON representation

RESTURENT ORDER MANAGEMENT

Awesome Lists containing this project

README

        

# Resturet Item Booking Project
## MERN STACK PROJECT

![Project Preview](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWX49ucc3FbbA4pYBRytRz-oCG-pSSIc347Q&s)

![VSCode](https://img.shields.io/badge/VSCode-007ACC?logo=visual-studio-code&logoColor=white)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/TailwindCSS-38B2AC?logo=tailwind-css&logoColor=white)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)
![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=white)
![MongoDB](https://img.shields.io/badge/MongoDB-47A248?logo=mongodb&logoColor=white)

## Live Links
- **Live Site**: [Your Live Site Link](https://resturentorders.netlify.app/)
- **GitHub Client Repository**: [Client Repo Link](https://github.com/AmhjadKhan/resturent_clint/)
- **GitHub Server Repository**: [Server Repo Link](https://github.com/AmhjadKhan/Resturent_server)

## Getting Started

### Cloning the Repository
``` npm install```
#### make sure
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
STRIPE_SECRET_KEY=your_stripe_secret_key
FIREBASE_CONFIG=your_firebase_config

### you start
``` npm run dev ```

## Project Overview
The Resturet Item Booking Project is a full-stack web application designed to facilitate the booking of restaurant items in a seamless and efficient manner. The application caters to both users and administrators, offering a range of features to manage bookings, payments, and user data.

### Key Features
1. **Authentication**: The application provides secure authentication using Firebase, allowing users to sign up and log in with their credentials. Authentication is crucial for protecting user data and ensuring only authorized access.

2. **Booking System**: Users can browse through available restaurant items and make bookings directly through the app. The intuitive booking system is designed to be user-friendly, with a simple and clear interface.

3. **Payment Integration**: The app integrates with Stripe to handle payments securely. Users can make payments for their bookings with various payment methods, ensuring a smooth and safe transaction process.

4. **Role-Based Routes**: The application offers distinct routes for admins and users. Admins have access to a dashboard where they can manage all bookings, user accounts, and restaurant items. Users have their dashboard to track their bookings, view their payment history, and manage their account details.

5. **Dashboards**: The user dashboard provides a personalized space where users can view and manage their bookings. The admin dashboard offers comprehensive control over the entire system, including booking management, user management, and item management.

## Technologies Used
- **Frontend**: The frontend is built with **React** for a dynamic and responsive user interface. **Tailwind CSS** and **DaisyUI** are used for styling, providing a modern and consistent look across all pages.
- **Backend**: The backend is powered by **Node.js** and **Express.js**, ensuring robust and scalable server-side operations.
- **Database**: **MongoDB** is used as the database for storing user data, booking information, and restaurant items, offering flexibility and scalability.
- **Authentication**: **Firebase** handles user authentication, providing secure login and registration.
- **Payment Gateway**: **Stripe** is integrated for handling payments, ensuring a secure and reliable transaction process.
- **Hosting**: The client side of the application is hosted on **Vercel**, while the server side is hosted on **Netlify**.
- **Environment Variables**: **dotenv** is used to manage environment variables, keeping sensitive information like API keys secure.
- **Middleware**: Custom middleware is used for request handling, ensuring smooth operation of the application.

## Packages
The application utilizes a variety of packages to enhance functionality and improve user experience:

- **@smastrom/react-rating**: "^1.3.1" - A React component for adding a rating system to the app.
- **@stripe/react-stripe-js**: "^2.7.3" - Stripe integration for handling payments within the React app.
- **@stripe/stripe-js**: "^4.1.0" - JavaScript library for integrating Stripe payments.
- **@tanstack/react-query**: "^5.51.15" - A powerful data-fetching library for managing server state.
- **axios**: "^1.7.2" - A popular HTTP client for making API requests.
- **daisyui**: "^2.51.6" - A utility-first CSS framework that integrates seamlessly with Tailwind CSS.
- **firebase**: "^10.12.4" - Firebase SDK for authentication and other backend services.
- **localforage**: "^1.10.0" - A JavaScript library for offline storage.
- **match-sorter**: "^6.3.1" - A simple, expected, and deterministic best-match sorting of an array in JavaScript.
- **react**: "^18.2.0" - The core library for building user interfaces.
- **react-dom**: "^18.2.0" - Provides DOM-specific methods for React.
- **react-helmet-async**: "^1.3.0" - For managing changes to the document head.
- **react-hook-form**: "^7.52.1" - A library for managing forms in React.
- **react-icons**: "^5.2.1" - Popular icons as React components.
- **react-parallax**: "^3.5.1" - A component for adding parallax effects.
- **react-responsive-carousel**: "^3.2.23" - A flexible carousel component for React.
- **react-router-dom**: "^6.11.2" - For managing navigation in the app.
- **react-simple-captcha**: "^9.3.1" - A simple captcha component.
- **react-tabs**: "^6.0.1" - A component for creating tabbed interfaces.
- **recharts**: "^2.12.7" - A charting library built on React.
- **sort-by**: "^1.2.0" - A library for sorting arrays.
- **sweetalert2**: "^11.12.3" - A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.
- **swiper**: "^9.3.2" - A modern mobile touch slider with hardware-accelerated transitions.

## Project Image
![Project Image](./A_vibrant,_modern_web_application_interface_showin.png)