Step By Step Tutorial: Building a Comprehensive Food Delivery App with React JS in 2024

Food delivery apps have become increasingly popular in recent years, providing users with a convenient way to order food from their favorite restaurants and have it delivered right to their doorstep. In this tutorial, we will be explaining how to create a complete food delivery app using React JS, a popular JavaScript framework for building user interfaces. By the end of this tutorial, you will have a fully functional food delivery app that allows users to browse restaurants, view menus, place orders, and track the status of their deliveries.

Step 1: Set Up Your Development Environment

Before we jump into building our food delivery app, we need to set up our development environment. Make sure you have Node.js and npm installed on your machine. You can download them from the official Node.js website.

Next, create a new React project by running the following command in your terminal:

npx create-react-app food-delivery-app

This command will create a new React project called "food-delivery-app" in your current directory. Change into the newly created directory by running:

cd food-delivery-app

Now, start the development server by running:

npm start

You should now see the default React welcome screen in your browser at http://localhost:3000.

Step 2: Set Up Firebase

We will be using Firebase, a cloud-based platform, for the backend of our food delivery app. Sign up for a free Firebase account and create a new project. Once your project is created, navigate to the Firestore database and set it up with the following rules:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Make sure to copy your Firebase configuration details from the project settings page, as we will need them later.

Step 3: Create Components

Now that we have set up our development environment and backend, it’s time to start building our app. Create a new folder called "components" inside the src directory of your project. Inside this folder, create the following components:

• RestaurantList.js: This component will display a list of restaurants available for delivery.
• Menu.js: This component will display the menu of a selected restaurant.
• Cart.js: This component will display the user’s cart with their selected items.
• OrderConfirmation.js: This component will display the order confirmation screen.
• OrderHistory.js: This component will display the user’s order history.

Step 4: Fetch Data from Firebase

In your RestaurantList.js component, import Firebase and set up a connection to your Firestore database using the Firebase configuration details you copied earlier:

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

Next, create a function to fetch a list of restaurants from Firestore and display them in your component:

const RestaurantList = () => {
  const [restaurants, setRestaurants] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await db.collection('restaurants').get();
      setRestaurants(data.docs.map(doc => doc.data()));
    };
    fetchData();
  }, []);

  return (
    <div>
      {restaurants.map((restaurant) => (
        <div key={restaurant.id}>
          <h2>{restaurant.name}</h2>
          <p>{restaurant.description}</p>
        </div>
      ))}
    </div>
  );
};

Step 5: Add Navigation

To allow users to navigate between different screens in our food delivery app, we will use React Router. Install React Router by running:

npm install react-router-dom

Next, create a new file called App.js in the src directory and initialize a basic routing structure for our app:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import RestaurantList from './components/RestaurantList';
import Menu from './components/Menu';
import Cart from './components/Cart';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={RestaurantList} />
        <Route path="/menu/:restaurantId" component={Menu} />
        <Route path="/cart" component={Cart} />
      </Switch>
    </Router>
  );
}

export default App;

Step 6: Implement Ordering Functionality

In your Menu.js component, create a function to add items to the user’s cart and calculate the total order amount:

const Menu = () => {
  const [cart, setCart] = useState([]);
  const [totalAmount, setTotalAmount] = useState(0);

  const addToCart = (item) => {
    setCart([...cart, item]);
    setTotalAmount(totalAmount + item.price);
  };

  return (
    <div>
      {menuItems.map((item) => (
        <div key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.price}</p>
          <button onClick={() => addToCart(item)}>Add to Cart</button>
        </div>
      ))}
      <h4>Total Amount: {totalAmount}</h4>
    </div>
  );
};

Step 7: Implement Order Confirmation

In your Cart.js component, create a function to allow users to confirm their order and submit it to the Firestore database:

const Cart = () => {
  const confirmOrder = () => {
    db.collection('orders').add({ items: cart, totalAmount, status: 'pending' });
    // Redirect user to order confirmation screen
    history.push('/order-confirmation');
  };

  return (
    <div>
      {cart.map((item) => (
        <div key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.price}</p>
        </div>
      ))}
      <button onClick={confirmOrder}>Confirm Order</button>
    </div>
  );
};

Step 8: Display Order History

In your OrderHistory.js component, fetch the user’s order history from Firestore and display it in a list:

const OrderHistory = () => {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await db.collection('orders').get();
      setOrders(data.docs.map(doc => doc.data()));
    };
    fetchData();
  }, []);

  return (
    <div>
      {orders.map((order) => (
        <div key={order.id}>
          {order.items.map((item) => (
            <div key={item.id}>
              <h3>{item.name}</h3>
              <p>{item.price}</p>
            </div>
          ))}
          <h4>Total Amount: {order.totalAmount}</h4>
          <p>Status: {order.status}</p>
        </div>
      ))}
    </div>
  );
};

Step 9: Testing and Deployment

Congratulations! You have successfully created a complete food delivery app using React JS. Test your app locally by running it in the development server:

npm start

Once you have tested your app and are satisfied with the results, you can deploy it to a hosting service like Vercel or Netlify. Follow the deployment instructions provided by the hosting service to make your app accessible to users online.

In this tutorial, we covered the basic steps for creating a food delivery app using React JS. You can further enhance your app by adding features like user authentication, real-time order tracking, and integration with payment gateways. Feel free to experiment and customize your app to make it even better!