CourseFlix

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

22h 41m 56s
English
Paid

This course shows you how to build an Uber‑style app. You build the backend and frontend, then deploy it. You will work with TypeScript, Node.js, GraphQL, React, and Apollo in one clear flow.

What You Need Before You Start

You should be able to read and write JavaScript with ease. You also need solid TypeScript and React skills. The course moves fast, so make sure you know the tools below.

  • Good understanding of JavaScript
  • Intermediate TypeScript
  • Intermediate React
  • Working knowledge of GraphQL and Apollo

What You Will Build

You will build a full Uber clone. You set up the backend, connect the frontend, and ship a working service. You also learn how each part talks to the rest.

The app lets users load map data, request rides, track drivers, and chat in real time.

Backend Tools

You build the server with clear, simple parts. You work with GraphQL Yoga, Express, and TypeORM. You also add login, email, SMS, and file uploads.

  • GraphQL Yoga
  • Express
  • TypeORM
  • Bcrypt
  • Mailgun
  • JWT
  • Twilio
  • PostgreSQL
  • Cloudinary
  • Heroku

Frontend Tools

You build the client with React and TypeScript. You style it with Styled Components and add motion with Popmotion. You also use the Google Maps JavaScript SDK.

  • React
  • TypeScript
  • Styled Components
  • Popmotion
  • Google Maps JavaScript SDK

Code Links

You can check the full project code here:

Server Code

Client Code

About the Author: Nomad Coders

Nomad Coders thumbnail
Nomad Coders is a space for creativity and programming education where you not only acquire essential skills but also bring a functional project to life. Our approach involves learning by working on real tasks. Join us to learn programming practically and efficiently!

