How to Build Uber Clone with React (Ep. 1) [FREE & DETAIL COURSE]

Course Content

Table of Contents

1. About Code Courses

Code Courses is a website where people learn about coding and different technologies/frameworks/libraries. To help people learn, all of the courses are FREE and DETAIL. Hopefully, after following the content on Code Courses, you will find your dream jobs, and build any applications that you want.

2. Live Demo

After we finish this course, the final output will be like this:

If you want to find the full source code, you can refer to this Github link.

3. Takeaway Skills

We can build the Uber clone app and understand how to apply React. On the other hand, we can include this project in our profiles. Moreover, It would help us a lot in finding a software engineer job. Aside from that, we can build other related applications with the skills we will get from this course.

4. Course Overview

4.1. Users

• Firstly, the users can sign up (email & password).
• Secondly, the users can log in and have a short profile (Name, UID, Photo, About).

4.2. Ride Booking

• A map-based form for users to enter pick-up and destination details
• Auto filling dropdown with locations.
• The driver can the list of requests, and they can accept any available requests.
• A way for end-users to find & connect with a driver.

4.3. Chat

• The end-user should be able to chat with the driver
• Text and voice calling
• Ability to share location and live location
• An inbox with a record of all past conversations

5. Prerequisites

5.1. Softwares

• Install NodeJS.
• An IDE or a text editor (VSCode, Intellij, Webstorm, etc).

5.2 Technical Skills

• Basic programming skills.
• Basic HTML, CSS, JS, React skills.

6. Creating the React Project

In fact, we have several ways to create a new React project such as importing the React library from CDN links or using existing boilerplates/templates out there. In this case, we will create our React project by using the Create React App

Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

6.1. Create React Chat App

In this situation, to create our React chat app project, we need to follow the below steps:

• Step 1: We'll need to have Node >= 14.0.0 and npm >= 5.6 on our machine. In case, If we have not installed Node.js, please click on the above link and follow its documentation.

• Step 2: In order to make sure that we have installed Node.js on our computer. Please open your terminal/cmd/power shell and run the following statement.
  

node -v

The result should be like this v16.10.0.

16.10.0 is the Node.js version on my computer. Nevertheless, it may be different on your computer, depending on which version you have installed.

• Step 3: After we have installed Node.js on our computer. On our terminal, we need to use the below statements.

npm install -g create-react-app

create-react-app your-app-name

In addition, we need to replace your-app-name with the real name of our application. In this case, we want to build an Uber clone app. For this reason, we will replace your-app-name with uber-clone. In conclusion, now our final statement should look like this:

create-react-app uber-clone

• Step 4: Otherwise, we need to wait until the process is finished. After that, our result should look like this:

• Step 5: Now we can try to run our application. On the same terminal, please cd to your project folder.

cd uber-clone

• Step 6: Following that, please run the below statement to start our React project.

npm run start

Our result should look like this

7. Structuring the Project

In general, we will talk about how we structure our project. In some other tutorials, we may see that those tutorials will tell you to store every component in the src folder or develop everything in one file without caring about some best practices and principles. For example, we don't want to violate the DRY principle, DRY stands for don't repeat yourself. For the most part, It means that we should avoid duplication in the business logic. Hence, to avoid that, we create some common files and folders. Therefore, we can reuse them in different places. With this purpose in mind, doing that helps us increase the readability, maintainability, and scalability of our code.

7.1. Project Structure

In this section, we talk about how to structure our project.

• Step 1: Firstly, please create a folder which is called components inside the src folder.

The components folder will contain all of the components in our application. For example, the login component, the register component, the home component, and so on.

• Step 2: Aside from that, please create a folder which is called services inside the src folder.

While we are building this application, we need to interact with the Firebase services, and the CometChat services. Or we need to interact with the UI such as showing or hiding the loading indicator. As mentioned above, we do not want to violate the DRY principle. For this reason, we need to create the services folder, this folder contains all common services that will be reused in different places. We will talk about those services in more detail in the next chapter.

• Step 3: Moreover, we need to remove some unused files in this course. They are App.css, App.test.js, logo.svg, reportWebVitals.js, and setupTests.js.

• Step 4: In this situation, we are importing the logo.svg file in the App.js. For this reason, we need to remove it from the App.js file. The content of the App.js file will be like this:

import React from "react";const App = () => {  return <React.Fragment>Hello, Uber Clone</React.Fragment>;};export default App;

In the App.js file, we removed all of the dependencies and the current JSX elements. After that, we returned a React fragment. Inside that fragment, we showed Hello, Uber Clone.

• Step 5: In fact, We are importing reportWebVitals in the index.js file. However, we removed reportWebVitals in step 3. Therefore, we need to remove it from the index.js file. The content of the index.js file will be like this:

import React from "react";import ReactDOM from "react-dom/client";import "./index.css";import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<App />);

Now we can get back to our browser and the UI should be like this.

The full source code of the index.js file will be like this:

import React from "react";import ReactDOM from "react-dom/client";import "./index.css";import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<App />);

The full source code of the App.js file will be like this:

import React from "react";const App = () => {  return <React.Fragment>Hello, Uber Clone</React.Fragment>;};export default App;

8. Setting Up the Firebase

8.1. What is Firebase?

Firebase helps us build and run successful apps. Backed by Google, loved by developers. Easily integrate Firebase into our team's favorite tools. Trusted by the largest apps.

In other words, to build real-life products, we will need to design the database, set up the servers, write the Restful APIs, and then integrate them with the front-end part.

