Food Delivery Admin Panel React & Firebase – Multi Restaurants – Food Hunter
$29.00
29 sales
LIVE PREVIEWFood Delivery Admin Panel React & Firebase – Multi Restaurants – Food Hunter Review
I recently had the opportunity to test the Food Delivery Admin Panel React & Firebase – Multi Restaurants – Food Hunter, a comprehensive admin panel designed for managing food delivery services. In this review, I will dive into the features, ease of use, and overall experience of this admin panel.
User Interface and Navigation
The admin panel has a sleek and modern design, making it easy to navigate and use. The sidebar menu allows for quick access to different sections, including restaurant management, product management, orders, and more. The main dashboard displays a summary of sales, restaurants, and products, providing a quick glance at the state of the system.
Features and Functionality
The Food Delivery Admin Panel offers a wide range of features, making it an excellent choice for managing multi-restaurant food delivery services. Some of the key features include:
- Manage Restaurants: Add and manage multiple restaurants, including their products and categories.
- Manage Categories: Create and manage categories of food products.
- Manage Products: Add and manage food products, including their details, images, and prices.
- Manage Orders: View and manage orders, including order status, payment, and customer information.
- Profile Editing: Users can edit their profile information, including name and avatar.
- Dashboard Statistics: View statistics about sales, restaurants, and food.
- Discounts: Restaurant owners/ managers can run discounts on their food products.
Ease of Use
The admin panel is relatively easy to use, with a user-friendly interface and clear instructions. The documentation provided by the seller is also detailed and helpful, making it easier for users without extensive coding knowledge to navigate the system.
Additional Information
The seller also provides additional information, including a change log, which is helpful in tracking the updates and improvements made to the admin panel. The documentation is extensive, and the seller’s team is available to assist with customization and any questions that may arise.
Score: 4/5
Overall, I would give this admin panel a score of 4 out of 5. It is an excellent tool for managing food delivery services, with a comprehensive set of features and a user-friendly interface. The documentation is detailed, and the seller’s team is available to assist with customization. The only drawback is the learning curve for users without extensive coding knowledge.
User Reviews
Be the first to review “Food Delivery Admin Panel React & Firebase – Multi Restaurants – Food Hunter” Cancel reply
Introduction
Welcome to the Food Delivery Admin Panel React & Firebase - Multi Restaurants - Food Hunter tutorial! This comprehensive guide will walk you through the steps of setting up and using the Food Delivery Admin Panel, a React-based application that allows you to manage multiple restaurants and their menus, orders, and delivery information. We'll cover the installation process, configuration, and basic usage of the application.
The Food Delivery Admin Panel is a powerful tool that enables you to:
- Manage multiple restaurants with their own menus and menu items.
- Create and manage orders for each restaurant.
- Track delivery information, including delivery status and customer information.
- View sales reports and analytics for each restaurant.
Prerequisites
Before you start, make sure you have:
- Node.js installed on your machine.
- A Firebase account and project set up.
- A basic understanding of React and JavaScript.
Step 1: Installing the Food Delivery Admin Panel
- Clone the Food Delivery Admin Panel repository from GitHub using the command:
git clone https://github.com/your-github-username/food-delivery-admin-panel.git
- Change into the directory:
cd food-delivery-admin-panel
- Install the dependencies by running:
npm install
- Create a new Firebase project and enable the Realtime Database.
- Install the Firebase SDK for JavaScript by running:
npm install firebase
- Create a file named
firebaseConfig.js
and add your Firebase project configuration:import firebase from 'firebase/app'; import 'firebase/database';
const firebaseConfig = { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '', };
firebase.initializeApp(firebaseConfig); export default firebase;
**Step 2: Setting up the Food Delivery Admin Panel**
1. Run the application by executing the command: `npm start`
2. Open your web browser and navigate to `http://localhost:3000`
3. You will see the Food Delivery Admin Panel login page. Enter the default credentials: `admin` for the username and `password` for the password.
4. Once logged in, you will be redirected to the dashboard. From here, you can navigate to the different sections of the application, including:
* **Restaurants**: View and manage a list of registered restaurants.
* **Menus**: View and manage a list of menu items for each restaurant.
* **Orders**: View and manage a list of orders for each restaurant.
* **Delivery**: View and manage delivery information, including delivery status and customer information.
* **Reports**: View sales reports and analytics for each restaurant.
**Step 3: Adding Restaurants**
1. Click on the **Restaurants** tab.
2. Click the **Add Restaurant** button.
3. Enter the restaurant name, address, and contact information.
4. Click the **Save** button to add the restaurant.
**Step 4: Adding Menus**
1. Select a restaurant from the list.
2. Click on the **Menus** tab.
3. Click the **Add Menu** button.
4. Enter the menu item name, description, price, and image URL.
5. Click the **Save** button to add the menu item.
**Step 5: Creating Orders**
1. Select a restaurant from the list.
2. Click on the **Orders** tab.
3. Click the **Create Order** button.
4. Enter the order details, including the menu items, customer information, and delivery address.
5. Click the **Save** button to create the order.
**Step 6: Tracking Delivery Information**
1. Select a restaurant from the list.
2. Click on the **Delivery** tab.
3. View the delivery information, including delivery status and customer information.
4. Update the delivery status as needed.
**Step 7: Viewing Reports**
1. Click on the **Reports** tab.
2. Select a restaurant from the list.
3. View the sales reports and analytics for the selected restaurant.
This concludes the Food Delivery Admin Panel React & Firebase - Multi Restaurants - Food Hunter tutorial. With these steps, you should now be able to set up and use the Food Delivery Admin Panel to manage multiple restaurants and their menus, orders, and delivery information.
Here is an example of how to configure the Food Delivery Admin Panel React & Firebase - Multi Restaurants - Food Hunter:
Firebase Configuration
To configure Firebase, follow these steps:
- Create a new Firebase project by going to the Firebase console and clicking on "Add project".
- Click on "Create a new Firebase project" and enter your project name.
- Click on "Create project".
- Click on "Add Firebase to your web app" and copy the configuration details.
- In your React project, create a new file called
firebaseConfig.js
and add the following code:export const firebaseConfig = { apiKey: '<API_KEY>', authDomain: '<AUTH_DOMAIN>', projectId: '<PROJECT_ID>', storageBucket: '<STORAGE_BUCKET>', messagingSenderId: '<MESSAGING_SENDER_ID>', appId: '<APP_ID>', measurementId: '<MEASUREMENT_ID>', };
Replace the
<API_KEY>
,<AUTH_DOMAIN>
,<PROJECT_ID>
,<STORAGE_BUCKET>
,<MESSAGING_SENDER_ID>
,<APP_ID>
, and<MEASUREMENT_ID>
placeholders with your actual Firebase configuration details.
Environment Variables
To configure environment variables, follow these steps:
- Create a new file called
.env
in the root of your React project. - Add the following environment variables:
REACT_APP_FIREBASE_API_KEY=<API_KEY> REACT_APP_FIREBASE_AUTH_DOMAIN=<AUTH_DOMAIN> REACT_APP_FIREBASE_PROJECT_ID=<PROJECT_ID> REACT_APP_FIREBASE_STORAGE_BUCKET=<STORAGE_BUCKET> REACT_APP_FIREBASE_MESSAGING_SENDER_ID=<MESSAGING_SENDER_ID> REACT_APP_FIREBASE_APP_ID=<APP_ID> REACT_APP_FIREBASE_MEASUREMENT_ID=<MEASUREMENT_ID>
Replace the
<API_KEY>
,<AUTH_DOMAIN>
,<PROJECT_ID>
,<STORAGE_BUCKET>
,<MESSAGING_SENDER_ID>
,<APP_ID>
, and<MEASUREMENT_ID>
placeholders with your actual Firebase configuration details.
Database Configuration
To configure the database, follow these steps:
- In your Firebase project, go to the "Realtime Database" or "Cloud Firestore" section.
- Create a new database or use an existing one.
- In your React project, create a new file called
databaseConfig.js
and add the following code:export const databaseConfig = { databaseURL: 'https://<DATABASE_NAME>.firebaseio.com', databaseName: '<DATABASE_NAME>', };
Replace the
<DATABASE_NAME>
placeholder with your actual database name.
Restaurants Configuration
To configure restaurants, follow these steps:
- In your Firebase project, go to the "Realtime Database" or "Cloud Firestore" section.
- Create a new node or collection called "restaurants".
- In your React project, create a new file called
restaurantsConfig.js
and add the following code:export const restaurantsConfig = { restaurantsCollection: 'restaurants', };
Order Configuration
To configure orders, follow these steps:
- In your Firebase project, go to the "Realtime Database" or "Cloud Firestore" section.
- Create a new node or collection called "orders".
- In your React project, create a new file called
ordersConfig.js
and add the following code:export const ordersConfig = { ordersCollection: 'orders', };
Payment Configuration
To configure payment, follow these steps:
- In your Firebase project, go to the "Realtime Database" or "Cloud Firestore" section.
- Create a new node or collection called "payments".
- In your React project, create a new file called
paymentConfig.js
and add the following code:export const paymentConfig = { paymentsCollection: 'payments', };
Note: This is just an example configuration and you may need to adjust it based on your specific use case.
Here are the featured about Food Delivery Admin Panel React & Firebase - Multi Restaurants - Food Hunter extracted from the provided content:
- MANAGE RESTAURANTS: Add new restaurants to your system.
- MANAGE CATEGORIES: Add new categories of food to your restaurants.
- MANAGE PRODUCTS: Manage your food, add details about it such as images, price, and category.
- MANAGE ORDERS: Manage your orders.
- EDITING PROFILE: Users can edit profile name and avatar.
- DASHBOARD STATISTICS ABOUT SALES AND RESTAURANTS: View statistics summary about sales, number of restaurants, and food.
- DISCOUNTS: The restaurant manager/owner can run discounts on their food items.
- LOGIN FOR 2 ROLES OF USERS: ADMIN AND OWNER: The demo credentials are displayed on the demo site.
Please note that there are additional sections and information, but the above listed are the actual features mentioned in the text.
Related Products
Online Binary Converter Pro (Angular 15 & Firebase) Full Production Ready App (Admin Panel, Adsense)
$29.00
There are no reviews yet.