Watch Online 182 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 182 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: #0.1 Requirements
All Course Lessons (182)
#Lesson TitleDurationAccess
1
#0.1 Requirements Demo
01:52
2
#0.2 What are we building
07:26
3
#0.3 What are we using
02:14
4
#1.1 Project Setup- Git & Installation
06:52
5
#1.2 Project Setup. Typescript and NodeJS
02:37
6
#1.3 A word on @types
04:48
7
#1.4 GraphQL Yoga and Express part One
08:28
8
#1.5 GraphQL Yoga and Express part Two
05:56
9
#1.6 API and Schema Structue part One
06:30
10
#1.7 API and Schema Structue part Two
07:14
11
#1.8 Graphql To Typescript
10:16
12
#1.9 Typechecking Graphql Arguments
04:27
13
#1.10 Configuring TypeORM
09:31
14
#1.11 Creating a Virtual Environment on NodeJS
05:26
15
#1.12 User Entity GraphQL Type
07:31
16
#1.13 User Entity part One
09:45
17
#1.14 User Entity part Two
07:13
18
#1.15 Hashing and Encrypting User Passwords
07:57
19
#1.16 Verifying User Password
03:52
20
#1.17 Verification Entity part One
07:17
21
#1.18 Using Types on the Entities
04:19
22
#1.19 Creating the Verification Key
07:03
23
#1.20 Place Entity
04:51
24
#1.21 Ride Entity
06:46
25
#1.22 Chat and Message Entities part One
08:27
26
#1.23 Chat and Message Entities part Two
05:26
27
#1.24 Model Relationships like a Boss
06:40
28
#1.25 Resolver Types
03:23
29
#1.26 Planning the Resolvers part One
07:40
30
#1.27 Planning the Resolvers part Two
06:10
31
#1.28 FacebookConnect Resolver part One
04:14
32
#1.29 FacebookConnect Resolver part Two
08:24
33
#1.30 FacebookConnect Resolver part Three
05:44
34
#1.31 Testing the FacebookConnect Resolver
05:47
35
#1.32 EmailSignIn Resolver part One
06:04
36
#1.33 EmailSignIn Resolver part Two
02:53
37
#1.34 Introduction to Twilio
03:10
38
#1.35 StartPhoneVerification Resolver part One
08:49
39
#1.36 StartPhoneVerification Resolver part Two
07:20
40
#1.37 StartPhoneVerification Resolver part Three: Sending SMS
05:21
41
#1.38 CompletePhoneVerification part One
03:44
42
#1.39 CompletePhoneVerification part Two
07:49
43
#1.40 EmailSignUp Resolver
08:06
44
#1.41 Creating Custom JWT
05:19
45
#1.42 Authenticating Users with Custom JWT
04:29
46
#1.43 Testing Authentication Resolvers
05:13
47
#1.44 Custom Auth Middleware on Express part One
03:38
48
#1.45 Custom Auth Middleware on Express part Two
09:03
49
#1.46 Using Resolver Context for Authentication
07:30
50
#1.47 GetMyProfile Resolver
06:03
51
#1.48 Protecting Resolvers with Middlewares
12:37
52
#1.49 Sending Confirmation Email part One
05:02
53
#1.50 Sending Confirmation Email part Two
07:50
54
#1.51 Sending Confirmation Email part Three
03:50
55
#1.52 Testing Email Sending
03:20
56
#1.53 RequestEmailVerification Resolver
06:56
57
#1.54 CompleteEmailVerification Resolver
06:03
58
#1.55 Testing Email Verification Resolvers
02:26
59
#1.56 UpdateMyProfile Resolver part One
05:33
60
#1.57 UpdateMyProfile Resolver part Two
06:47
61
#1.57.1 UpdateMyProfile Resolver Bug Fixing
03:36
62
#1.58 ToggleDrivingMode Resolver
05:13
63
#1.59 ReportMovement Resolver
06:23
64
#1.60 AddPlace Resolver
06:24
65
#1.61 EditPlace Resolver
09:01
66
#1.62 DeletePlace Resolver
05:02
67
#1.63 GetMyPlaces Resolver and Testing
07:18
68
#1.64 GetNearbyDrivers Resolver part One
07:32
69
#1.65 GetNearbyDrivers Resolver part Two
04:38
70
#1.66 DriversSubscription part One
09:45
71
#1.67 DriversSubscription part Two
06:05
72
#1.68 Authenticating WebSocket Subscriptions part One
08:38
73
#1.69 Authenticating WebSocket Subscriptions part Two
05:23
74
#1.70 Filtering Subscription Messages
10:53
75
#1.71 Filtering Subscription Messages part Two
10:22
76
#1.72 RequestRide Resolver
06:26
77
#1.73 GetNearbyRides Resolver
07:02
78
#1.74 NearbyRideSubscription
08:28
79
#1.75 Testing the NearbyRideSubscription
03:42
80
#1.76 UpdateRideStatus Resolver part One
08:08
81
#1.77 UpdateRideStatus Resolver part Two
07:11
82
#1.78 GetRide Resolver
11:18
83
#1.79 RideStatusSubscription
06:12
84
#1.80 Testing the RideStatusSubscription
04:06
85
#1.81 Creating a ChatRoom
05:07
86
#1.82 GetChat Resolver
09:55
87
#1.83 BugFixing
09:52
88
#1.84 Testing GetChat Resolver
04:41
89
#1.85 SendChatMessage Resolver
08:04
90
#1.86 MessageSubscription
07:30
91
#1.87 Backend Conclusions
01:10
92
#2.0 Create React App with Typescript
06:02
93
#2.1 Apollo Setup part One
05:04
94
#2.2 Apollo Setup part Two
03:35
95
#2.3 Apollo Setup part Three
06:51
96
#2.4 Apollo Setup Recap
04:03
97
#2.5 Connecting Local State to Components
07:08
98
#2.6 Typescript and React Components
05:09
99
#2.7 Typescript and Styled Components part One
04:00
100
#2.8 Typescript and Styled Components part Two
04:04
101
#2.9 Global Styles Set Up
04:59
102
#2.10 Planning the Routes
06:46
103
#2.11 Router and Routes
09:25
104
#2.12 OutHome Component
06:52
105
#2.13 Login Component and React Helmet
04:40
106
#2.14 Route Components Review
06:18
107
#2.15 Inputs and Typescript part One
09:19
108
#2.16 Inputs and Typescript part Two
11:38
109
#2.17 Notifications with React Toastify
07:26
110
#2.18 PhoneLogin Mutation part One
12:26
111
#2.19 Magic with Apollo Codegen
09:00
112
#2.20 PhoneLogin Mutation part Two
07:23
113
#2.21 PhoneLogin Mutation part Three
06:51
114
#2.22 VerifyPhone Screen
09:44
115
#2.23 Testing the PhoneLogin Screen and Redirecting
03:45
116
#2.24 VerifyPhone Mutation part One
12:37
117
#2.25 VerifyPhone Mutation part Two
09:41
118
#2.26 Updating Local State
14:47
119
#2.27 SocialLogin with Apollo part One
10:39
120
#2.28 SocialLogin with Apollo part Two
07:10
121
#2.29 SocialLogin with Apollo part Three
11:02
122
#2.30 SocialLogin with Apollo part Four
05:11
123
#2.31 Home Sidebar Component
07:18
124
#2.32 Home Sidebar Query
11:02
125
#2.33 Home Sidebar Query part Two
11:38
126
#2.34 Updating Driver Mode part One
09:29
127
#2.35 Updating Driver Mode part Two
09:06
128
#2.36 EditProfile Screen part One
09:13
129
#2.37 EditProfile Screen part Two
09:46
130
#2.38 EditProfile Screen part Three
04:45
131
#2.39 Uploading Profile Photo to Cloudinary part One (1)
09:02
132
#2.39 Uploading Profile Photo to Cloudinary part One(2)
08:49
133
#2.40 Uploading Profile Photo to Cloudinary part Two
03:09
134
#2.41 Settings Screen part One
11:24
135
#2.42 Settings Screen part Two
08:23
136
#2.43 Places + AddPlace Components
06:25
137
#2.44 AddPlace Mutation
11:33
138
#2.45 Edit Place Mutation
07:10
139
#2.46 Google Maps and React part One
14:36
140
#2.47 Google Maps and Geolocation
10:47
141
#2.48 Google Map Events
05:58
142
#2.49 Reverse Geocoding part One
08:34
143
#2.50 Reverse Geocoding part Two
05:28
144
#2.51 Geocoding part One
07:11
145
#2.52 Geocoding part Two
09:04
146
#2.53 Refactoring AddPlace
07:35
147
#2.54 HomeScreen User Marker
09:19
148
#2.55 HomeScreen Moving with the User
07:00
149
#2.56 HomeScreen Creating Route Markers
07:08
150
#2.57 HomeScreen Getting Directions part One
09:07
151
#2.58 HomeScreen Getting Directions part Two
11:26
152
#2.59 Calculating the Price
12:56
153
#2.60 Report Location with HOC
12:37
154
#2.61 NearbyDrivers Query
09:52
155
#2.62 NearbyDrivers Query part Two
11:15
156
#2.63 Drawing Nearby Drivers part One
13:32
157
#2.64 Drawing Nearby Drivers part Two
05:49
158
#2.65 Drawing Nearby Drivers part Three
08:06
159
#2.66 Ejecting from Apollo Boost
07:22
160
#2.67 RequestRide Mutation
14:07
161
#2.68 Getting Nearby Rides part One
14:55
162
#2.69 Getting Nearby Rides part Two
15:57
163
#2.70 Apollo Subscriptions part One
06:57
164
#2.71 Apollo Subscriptions part Two
09:59
165
#2.72 Ride Screen part One
12:03
166
#2.73 Get Ride Query part One
06:16
167
#2.74 Get Ride Query part Two
14:41
168
#2.75 Ride Status Subscription
07:51
169
#2.76 Ride Status Subscription part Two
05:06
170
#2.77 Chat Screen Query
11:31
171
#2.78 Chat Screen Mutation
13:20
172
#2.79 Chat Screen Subscription
10:24
173
#2.80 Chat Screen Subscription part Two
03:34
174
#2.81 Frontend Conclusions
04:04
175
#3.1 Deploying to Now part One
09:31
176
#3.2 Deploying to Now part Two
08:54
177
#3.3 Bugfix and conclusions
14:05
178
#4.0 Introduction
05:12
179
#4.1 Building for production part One
02:35
180
#4.2 Heroku
10:17
181
#4.3 Heroku and Databases
08:17
182
#4.4 Finishing Up
03:45
Unlock unlimited learning

Get instant access to all 181 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription