How To Develop Food Delivery Application With Reactjs

Today, everybody is familiar with food delivery apps like FoodPanda and Deliveroo. They conveniently allow you to order food from the local restaurants and get it delivered right to your doorstep with your mobile phone. Today, we will understand how you can create a food delivery application with ReactJS. But before you start hire Reactjs developer, there are some essentials you need to have by your side to develop a food delivery app with React successfully. Let’s get started.

Things You Will Need To Develop Food Delivery Application With ReactJS

First of all, you will be required to have a basic knowledge of React Native and Node.js. Following are the packages that we will be using. 

React Native 0.61.1
React Native CLI 2.0.1
Node 11.10.1
Yarn 1.17.3

Moreover, you will also need an ngrok and Pusher channels account, as the channels will be used to establish a connection between the driver and the customer, and ngrok will expose the server to the internet.

Creating New Channels

Now is the time to set up new channels app instances if you have not. After that, you should go to the app settings and check the ‘enable client events’ options. This will allow us to trigger events right from the application.

Google Map Platform

To use React Native Maps, we need to set up the Google Maps platform. If you have not used the Google Cloud Console before, you can use Google Map Platform’s Quickstart guide for new users.

It is the fastest way to get going as it will configure everything for you automatically. You can choose which Map products you want to use, and it will be enabled for Android, iOS, and Web API. In this case, we will be selecting Maps and Places under the product selection.

Then, we need to select the project. If this is your first time using Google API, there will be a pre-created project ready. You can select that project or create a new one.

The last step is to set up the billing. For that, you may have to create a billing account if you don’t already have one.

Bootstrapping

Now, it’s time to bootstrap the app. Prepare a starter branch with the code for setting up the navigation and the code for the styles and components. Clone the switch and the repo to the starter branch.

Install the dependencies with ‘yarn install’. Here are the packages that we will use and why we will be using them.

git clone https://github.com/kumarRam/React-Native-Food-Delivery.git FoodDelivery
    cd FoodDelivery
    git checkout starter

• react-navigation: This will help in implementing navigation in our food delivery application. It will depend on react-native-gesture-handler, react-navigation-stack, react-native-reanimated, and react-native-gesture-handler.
• react-native-simple-stepper: It will render a stepper component for choosing the quantity for a specific order item.
• react-native-permissions: This will be used to request permission to access the data for geolocation.
• React-native-maps-directions: Draws path between two coordinates.
• react-native-maps: Renders maps and markers
• react-native-google-places: This will render Google Maps Places’s place picker modal.
• react-native-geolocation-service: To get the geolocation data
• react-native-geocoding: It converts coordinates into an actual place name. 
• react-native-config: It helps in reading config in .env files.
• pusher-js: It will be used as a real time communication channel between the driver and the customer.
• axios: It will be used to make requests for the food lists to the server.

Now, we need to update the .env file at the roof of the project directory with channels and Google Maps API credentials.

CHANNELS_APP_KEY="YOUR CHANNELS APP KEY"
CHANNELS_APP_CLUSTER="YOUR CHANNELS APP CLUSTER"
GOOGLE_API_KEY="YOUR GOOGLE API KEY"
NGROK_HTTPS_URL="YOUR NGROK HTTPS URL"

After that, we need to update android/settings.gradle to include the native files we will be using for the packages. Most of the packages do not have native code, and others support auto-linking, so it would not require including all the native files.

rootProject.name = 'FoodDelivery'

    include ':react-native-permissions'
    project(':react-native-permissions').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-permissions/android')

    include ':react-native-config'
    project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
    include ':react-native-google-places'
    project(':react-native-google-places').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-places/android')

Now, it’s time to update the android/app/build.gradle file.

apply plugin: "com.android.application"

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Read More Here: https://www.infiraise.com/how-to-develop-food-delivery-application-with-reactjs/