teejay-codes / ridesharer

A carpooling app built with React Native, Pusher Channels, PHP, and Elasticsearch

Ridesharer

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

Prerequisites

• Docker
• React Native development environment for Android or iOS (depending on where you want to deploy).
• Git

Getting Started

Clone the repo and navigate inside it:

git clone https://github.com/anchetaWern/Ridesharer
cd Ridesharer

Setting up the server

1. Clone laradock and navigate inside:

git clone https://github.com/Laradock/laradock.git
cd laradock

2. Copy sample environment file:

cp env-example .env

3. Open .env and set APPLICATION path:

APPLICATION=../laradock-projects

4. Create laradock-projects directory outside the laradock folder:

mkdir laradock-projects

5. Copy the contents of laradock/apache2/sites/default.apache.conf file from the Ridesharer/server directory and put it on your laradock/apache2/sites/default.apache.conf file.

6. Open the docker-compose.yml file on your laradock folder (not the one from Ridesharer) and add the following under the environment config or elasticsearch (check the tutorial for more detailed instructions):

xpack.security.enabled=false

7. Navigate inside the laradock-projects and create a ridesharer directory:

cd laradock-projects
mkdir ridesharer

8. Copy the files from Ridesharer/server/files (from this repo) and paste it on the ridesharer directory which you just created.

9. Update the .env file with your Pusher and Google config.

10. Bring up the container:

docker-compose up -d apache2 php-fpm elasticsearch workspace

11. Create an account at ngrok and download it.

12. Navigate inside the directory where you downloaded ngrok and unzip it.

13. Add your ngrok token (you can find this on the ngrok dashboard):

.\ngrok authtoken YOUR_AUTH_TOKEN

14. Expose the server to the internet:

ngrok http -host-header=ridesharer.loc 80

Setting up the app

1. Navigate inside the app directory:

cd app

2. Copy android and ios 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

3. Install all dependencies:

npm install

4. 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):

5. If you want to deploy to iOS, navigate inside the ios folder and execute pod install to install all the native dependencies.

6. Update the config for Google, ngrok Base URL, and Pusher on app/screens/Map.js and app/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';

7. Run the app:

react-native run-android
react-native run-ios # or open the .xcworkspace file with Xcode

Built With

• 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.

Acknowledgments

• @npomfret's formula on getting latitude and longitude delta values
• @chuck's formula on getting latitude and longitude difference in kilometers

Donation

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