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

22h 41m 56s
English
Paid

We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!

Uber Clone Typescript NodeJS GraphQL React Apollo

Before you take the course, you need to …

  • An average understanding of JS is required. If you are a beginner, please start with the class below!
  • An intermediate or better understanding of TYPESCRIPT!
  • An intermediate or higher understanding of React is required.
  • Medium or high level GRAPHQL, understanding of APOLLO is required.
  • Implementation Features and Concepts for Learning

You will experience the creation of a global hot service, Uber, from the backend to the frontend.

Fully reproduced Uber-clone spelling. Users can download Google Maps data, send and receive local vehicle information, and also chat in real time between the driver and the client.

Backend Uber: Graphql Yoga, Express, TypeORM, Bcrypt, Mailgun, JWT, Twilio, Postgresql, Cloudinary, Heroku

Frontend Uber: React, Typescript, Styled Components, Popmotion, Google Maps Javascript SDK

https://github.com/nomadcoders/nuber-server

https://github.com/nomadcoders/nuber-client

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