What you’ll be building, Git Repo Here.
App and web development have come a long way over the last few years. We use a lot of rideshare sites every day, including Uber, Lyft, Grab, Gojek, and Be. One of the most widely used features is live chat. Using the CometChat communications SDK, Firebase backend services and Mapbox as OSRM service, you will learn how to build one of the best rideshare sites on the internet with minimal effort.
Follow along the steps to build an Uber clone that will allow users to request a ride. On the other hand, an user and a driver can talk to each other via text and voice calling. This tutorial will use React.js, Firebase, Mapbox and CometChat to build an Uber clone.
To follow this tutorial, you must have a degree of understanding of the general use of React.js. This will help you to improve your understanding of this tutorial.
Step 1: you need to have Node.js installed on your machine
Step 2: create a new project with the name uber-clone by running the following statement.
npx create-react-app uber-clone
- Step 3: you need to install some dependencies such as CometChat, Firebase, Validator, Uuid, Leaflet, Leaflet-GeoSearch, Leaflet-Routing-Machine
npm install @cometchat-pro/chat firebase uuid validator leaflet leaflet-geosearch leaflet-routing-machine --save # or yarn add @cometchat-pro/chat firebase uuid validator leaflet leaflet-geosearch leaflet-routing-machine
- Head to CometChat Pro and create an account.
- From the dashboard, add a new app called "uber-clone".
- Select this newly added app from the list.
- From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, which will be used later.
- Also, copy the REST_API_KEY from the API & Auth Keys tab.
- Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
- Create a file called .env in the root folder of your project.
- Import and inject your secret keys in the .env file containing your CometChat and Firebase in this manner.
REACT_APP_FIREBASE_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_FIREBASE_AUTH_DOMAIN=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_FIREBASE_DATABASE_URL=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_FIREBASE_STORAGE_BUCKET=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_FIREBASE_PROJECT_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_COMETCHAT_APP_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_COMETCHAT_REGION=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_COMETCHAT_AUTH_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_COMETCHAT_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx REACT_APP_MAP_BOX_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
- Make sure to include .env in your gitIgnore file from being exposed online. ## Setting Up Mapbox
In this project, we need to use the leaflet-routing-machine library to draw a route between two locations. However, the default OSRM server sometimes appears down. For this reason, we need another alternative solution. In this project, we will use Mapbox as an OSRM service. To setup Mapbox, you need to follow the below steps:
Head to Mapbox and create an account. After signing to Mapbox, you will be redirected to the page in which you will see the default public token.
Figure 1. Mapbox - Default Public Token.
Update the .env file with Mapbox default public token.
Head to Firebase to create a new project and activate the email and password authentication service. This is how you do it:
To begin using Firebase, you’ll need a Gmail account. Head over to Firebase and create a new project.
Firebase provides support for authentication using different providers. For example, Social Auth, phone numbers, as well as the standard email and password method. Since we’ll be using the email and password authentication method in this tutorial, we need to enable this method for the project we created in Firebase, as it is by default disabled.
Under the authentication tab for your project, click the sign-in method and you should see a list of providers currently supported by Firebase.
Next, click the edit icon on the email/password provider and enable it.
Now, you need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick web as the platform.
Once you’re done registering the application, you’ll be presented with a screen containing your application credentials. Take note of the second script tag as we’ll be using it shortly in our application.
Congratulations, now that you're done with the installations, let's do some configurations.
Inside your project structure, open the index.css files and paste the codes here. index.css file will contain all CSS of the application.
The below codes initialize CometChat in your app before it spins up. The App.js file uses your CometChat API Credentials. We will get CometChat API Credentials from the .env file. Please do not share your secret keys on GitHub.
Actually, App.js does not contain only the above code. It also contains other business logic of the application. The full source code of App.js file can be found here.
You need to create a “firebase.js” file inside the “src” folder and you need to enable Firebase realtime database. This file is responsible for interfacing with Firebase authentication and database services. Also, it makes ready our google authentication service provider enabling us to sign in with google. Secret keys will be stored in the .env file. As mentioned above, please do not share your secret keys on GitHub.
The below images demonstrate the data structure of the application. A user should have an avatar, an email, an id, a phone number, and a role (user role or driver role).
Figure 6 Data Structure - User.
A ride should contain information of destination, pickup location, driver, requestor, and id of the ride. The status field demonstrates the status of the ride. If the status is 0, it means that a user is waiting for a driver. Following that, if the status is 1, it means that the ride has accepted by a driver. Aside that, if the status is -1, the ride has been canceled. The last but not least, if the status is 1, the ride has been finished.
The image below reveals the project structure. Make sure you see the folder arrangement before proceeding.
Now, let's make the rest of the project components as seen in the image above.
The App.js file is responsible for rendering different components by the given routes. For example, it will render the login page if the user has not logged in, yet or it renders the home page if the user has signed in to the system. On other hand, it will be used to initialize CometChat.
The full source code of the App.js file can be found here.
The loading component will be shown when the system performs some side effects such as interacting with Firebase or calling CometChat APIs and so on. This component will be used to increase user experience. If we do not have this component, the end-users cannot know when the data is loaded successfully.
The full source code of the loading component can be found here.
This component is responsible for authenticating our users using the Firebase google authentication service. It accepts the user credentials and either signs him up or in, depending on if he is new to our application. See the code below and observe how our app interacts with Firebase and the CometChat SDK. The full source code can be found here.
The above code indicates that we are using withModal as a higher-order component. This higher-order component will be used to reuse the code of showing and hiding the custom modal. In this case, we want to show the sign-up modal to let end-users register new accounts. We will discuss the sign-up component in the following section.
The sign-up component will help end-users to register new accounts. This component will do two things. The first thing is to register new accounts on Firebase by using the Firebase authentication service. Aside from that, it also registers new accounts on CometChat by using the CometChat SDK. The full source code can be found here.
This is where all the magic happens. This component embodies other sub-components like the Header, Address Picker, Ride Detail, Ride List, etc.
As intuitive as they sound, the above sub-components can be best observed in the image below.
The header component will be used to demonstrate the header of the page. It contains the logo the greeting and the logout button. The full source code of the header component can be found here.
This component will allow the user to input the pickup location and the destination. The application will suggest locations to the user while the user is typing on the search box, The full source code can be found here.
After inputting the pickup location and the destination, this component will be used to ask the user whether the user wants to request a ride, or not. If the user clicks on the “Change” button, the dialog will be closed. On the other hand, if the user clicks on the “Requesting a ride now” button, the application will find a driver for the user. The full source code can be found here.
This component will be used to show a list of requesting rides, this component is just available for drivers. It means that if the current user is a driver, the user will see this component instead of the address picker component. The full source code can be found here.
This component is used to help the driver and the user view information of each other. On the other hand, it provides some options such as canceling the ride, finishing the drive, talking to each other.
Before we can use the CometChat Pro React UI kit, we need to add it in our project so that we can reference it. In this case, we are using React UI Kit v3.0. To do that, follow the next steps:
- Step 1: Clone the CometChat React UI Kit Repository like so: **
git clone https://github.com/cometchat-pro/cometchat-pro-react-ui-kit.git -b v3
- Step 2: Copy the folder of the CometChat Pro React UI Kit you just cloned into the src folder of your project:
Figure 22. Copy the cloned folder in to the src folder.
Step 3: Copy all the dependencies from the package.json file of the CometChat Pro React UI Kit folder and paste them in the dependencies section of the package.json file of your project.
Step 4: Save the file and install the dependencies like so: npm install
As soon as the installation is completed, you now have access to all the React UI Components. The React UI kit contains different chat UI components for different purposes as you can see in the documentation here. It includes:
In our Uber clone, we want to connect the user and the driver. It means that the user should be able to chat with the driver. Following that, the application should support text and voice calling. For this reason, we will create the Chat component and inside the Chat component, we use the CometChatMessages component from React UI Kit. The full source code can be found here.
In conclusion, we have done an amazing job in developing an Uber clone by leveraging React.js, Firebase, Mapbox, CometChat SDK and React UI Kit. You’ve been introduced to the chemistry behind Uber and how the CometChat SDK makes rideshare applications buildable.
You have seen how to build most of the chat functionalities such as real-time messaging using CometChat. I hope you enjoyed this tutorial and that you were able to successfully add mentions into your React chat app. Jump in to the comments and let me know your experience.