Skip to content

Meal Master - User and Admin can handle Meals .This project payment method integrate with strap and user authentication handle firebase.

Notifications You must be signed in to change notification settings

JuborajSujon/meal-master-client

Repository files navigation

Meal Master Client Side

Live Site URL:

Firebase Hosting : https://meal-master-chef.web.app/

Netlify Hosting : https://mealmasterchef.netlify.app/

Meal Master server side repository : https://github.com/JuborajSujon/meal-master-server.git

Admin User Name : [email protected]

Admin Password : 111111Aa

Project Overview

This project user can request meals, review, purches order, payments status and delete order and admin can added meal, manage user, manage meals, manage review, manage upcomeing meals and meals status. This project payment method intregrate with strap and user authentication handle firebase.

Features and Characteristics:

Comprehensive Navigation:

Easily navigate through our website with dedicated sections for Home, Meals, Upcoming Meals, Subscriptions, Contact Us, Error Page, Login, Register, and Purchase Confirm. Users can also access Google.

User Dashboard :

  • Users can Request Meals
  • Users can add reviews and Edit or Delete their reviews
  • Users can purches orders
  • Check Payment Status and delete their Orders
  • Users can view their profile.

Admin Dashboard:

  • Admin can view their profile with number of menu added
  • Admin can manage Users update or remove users role
  • Added new menu. Manage all menu update or delete.
  • Manage all Reviews with meals, like, reviews counts and delete.
  • Serve meals with status update to delivery or pending.
  • Added Upcoming Meals views and published main menu for users to order.

Other features:

  • User Authentication : Utilizing Firebase Authentication, users can securely register, sign in, and login. Additionally, they have the option to sign in with Google or GitHub for added convenience.

  • Intregated MongoDB Database : Our website is integrated with MongoDB database for seamless data storage and retrieval.

  • Responsive Design : Our website is designed to be responsive across various devices, ensuring a consistent and user-friendly experience for all users.

  • Theme Selection : Choose from a variety of themes, including light and dark mode, for a seamless and visually appealing user experience.

  • Seamless Contact Form :

Integrate EmailJS with React to create a seamless contact form. With EmailJS, you can send emails directly from the client-side, streamlining our email workflow and making it easier for our users to get in touch.

  • Push Notification : Send push notifications to your users with the help of Firebase Cloud Messaging.

Responsive Design:

  • Engaging Visuals : Enhance user interaction with captivating animations powered by the tsparticles, animate.css, and aos npm packages.

  • User-friendly Interface : Our website is designed with a modern and intuitive user interface, ensuring a smooth and intuitive experience for all users.

Used Technology

  • Frontend Development : React, React DOM, React Router DOM, React Hook Form, React Icons, React Helmet Async, React Toastify, Lottie React, React Datepicker, React Loader Spinner, React Infinite Scroll Component

  • User Authentication & Security : Firebase

  • Payment Processing : @stripe/react-stripe-js, @stripe/stripe-js

  • UI Components & Styling : Tailwind CSS, DaisyUI

  • Development Tools : Vite, ESLint, ESLint Plugins, PostCSS, Autoprefixer

  • Charts & Data Visualization : Recharts

  • Additional Libraries : Axios, SweetAlert2, Swiper, @tanstack/react-query

Installation: 💻

  1. Clone the repository from GitHub:
git clone https://github.com/JuborajSujon/meal-master-client.git


  1. Navigate to the project directory:
cd meal-master-client
  1. Install dependencies using npm or yarn:
npm install

or

yarn install

Usage: 📖

  1. Start the development server:
npm run dev
  1. Open your web browser and visit http://localhost:5173 to access the application.

Additional Notes:

  • Ensure that you have Node.js and npm (or yarn) installed on your system before proceeding with the installation.
  • The application requires an active internet connection to fetch service data and provide personalized recommendations.
  • Customize the application as needed by modifying the source code files located in the project directory.
  • For production deployment, build the project using npm run build or yarn build and deploy the generated build files to your hosting server.

Enjoy exploring and discovering your favorite meals! 🚀:🚀:🚀