However, by using Firebase, we just need to take care of the front-end part. In other words, Firebase will handle everything that we need from the server-side without developing from scratch. That sounds great. Let's move on to the following sections. We will understand how to create a new Firebase project and set up Firebase services for the Uber clone application.

8.2. Creating a new Firebase Project

Please follow the below steps to set up Firebase.

• Step 1: Firstly, we access the browser, go to https://firebase.google.com and click on the "Sign in" button.

• Step 2: After that, we sign in to Firebase by using a Gmail account, input the user's name and password, and then click on the "Next" button.

• Step 3: Following that, we click on the "Go to console" button.

• Step 4: Click on the "Add project" section to create a new Firebase project.

Note: If we did not have any Firebase projects in the past. We need to follow the below image to create a new Firebase project.

• Step 5: After that, we input the project name, tick the checkbox to accept the Firebase terms, and then click on the "Continue" button.

Note: We can feel free to input our project name. In this case, my project name will be "uber-clone".

• Step 6: Click on the "Continue" button.

• Step 7: Furthermore, we tick on two checkboxes and click on the "Create project" button.

Note: You may not see the above image, You may see the below image. If you see the below image, please select your account and then click on the "Create project" button.

• Step 8: In this case, Firebase would handle the remaining tasks for us and we wait until everything has been set up successfully.

• Step 9: Click on the "Continue" button.

8.3. Setting Up Firebase Realtime Database

As mentioned above, Firebase will handle everything that we need from the back-end services. In this project, we need to store the data such as the user's information. For this reason, we need to use the "Firebase Realtime Database" service.

To set up "Firebase Realtime Database Service", we need to follow the below steps:

• Step 1: Expand the "Build" option if it is not expanding and click on the "Realtime Database" option.

• Step 2: Click on the "Create Database" option

• Step 3: Choose the "Realtime Database location" option and click on the "Next" button

• Step 4: To suit the learning purposes, we need to select the "Start in test mode" option and click on the "Enable" button.

Note: After finishing all of the above steps, we will see the below screen.

In this course, we need to get the user's information by their email. For this reason, we need to update the rules of our Firebase Realtime Database as follows. Please refer to the below image for more information.

Congratulation! We have set up the "Firebase Realtime Database" service successfully. In the following section, we will set up the "Firebase Authentication" service together.

8.4. Setting Up Firebase Authentication Service

After setting up the Firebase Realtime Database, according to the requirements, the application needs to provide a way to let the end-users create new accounts. Following that, the end-users can log in to the application with email & password authentication.

Fortunately, Firebase will support us. In this case, We just need to enable "Firebase Authentication Service". This section describes how to set up that service step by step.

• Step 1: Expand the "Build" option if it is not opening and then click on the "Authentication" option.

• Step 2: After that, we click on the "Get Started" button

• Step 3: Following that, we select the "Email/Password" option

• Step 4: Enable Password and Email authentication and click on the "Save" button.

Note: After finishing all of the above steps, we will see the below screen.

Congratulation! We have set up a "Firebase Authentication" service. The next section specifies how to set up Firebase Storage for our project.

8.5 Setting Up Firebase Storage

Due to the requirements, the application needs to provide a way to let the end-users create new accounts. While creating new accounts, the end-users can upload their avatars. Therefore, we need to enable the "Firebase Storage" service. Firebase Storage helps us store files. And in this case, we want to store the user's avatars. To enable the "Firebase Storage" service, please follow the below steps:

• Step 1: Expand the "Build" option if it is not opening, and click on the "Storage" option.

• Step 2: Click on the "Get started" button

• Step 3: Please select Start in test mode and then click on the Next button.

• Step 4: Click on the "Done" button

• Step 5: For learning purposes, we need to update the rules. Please follow the image below, update our storage rules and then click on the "Publish" button to apply changes.

8.6. Creating a New Web App in Firebase.

Before moving on with this section, we need to understand why this part is crucial. We set up "Firebase Realtime Database", "Firebase Authentication", and "Firebase Storage". However, to interact with those services from the React application, we need to have Firebase credentials. Therefore, It helps Firebase know whether our application can call Firebase services.

In order to get Firebase credentials, we need to create a new web app in Firebase. That's why this part takes an important role in this project.

Please follow the below steps to create a new web app in Firebase.

• Step 1: Firstly, we click on the "Settings" icon and choose the "Project Settings" option.

• Step 2: After that, we scroll down to the bottom of the page and click on the "web" icon.

• Step 3: On the other hand, we input our App nickname and click on the "Register app" button.

Note: In fact, we do not need to tick the above checkbox. Because we will not deploy the app on Firebase, we will deploy the app on Vercel. We choose Vercel for some of the reasons. Firstly, if we make some changes in our code, our application will be redeployed automatically. For that reason, we save a lot of time and effort. We will talk about it in this course.

• Step 4: Last but not least, the below image describes the Firebase credentials. We will install the Firebase dependency in another section. Following that, the Firebase credentials will be used as environment variables in the application. We will come back to them later. We need to click on the "Continue to console" button to finish creating the new web app.

9. Conclusion

Congratulation! We have finished the first part of the How to Build Uber Clone with React course. In conclusion, we have known about the purposes of this course, and created and structured the project. Following that, we have set up Firebase. Due to our course, in the next part, we will set up CometChat. In fact, the CometChat services will help us achieve that text, voice, and video chat application with minimal effort. Last but not least, we will set up CSS, the .env file, and install the App dependencies. Please click on this link to go to the next part of this series. Thank you so much.