A carpooling app built with React Native, Pusher Channels, PHP, and Elasticsearch.
Full tutorial is available on the Pusher tutorial hub:
- Create a carpooling app with React Native - Part 1: Setting up the server
- Create a carpooling app with React Native - Part 2: Creating the frontend
- Docker
- React Native development environment for Android or iOS (depending on where you want to deploy).
- Git
Clone the repo and navigate inside it:
git clone https://github.com/anchetaWern/Ridesharer
cd Ridesharer
- Clone laradock and navigate inside:
git clone https://github.com/Laradock/laradock.git
cd laradock
- Copy sample environment file:
cp env-example .env
- Open
.env
and setAPPLICATION
path:
APPLICATION=../laradock-projects
- Create
laradock-projects
directory outside thelaradock
folder:
mkdir laradock-projects
-
Copy the contents of
laradock/apache2/sites/default.apache.conf
file from theRidesharer/server
directory and put it on yourlaradock/apache2/sites/default.apache.conf
file. -
Open the
docker-compose.yml
file on yourlaradock
folder (not the one fromRidesharer
) and add the following under theenvironment
config or elasticsearch (check the tutorial for more detailed instructions):
xpack.security.enabled=false
- Navigate inside the
laradock-projects
and create aridesharer
directory:
cd laradock-projects
mkdir ridesharer
-
Copy the files from
Ridesharer/server/files
(from this repo) and paste it on theridesharer
directory which you just created. -
Update the
.env
file with your Pusher and Google config. -
Bring up the container:
docker-compose up -d apache2 php-fpm elasticsearch workspace
-
Create an account at ngrok and download it.
-
Navigate inside the directory where you downloaded ngrok and unzip it.
-
Add your ngrok token (you can find this on the ngrok dashboard):
.\ngrok authtoken YOUR_AUTH_TOKEN
- Expose the server to the internet:
ngrok http -host-header=ridesharer.loc 80
- Navigate inside the
app
directory:
cd app
- Copy
android
andios
folders somewhere else. These will only be used as a basis on what the following files should look like after all the React Native modules has been installed and set up:
# android-only
android/settings.gradle
android/app/build.gradle
android/app/src/main/AndroidManifest.xml
android/app/src/main/java/com/ridesharer/MainApplication.java
# ios-only
ios/Podfile
ios/Ridesharer/AppDelegate.m
ios/Ridesharer/Info.plist
- Install all dependencies:
npm install
-
Set up the dependencies that needs additional setup. Open the
README
for the specific version you're using and read install instructions (instructions on how to do this is available on the tutorial): -
If you want to deploy to iOS, navigate inside the
ios
folder and executepod install
to install all the native dependencies. -
Update the config for Google, ngrok Base URL, and Pusher on
app/screens/Map.js
andapp/screens/Home.js
:
const google_api_key = 'YOUR GOOGLE PROJECT API KEY';
const base_url = 'YOUR NGROK URL';
const pusher_app_key = 'YOUR PUSHER APP KEY';
const pusher_app_cluster = 'YOUR PUSHER CLUSTER';
- Run the app:
react-native run-android
react-native run-ios # or open the .xcworkspace file with Xcode
- React Native - for creating cross-platform apps with JavaScript and React.
- Pusher Channels - for sending realtime data between users.
- Laradock - for easily setting up a server.
- PHP - for running the server-side code.
- Ngrok - for exposing the server to the internet.
- Google Directions API - for getting the best route between to points.
- Geometry Library Google Maps API V3 - for determining if a coordinate lies within a set of coordinates.
- Elasticsearch - for indexing and searching for routes
- Genymotion - for running the app on en emulated android device.
- axios - for making requests to the server. Although React Native already comes with fetch, axios gives us a simpler API to work with.
- pusher-js - the official Pusher JavaScript library. This allows us connect to a Pusher app and send real-time data.
- react-native-geocoding - for converting latitude and longitude pairs to the actual name of the place.
- react-native-google-places-autocomplete - for searching the user’s destination.
- react-native-maps - for showing a map inside the app. This is also used for showing markers on where the users are and their destinations.
- react-native-maps-directions - for showing the route from the user’s origin to their destination.
- react-native-vector-icons - for using icons inside the app.
- react-navigation - for easily implementing navigation between screens.
- @npomfret's formula on getting latitude and longitude delta values
- @chuck's formula on getting latitude and longitude difference in kilometers
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)