Skip to content

A food delivery app built with React Native, Pusher Channels, Chatkit, and Beams

Notifications You must be signed in to change notification settings

anchetaWern/React-Native-Food-Delivery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React-Native-Food-Delivery

A food delivery app built with React Native, Pusher Channels, Chatkit, and Beams.

You can read the tutorial here:

It includes the following features:

  • Food ordering
  • Real-time location tracking
  • One on one chat
  • Push notifications

Each branch contains the code on each part of the tutorial:

  • starter - contains the starting point of the delivery app.
  • food-ordering - the final output for part 1 of the series. This contains the initial code for the food ordering app.
  • driver-app - the final output of part 2 of the series. This contains the code for the driver app as well as the code for implementing Chat.
  • push-notifications - the final output of part 3 of the series. This contains the code for implementing push notifications.
  • master - contains the most updated code.

Prerequisites

Getting started

  1. Clone the repo:
git clone https://github.com/anchetaWern/React-Native-Food-Delivery.git
  1. Create a new React Native app for each project
react-native init RNFoodDelivery
react-native init RNFoodDeliveryDriver
  1. Copy the contents of the ordering-app folder in the repo to the RNFoodDelivery project. Do the same for the driver-app folder and copy its contents over to the RNFoodDeliveryDriver project. Then move the server folder to your working directory.

  2. Install the dependencies for both projects as well as the server:

cd RNFoodDelivery
yarn install
cd RNFoodDeliveryDriver
yarn install
cd server
yarn install
  1. Update the .env file on both projects with your credentials. Do the same for the server/.env file.

  2. Link the following packages manually:

  • react-native-permissions
  • react-native-config
  • react-native-google-places
  1. Update the android/app/src/main/AndroidManifest.xml file with the required permissions and Google API key:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.rnfooddelivery">
  <uses-permission android:name="android.permission.INTERNET" />

  <!-- add these -->
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  ...
</manifest>
<application>
  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR GOOGLE API KEY" />
</application>
  1. Run the server:
cd server
node index.js
  1. Expose the server using ngrok
~/ngrok http 5000
  1. Run the two apps. The first instance runs the bundler on a different port from the default one. Be sure to set the port (from the dev settings) then disconnect the device before running the second app:
cd RNFoodDelivery
react-native start --port=8080
react-native run-android
cd RNFoodDeliveryDriver
react-native start
react-native run-android

Built with

Donation

If this project helped you reduce time to develop, please consider buying me a cup of coffee :)

Buy Me A Coffee

About

A food delivery app built with React Native, Pusher Channels, Chatkit, and Beams

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published