Bistro Boss

Bistro Boss is a modern restaurant management web application that provides users with an interactive menu, order placement, and a streamlined admin panel for restaurant operations.

Features

User Features:

• Browse, search, and filter food items.
• Add items to the cart and place orders.
• Secure authentication using Firebase.
• View order history and ratings.
• Interactive parallax and animation effects.

Admin Features:

• Add, update, and delete menu items.
• Manage customer orders efficiently.
• Track sales and revenue using charts.
• Role-based authentication for security.

Technologies Used

Frontend

• React – Component-based UI development.
• React Router – Navigation and routing.
• Tailwind CSS & DaisyUI – Modern and responsive styling.
• Framer Motion – Smooth animations.
• Axios – API requests handling.
• React Query – Data fetching and caching.
• Recharts – Data visualization.
• SweetAlert2 – Elegant alert dialogs.
• Swiper & React Parallax – Interactive UI effects.

Backend

• Node.js & Express.js – Server-side logic.
• MongoDB – Database for storing user and order data.
• Firebase Authentication – Secure login and signup.
• Stripe – Payment gateway for transactions.

npm Packages Used

Core Dependencies

• @tanstack/react-query: Data fetching and state management.
• axios: API communication.
• firebase: Authentication & database integration.
• react-router-dom: Navigation and routing.
• react-hook-form: Form validation and handling.
• react-tabs: Tabbed navigation system.
• react-responsive-carousel: Image sliders.
• react-simple-captcha: User verification.

UI & Animations

• motion: Smooth UI animations.
• react-parallax: Stunning parallax effects.
• react-spinners: Stylish loading animations.
• sweetalert2: Beautiful alerts and notifications.
• swiper: Modern sliders for images and content.
• recharts: Interactive charts for data visualization.
• animate.css: Pre-built animation styles.

Development Tools

• vite: Fast development server.
• tailwindcss & daisyui: Modern styling framework.
• eslint: Code linting and formatting.
• postcss: CSS processing and optimization.

Live Website

• Bistro Boss

⚙️ Installation

To run Bistro Boss locally, follow these steps:

1️⃣ Clone the Repository

• git clone https://github.com/Atef-Abrar-Bhuyian/Bistro-Boss-Client.git
• cd bistro-boss

2️⃣ Install Dependencies

• npm install

3️⃣ Set Up .env

• VITE_FIREBASE_API_KEY=your_api_key
• VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
• VITE_FIREBASE_PROJECT_ID=your_project_id
• VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
• VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
• VITE_FIREBASE_APP_ID=your_app_id
• VITE_STRIPE_PUBLIC_KEY=your_publishable_key

4️⃣ Start the Development Server

• npm run dev