Skip to content

A React Native app developed using TailwindCSS for design and Google Maps API to simulate how an Uber App works. Cool desing, mad functionality and much more :)

Notifications You must be signed in to change notification settings

lawrence615/uber-clone-challenge

Repository files navigation

Uber Clone Challenge

This is a React Native app built using TailwindCSS and a number of Google Maps API to simulate how an Uber app works.

The design has been done using TailwindCSS, which is very friendly, and Google Maps API for the mappiing, estimation of distances e.t.c:

  • Directions API - directions from A - B
  • Distance Matrix API - mileage calculations
  • Places API
  • Maps SDK for Android - had to be enabled to work on Android

This is thanks to the good work of Sonny Sangha and the entire video tutorial can be found here

TODOS

  • Setting up with React Native Cli
  • Run on Android device
  • Run on iOS

Run the app

1. Get the app

$ git clone https://github.com/lawrence615/uber-clone-challenge.git

$ cd uber-clone-challenge // change directory

2. Install packages

$ yarn install

3. Save .env.teamplate as .env

Create a Google app here, then generate a key from the navigation on the left side i.e.

Add the key generated to GOOGLE_MAPS_API_KEY of the .env file

4. Build

You will need at least two tabs open;

Tab 1: Start metro server on one tab

$ react-native start --port=8082

OR

$ yarn start --port=8082 --reset-cache

NB: Make sure you have a device connected e.g. Android phone

To check:

$ adb devices

List of devices attached
14ed2fcc device         # Physical device

Tab 2: Run app on Android phone

$ npx react-native run-android --port=8082

Screenshots

About

A React Native app developed using TailwindCSS for design and Google Maps API to simulate how an Uber App works. Cool desing, mad functionality and much more :)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published