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

22h 41m 56s
English
Paid

Course description

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

Read more about the course

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

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React with TypeScript

React with TypeScript

Sources: ui.dev (ex. Tyler McGinnis)
We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll build during the course.
2 hours 53 seconds
NodeJS Internals and Architecture

NodeJS Internals and Architecture

Sources: udemy, Hussein Nasser
My favorite part of engineering is making complex systems transparent and understandable. Node.js is one of the most popular runtimes for server development...
21 hours 9 minutes 56 seconds
Django with React | An Ecommerce Website

Django with React | An Ecommerce Website

Sources: Brad Traversy
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres. In this course, we will build a completely customized eCommerce / shopping cart application ...
18 hours 6 minutes 7 seconds
Building Large Scale Web Apps | A React Field Guide

Building Large Scale Web Apps | A React Field Guide

Sources: Addy Osmani, Hassan Djirdeh
CODE SMART, SCALE FAST, CONQUER CHALLENGES. Learn tools and techniques to build and maintain large-scale React web applications. “Building Large Scale Web Apps” is a toolkit to ...
React Supabase Full Course

React Supabase Full Course

Sources: fireship.io
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres. The Supabase Course is a project-based course that builds a Reddit-inspired web app f...
1 hour 39 minutes 49 seconds