Developer Tips: Creating a Hybrid Restaurant Application Using React

While working with complex applications with an infinite number of requirements, developers have to face lots of unforeseen challenges. Am I doing this right, because this doesn't look right? We've all been at that stage of app development, haven't we?

Hybrid applications built using React for the web and React Native for mobile are becoming popular. Can I build complex applications using this stack? Is investing time in React worth it? What do you do if you come across an undocumented bug that doesn't have a ready fix? Here, we go over these and similar scenarios as we attempt to build a front-end application for a restaurant.

Prerequisites

For those who like to work through code, I have some sample code for a very basic restaurant application. It was created by my colleague who is a hobbyist application developer and the code has been shared with his permission. We'll use some examples from the code and come back to this later on. You can clone the repo first.

git clone https://github.com/syamjayaraj/WillingstonRestaurantApp_Frontend 

You might need to install Facebook's watchman to run this application.

npm install
npm start

You can scan the QR code on your Expo application for Android/iOS.

Accessible to Most of Mobile and Web Platforms

The key thing about restaurants is that the user base or market is always available — everyone has to eat! Therefore, it is important to ensure that your food delivery app is able to reach as many people as possible. This includes all demographics, across devices — desktop, mobile and tablets, and across platforms — Android and iOS.

Using a hybrid technology like React, you can port your application to all platforms with little effort. React supports the web, iOS, Android, and Windows platforms. Given that smartphones are the go-to device for most targeted customers, you can also consider prioritizing for mobile applications.

The good news is that you can limit everything to JavaScript because the React environment is all JavaScript. However, keep in mind that React Native might not be as mature of an ecosystem as you might expect it to be. Airbnb left React Native earlier this year and you could also face similar obstacles while building your application.

Use of Generic Endpoints and Redux

This goes without saying, however, this is something important that new developers don't give much importance to. A full-stack solution should make common endpoints available for all the available features so as to reduce the duplication of effort. For instance, both the mobile and web application of a food ordering application will need UI elements for searching, ordering, making payments, checking delivery status, the state of logistics, etc. All the core members should operate on the same set of data and each stakeholder should have access to update only the relevant section of the data.

So regardless of whether you're on React or React Native, your API calls should look something like this:

componentDidMount() {
   return fetch('http://192.168.1.9/willingston_app_backend/public/api/people')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         people: responseJson.data
       }, function() {
           // Comment
       });
     })
     .catch((error) => {
       console.error(error);
     });
}

Using a state management library or using the Context API will definitely help in situations like these. The way the data is displayed for the web and mobile applications is almost always quite similar. If you are new to state management, here's a good tutorial that I wrote on getting started with Redux.

Using Redux for state management, you have the ability to create a single store for each of your applications. Redux middleware can be used to filter data for a specific platform and create an abstract but common layer for the web and mobile apps. So, regardless of whether you're making API calls from the web application or mobile application, you can just do something like this:

componentDidMount() {
    dispatch(restaurantActions.fetchData();

 }

Additionally, the Redux store enables you to incorporate all the different UI elements. For example, for the restaurant application, you can create a separate state for webUI, mobileUI, and tabletU. Alternatively, you can also store the UI data in the component state. Below is an example of how your state could possibly be organized:

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

This assists in abstracting the store details for each application into a single layer. Developers find it relatively easy to work through different features for various platforms using React and React Native.

Location-Based Services

React has a mature API for setting up location-based services. You can use the Native map components or use third-party components like React Native Maps that works with both iOS and Android. These dependencies are mature and easy to integrate with your application. To render a marker (or multiple markers), you can just do something like this:

import { Marker } from 'react-native-maps';
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

Create Reusable Components Using HOC

Using React, developers are able to compose components that can be used elsewhere. Developers can create reusable components utilizing a concept called higher-order components. There's even a library called recompose that comprises reusable HOCs for your application. If you are wondering how to create a loading gif that works smoothly across all the codebase you use, higher-order components is the answer.

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;

As illustrated above, the reusable parts are split out into separate components and these can be used in other projects.

Design Considerations for an App

There are no hard rules in design, however, restaurant apps are expected to be intuitive. Bad design choices and grim UI actions can directly impact your customer's experience. The aim should be to make the app flawless, smooth, and responsive in terms of payment systems, menu processing, and order selection.

With React Native, you can easily rely on a library like NativeBase for creating cross-platform components. However, if you need something unique, you might need to look beyond the usual designs for inspiration. We've listed below some of the popular places where you can find interesting design ideas and get inspired.

Uplabs for designers - Uplabs is a platform where developers and designers can share and sell their designs, mockups, and concepts. You can easily find designs licensed under CC BY licenses there. A simple search for restaurant apps reveals some inspiring designs — a few of which are available for free.

UI Movement - UI Movement is a community-based platform where users can discover designs and designers. Designing realistic-UI actions and how components should animate when pressed requires some aesthetic sense. UI Movement has animated designs that should help you improve the interaction. Furthermore, you can check out some of the existing restaurant and restaurant delivery applications to better understand what works and what doesn't. Here are some good examples:    

• EatStreet Food Delivery Application - EatStreet Food app is a great example of how to integrate restaurant listing with group ordering and Yelp reviews.

• GrubHub - This is one popular food ordering application. The app lets you order food from a list of available cuisines or search based on your interests. The UI experience is flawless and best suited from a food ordering perspective.

• Bringg's delivery app for restaurants - Bringg offers a few applications that focus on logistics and food delivery. If you need the inspiration to integrate couriering and delivery aspects of the application, this might be a good place to start.

Create Reusable Presentational Components

A presentational component in React is a functional component that renders a part of your UI. They can be reused across different versions of the application and on various platforms. For example, if you plan to build a login page, think through if it is possible to use the same login page for all the three separate stakeholders. For a restaurant application, the stakeholders include the customer app, the restaurant app, and the delivery app. In case the pages are not drastically different, this should be fairly easy to do. Here are some of the presentational elements that I felt were reusable:

Sign Up Page and Log In Page

The customer, the restaurant, and the delivery agent would all have to sign up and create a new account with a secure login when they use the app for the first time. They would all also need to log in for subsequent uses. If your requirements include multiple apps, you can create a single Signup Component and reuse it for all applications.

Order Management

This is also something that customers, restaurants, and delivery agents will all need.

Restaurants can manage their open orders in real-time and process orders as quickly and efficiently as possible. Delivery agents, on the other hand, can use this space for an open inventory of orders that they have to deliver.

Customers can use this page to check the status of their orders.

Contact Center

The contact center feature would allow the restaurant to get in touch with the delivery agent and vice versa, to ensure that the order is delivered as effectively as possible and within the promised time window. It can also be used to communicate the relevant information to the consumer.

This is another component that's completely reusable for all the three stakeholders.

Summary

That's it for today. In this article, I've shared some useful tips that you might find handy while creating an application using React and React Native. I hope you've found the tips useful.

If you anything to share on creating restaurant applications or React development in general, feel free to share your thoughts in the comments.