Click here to Skip to main content
13,703,177 members
Click here to Skip to main content
Add your own
alternative version

Stats

4.3K views
11 bookmarked
Posted 16 Sep 2018
Licenced CPOL

Developer's Guide for Building a Restaurant Delivery Application using React

, 16 Sep 2018
Rate this:
Please Sign up or sign in to vote.
This article covers so useful tips that you might find helpful while creating a food delivery application using React/React Native.

When you're working with a complex application with a list of unending requirements, you are usually left with some unprecedented challenges. Modern developers are generally forced to brainstorm their way out because of the lack of resources for the stack they are using. For instance, building a full stack solution using React for the web and React Native for the mobile and tablet can have its share of challenges. What do you do when you come across an undocumented bug that you don't know how to fix? In this post, I'll discuss the troubles I went through when I built a front-end application for a restaurant.

Make the Application Accessible (Platform Independent)

One of the great things about restaurants is that everyone has to eat, so the market is never not there. As a result, you want to ensure that your food-delivery app reaches as many people as possible. This means all demographics, whether they are on their phone, desktop, tablets – wherever. That's why it is essential that your particular app is functional across all sorts of platforms, whether they happen to prefer iOS or Android, for example. We all know the vast majority of the world's population have access to smartphones, and they could potentially be your next user! You would be crazy to not capitalize on this opportunity. You can add in-app entrances to broaden your audience, as well.

You also have to ensure the UI elements of the app so that it can be quickly and efficiently used for searching, ordering, payments, etc. This will help with customer retention, and also help you gather data about your consumer to adjust your marketing strategy, as well. A full-stack solution can genuinely improve your app become a "hit," which can lead to increased interest and exposure and could potentially help your application reach a new level of success.

Use Generic Endpoints and Use Redux

This is very obvious; however, it's a basic developer mistake that happens. With a platform like React + Redux for the frontend and Node + Express for the backend, you can use generic endpoints for web/tablet and mobile applications. The data displayed for the web and the mobile application is almost always similar. Maintaining multiple routes for the mobile platform, and the web platform adds extra overhead that's easily avoidable. The mobile version usually has to demonstrate less data whereas the web version might have more fields.

With Redux for state management, you can create a single store for all your applications. You can use the Redux middleware to filter out data for a particular platform. Apart from that, you can use the Redux store to house all the UI elements. For instance, a separate the state for webUI, tabletUI, and mobileUI sounds ideal. The developers then have to work with the presentational components for the front-end. Here is an example of how your state could be organized:

{
alerts: Object,
notifications: Object,
user: Object,
location: Object,
restaurantResults: Object,
webUI: Object,
mobileUI: Object
}

This helps you abstract away the store details for all the applications into a single layer. It's easy among developers to work through features for various platforms using React and React Native.

Here is an interesting article on Codebust with some great tips that might help you organize your Redux store in a scalable and maintainable way.

Separate Apps for Each Stakeholder

The app I developed had three particular stakeholders – the restaurant, the consumer, and the delivery agent. There might be an advantage if you consider creating separate apps for each aspect of this business. Most of the prominent restaurant delivery applications like Bringg, Onfleet, Tookan etc. have separate mobile applications for each individual users.

Dividing the workload to different apps help you cater all the requirements of a particular user base. You can even have a similar branding or marketing strategy for every app, but it could potentially work like this, for example:

Consumer App

Here, the consumer is the king, and the consumer gets all sorts of different restaurant options. The consumer would then browse through the choices, and decide based on the price/quality/reviews, and other factors.

Restaurant App

Here, the restaurant could efficiently evaluate their orders. The restaurant can separate new orders, delivered orders and the ones in pending. The employer can get a bird's eye view and can monitor and track the progress of their staff. This helps them improve their efficiency. If you need inspiration for the restaurant aspects, you should have a look at JungleWork's food delivery application.

Here is a design published on Uplabs by Kishore that's a perfect fit for restaurants. 

Delivery App

This could be an app that tracks deliveries in real-time to ensure customer satisfaction, and so the app can offer a kind of transparency that can be beneficial to all parties involved. Based on your requirements, this might also be a good place to incorporate most of the courier related features. Onfleet has an intuitive UI whereas Bringg has added delivery logistics and GPS-based tracking and notification into their delivery application.

The app could even potentially communicate with the consumer and restaurant so that all questions and concerns are properly addressed.

Combining all the three units into a single application has drawbacks.

  1. Any update to a particular application requires you to update the entire application
  2. The final app will be complicated from a developer's perspective and the user's perspective
  3. The application size will be bloated, and the user will have features they might not be interested in.

Create Reusable Components using HOC

With React, you can compose components that you can use somewhere else. You can create reusable components utilizing a concept known as Higher-order components. How do you create a loading gif that works across all your codebase? Higher-Order components are the definite answer. I have put up a list of HoC components that you might find useful.

Here is an example of a reusable loader HOC.

import React, { Component } from 'react';
import './LoadIndicator.css';

/* Method that checks whether the props is an empty prop and it can be an object, string or an array */

const isEmpty = (prop) => (
  prop === null ||
  prop === undefined ||
  (prop.hasOwnProperty('length') && prop.length === 0) ||
  (prop.constructor === Object && Object.keys(prop).length === 0)
);

const withLoader = (loadingProp) => (WrappedComponent) => {
  return class LoadIndicator extends Component {

    render() {
      console.log(this.props);

      return isEmpty(this.props[loadingProp]) ? <div className="loader" /> : <WrappedComponent {...this.props} />;
    }
  }
}

export default withLoader;

// isEmpty(this.props[loadingProp]) ? <div className="loader" /> : <WrappedComponent {...this.props} />

As you can see, you can split out the reusable parts into separate components and use them in your projects. I have created a set of HOC for demonstration purposes, and you can see them over at CodeSanbox. You can also explore your options for creating HOCs by using a library like recompose.

Create Reusable Presentational Components

Some part of the presentational components can be reused across devices and various version of the application. For instance, if you're building a login page, give it a thought whether you could use the same login page for all the three different stakeholders. If the pages are not drastically different, this is easy to do. While creating some of the presentational elements that I felt were reusable:

Sign Up Page & Log In Page

The courier, the restaurant, and the customer would have to sign up and create a new account with a secure login.

Order Management

Here, the restaurant can offer real-time management of orders, so that they can move through the orders as quickly and productively as possible. Couriers can use this space to list the orders that they have to deliver. Customers will use this page to check the status of their orders.

Contact Center

This feature would allow the restaurant to contact the courier and vice versa, so that they can ensure that the food is delivered as effectively as possible, and communicate the relevant information to the consumer, as well.

Payment Processing

The consumer app could have promotions and deals but should have a secure way of payment, accept all credit cards, and could potentially even receive orders through Paypal, cryptocurrency, and other avenues.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Full stack JavaScript developer who loves writing about Angular, React and everything JavaScript.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralThought there was some source code too. Pin
Anele 'Mashy' Mbanga1 hr 23mins ago
professionalAnele 'Mashy' Mbanga1 hr 23mins ago 
QuestionIs it Opensource? Pin
Shameel16-Sep-18 21:28
professionalShameel16-Sep-18 21:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180920.1 | Last Updated 16 Sep 2018
Article Copyright 2018 by Manjunath Matathamana
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid