CourseFlix

The React practice course, learn by building projects.

43h 45m 48s
English
Paid

Immerse yourself in the world of React by building three full-fledged projects: a landing page, a Firebase project, and a full-stack application utilizing MongoDB and Node.js. Whether you're looking to refine your React skills or start learning by creating webpages, this course is designed for you. While many courses stop at teaching basics with simple apps, we're offering you a chance to practice in a more realistic setting by building three real-life projects.

Course Overview

If you lack experience with React, rest easy. We'll begin with crafting a static landing page, advance to a more comprehensive project involving authentication and a database, and culminate in an e-commerce style application complete with a user cart and PayPal integration. Plus, you'll learn to build your own server to handle requests.

For those new to React, I’ve included a bonus section - a concise React course to get you up to speed with basics before tackling the practice projects.

Projects Breakdown

Project One: "The Venue"

  • Creating a project with React CLI
  • Component creation and use
  • Integrating third-party libraries
  • Building transitions and carousels
  • Enhancing app with Material UI
  • Deploying static web pages to SURGE

Project Two: "M City"

  • Setting up routes for project navigation
  • Implementing complex animations and transitions
  • Rendering components with server data
  • Utilizing authentication and creating an admin endpoint
  • Managing uploads and storage with Firebase
  • Incorporating a server-side database
  • Deploying the project to Firebase

Project Three: "Waves"

  • Building an E-Commerce style application
  • Constructing dynamic routes
  • Implementing Redux as the store
  • User and admin dashboard authentication
  • Creating a server with Node.js and Express
  • Integrating MongoDB into the project
  • Defining routes for request processing
  • Adding cart functionality to user accounts
  • Handling checkout processes with PayPal
  • Deploying to Heroku

Bonus: Alongside the mini React course, you’ll also receive additional React components for your projects.

Course Requirements

  • Basic understanding of ES5 and ES6

Target Audience

  • Beginners to intermediate React developers

Course Outcomes

  • Enhance your ability to create advanced and complex websites

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 209 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction
All Course Lessons (209)
#Lesson TitleDurationAccess
1
Introduction Demo
01:53
2
First Project Overview
01:21
3
Second Project overview
02:08
4
Third Project overview
02:33
5
Installing NODE Js - MAC
02:14
6
Installing NODE Js - WINDOWS
02:42
7
Project setting up
05:48
8
Creating the Header
11:43
9
Header sidedrawer
16:03
10
Finishing the Header
06:37
11
Slider section
12:34
12
Adding a countdown
08:00
13
Finishing countdown
09:45
14
Venue NFO component
09:59
15
Highlight section
15:53
16
Button reusable component
08:08
17
Adding prices
14:35
18
Footer and Location section
07:43
19
Adding a Scroll To
10:21
20
Deployment to Surge
05:56
21
Project setting up
08:04
22
Adding a Header
13:57
23
Finishing Header, adding Footer
13:03
24
Home: featured Animation
11:53
25
Home: featured Animation...continued
17:45
26
Home: Finishing featured Animation
17:02
27
Tags RC
13:06
28
Adding Firebase
13:28
29
Home: Adding the Match blocks component
14:54
30
Home: Finishing the Match blocks component
12:49
31
Home: Meet the players component
11:43
32
Home: Finishing player card
12:05
33
Home: Finishing player card...continued
07:08
34
Home: Enroll reveal component
07:23
35
Home: Enroll, starting with form fields
16:43
36
Home: Enroll and form fields 2
18:13
37
Home: Enroll and form fields 3
14:58
38
Home: Finishing Enroll and form fields
15:18
39
Auth: Login component
11:53
40
Auth: Finishing Login
06:35
41
Auth: Creating a Dashboard
16:50
42
Auth: Private Routes
16:39
43
Auth: Public Routes
08:51
44
Admin: Matches endpoint
18:45
45
Admin: Edit Match - creating the form
14:11
46
Admin: Edit Match - creating the form 2
19:17
47
Admin: Adding functions
18:39
48
Admin: Finishing Edit matches
10:38
49
Admin: Add Match
05:46
50
Admin: Players Endpoint
09:38
51
Admin: Add players - creating the form
17:43
52
Admin: Players fileuploader
20:23
53
Admin: Players fileuploader ..continued
14:06
54
Admin: Finshing add players
14:15
55
Admin: Edit player
15:41
56
Creating The Team component
23:36
57
The matches: Creating the component
18:19
58
The matches: Adding transitions
16:43
59
The matches: Filters
14:45
60
The matches: Finishing filters
04:51
61
Adding a 404 PAGE
04:59
62
DEPLOY to production.
10:52
63
Installing Mongo DB - MAC
07:28
64
Installing Mongo DB - WINDOWS
08:25
65
installing Robo 3T - MAC
03:08
66
Installing Robo 3T - WINDOWS
03:11
67
SERVER: initial setup
10:59
68
SERVER: .env and middleware
07:55
69
SERVER: User model
08:51
70
SERVER: Registering users
08:33
71
SERVER: Hashing passwords
09:54
72
SERVER: Login users and creating tokens
22:11
73
SERVER: Auth route
17:48
74
SERVER: Logout
05:03
75
SERVER: Brand model and routes
15:58
76
SERVER: Woods model and routes
08:36
77
SERVER:Adding products
19:56
78
SERVER: Getting products by ID
12:36
79
SERVER: Getting product by order.
10:04
80
CLIENT: Starting with the client
13:37
81
CLIENT: Header anf footer
19:22
82
CLIENT: Setting Redux up.
13:01
83
CLIENT: Adding a Register login component
13:07
84
CLIENT:Creating the login
14:00
85
CLIENT:Creating the login 2
20:10
86
CLIENT:Creating the login 3
10:10
87
CLIENT: Finishing the login
14:44
88
CLIENT: Creating the Register
15:20
89
CLIENT: Finishing register
16:18
90
CLIENT: Creating the dashoard
12:50
91
CLIENT: Preventing routes
25:33
92
CLIENT: Header links
16:53
93
CLIENT: Finishing Header links
13:48
94
CLIENT:Home slider promotions
18:54
95
CLIENT:Home cards
13:37
96
CLIENT: Home cards 2
17:01
97
CLIENT: Finishing home cards
12:39
98
CLIENT: Startting the Shop component
17:52
99
CLIENT: Shop checkboxes
20:20
100
CLIENT: Finishing checkboxes
24:15
101
CLIENT: Adding Radio options
22:03
102
SERVER: Crating the shop route
21:16
103
SERVER: Finishing the shop route
07:07
104
CLIENT: Showing Shop cards
11:09
105
CLIENT: Shop loadmore button
11:57
106
CLIENT: Shop grids
06:29
107
ADMIN: Add products form
15:18
108
ADMIN: Add products form 2
09:13
109
ADMIN: Add products form 3
18:50
110
ADMIN: Finishing the Add products form
21:19
111
ADMIN: Adding the File Upload
19:37
112
ADMIN: Adding the File Upload 2
19:21
113
ADMIN: Finishing the File Upload
14:31
114
ADMIN: Manage Brands component
22:26
115
ADMIN: Finish Manage Brands.
15:38
116
CLIENT: Adding the Product Detail component
22:09
117
CLIENT: Product Info detail
11:35
118
CLIENT: Product detail, images section
18:00
119
CLIENT: Finishing the detail, adding Lightbox
16:24
120
CLIENT: Quick fix to Prod detail
02:35
121
CLIENT: Adding items to Cart
22:36
122
CLIENT: Finish the add to cart
12:44
123
ADMIN: Cart component
20:15
124
ADMIN: Creating the cart blocks.
13:51
125
ADMIN: Calculating the total.
10:56
126
ADMIN: Removing cart items.
19:35
127
ADMIN: Adding the Paypal btn
21:12
128
ADMIN: Finishing Paypal.
10:44
129
ADMIN: Creating the SUCCESS BUY route
17:01
130
ADMIN: Finishing the SUCCESS BUY route
16:22
131
ADMIN: Creating the Action and dispatching
12:40
132
ADMIN: User History
06:58
133
ADMIN: Updating personal info
15:44
134
ADMIN: Finishing Update personal info
12:58
135
ADMIN: Creating the Site Info
16:10
136
ADMIN: Getting the Site Info
17:07
137
ADMIN: Finishing Site info
14:42
138
GIT and GITHUB
16:54
139
Adding SSH keys - MAC USERS
07:17
140
Adding SSH keys - WINDOWS USERS
07:16
141
Adding Heroku to the mix
05:11
142
Deploying the project
15:45
143
Deploying the project 2
23:35
144
EMAILS: Using Nodemailer
11:36
145
EMAILS: Sending a welcome Email
16:32
146
NOT FOUND: Adding not found route.
03:44
147
ORDER ID: Adding custom PO
12:10
148
ORDER ID: Sending email with PO
13:39
149
FILE UPLOAD: Uploading files
19:37
150
FILE UPLOAD: Uploading files 2
13:26
151
FILE DOWNLOAD: Downloading files
04:05
152
PASSWORD: Adding forgot password
17:03
153
PASSWORD: Adding forgot password 2
14:38
154
PASSWORD: Adding forgot password 3
15:40
155
PASSWORD: Finishing forgot password
08:31
156
Boilerplate
05:27
157
Bundle and structure
06:51
158
Rendering
09:39
159
JSX
06:52
160
Structure and exporting
09:46
161
Dynamic data
04:50
162
Functional and class based components
07:47
163
Adding some style
10:22
164
Events
13:39
165
A little bit more of classes
07:13
166
React state
11:00
167
Using props
10:14
168
Using props 2
04:41
169
Using props 3
06:49
170
Children props
04:16
171
More on styles
15:37
172
Using CSS modules
13:51
173
Filtering state
17:45
174
Routes: installing it
06:26
175
Routes: Adding routes
13:47
176
Routes: Linking
08:28
177
Routes: Params and URL's
12:26
178
Routes: Switch
04:44
179
Routes: Redirections
08:03
180
React Lifecycles
07:06
181
React Lifecycles ..continued
13:34
182
Conditional rendering
07:41
183
Pure components
05:10
184
Returning arrays
06:26
185
HOC's
10:45
186
HOC's ...continued
09:54
187
React transitions
16:26
188
React transitions 2
09:29
189
CSS transitions
07:42
190
Transition group
10:14
191
Proptypes
18:19
192
Proptypes 2
03:59
193
Refs
05:17
194
Controlled and uncontrolled
18:30
195
Form template
18:30
196
Form template 2
14:56
197
Form template 3
15:50
198
Adding textarea and select
11:45
199
Validation
15:59
200
Validation 2
14:21
201
REDUX: Installing and connecting
12:27
202
REDUX: Reducers
17:34
203
REDUX: Action creators
15:47
204
REDUX: Dispatch
10:06
205
REDUX: Containers
05:19
206
REDUX PRACTICE: Intro and setup
11:44
207
REDUX PRACTICE: Adding redux to home
17:03
208
REDUX PRACTICE: Finishing home and adding the artist view
19:39
209
REDUX PRACTICE: Fixing issues
05:02
Unlock unlimited learning

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

Learn more about subscription