MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

34h 4m 17s
English
Paid

Course description

Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps without spending years learning the basics then this course is for you. This course focuses on practical aspect of building FullStack apps. No matter how good your understanding is of any language or framework, until you have hands on practical experience, you will get completely lost when you have to actually build an app from the ground up.

Read more about the course

Being able to code your thoughts and ideas and producing something real that can be used by millions of people around the world is a fascinating thing. With this course, you will be able to do just that.

We all know WordPress is the most popular and most used CMS (Content Management System) in the world. However most of the time you need to customize WordPress sites using different themes plugins and modifying the codebase. That means even though, it's really easy to get started with WordPress, you will spend a lot more time money and resources to scale and customize your WordPress site.

That's why I have decided to build a WordPress clone of my own. When you learn to build such massive CMS on your own from scratch, not only you understand how things work under the hood, you will also gain massive experience on building FullStack apps.

Using same programming language (JavaScript) in both backend and frontend is another attraction of using MERN stack for your next project.

With this course, you will learn to build fast, responsive sites using JavaScript (ReactJs NodeJs) from scratch and push all the boundaries of FullStack web development.

By the end of this course, you will not only become a master of MERN stack, you will also have a real world CMS running in the cloud, ready for millions of users around the world to use. Are you excited? Join me in this course and experience the joy of coding an awesome CMS of your own from ground zero.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

0:00
/
#1: Project demo

All Course Lessons (196)

#Lesson TitleDurationAccess
1
Project demo Demo
06:16
2
Project demo (dashboard)
12:33
3
Are you ready for this course?
02:57
4
Code editor
04:43
5
Using live demo as a guide
04:45
6
Initialize a project using npm
06:44
7
React NextJs project setup
07:53
8
Ant design and custom app component
11:05
9
Trying ant component
06:23
10
Global context (theory)
06:36
11
React hooks
11:41
12
Accessing context
12:51
13
Toggle theme context
12:18
14
Static folder for storing CSS files
05:52
15
Menu component
12:03
16
Next link to navigate between components
13:14
17
Layout component
13:55
18
Class to functional component (sidebar)
10:28
19
Admin menu
15:22
20
Menu icons
08:37
21
Set current url
13:10
22
Set active link
11:20
23
Auto collapse menu based on window width
10:02
24
Ant design form (theory)
10:13
25
Understanding grid and columns
05:00
26
Signup form
13:18
27
Signin form
05:24
28
Generate auth server
09:18
29
Understanding server and GET request
11:49
30
Understanding server and POST request
07:06
31
Signup to mongo atlas
12:34
32
Signup to sendgrid
08:27
33
Axios POST request and debugging
16:24
34
Save user in database
13:27
35
Toast notifications and loading
14:20
36
Auth context
16:20
37
Using context and local storage
14:30
38
Env file and axios configuration
10:48
39
Signin backend
11:33
40
Signin frontend
07:37
41
Signout
10:59
42
Conditional rendering and reset fields
13:01
43
How forgot password works (theory)
04:19
44
Forgot password request
11:01
45
Forgot password resposne
09:37
46
Implement reset password
12:11
47
Trying reset password
05:51
48
Admin categories page
07:36
49
Category create form
11:06
50
Category schema
11:32
51
Category route and controller function
14:00
52
Middleware explained
07:05
53
Request headers
09:59
54
Require signin middleware
12:58
55
Create category
07:31
56
Is admin middleware
12:47
57
Role based redirect
12:53
58
Protecting admin pages
09:13
59
Loading state
08:50
60
Current admin endpoint
16:46
61
Protecting page based on server response
10:38
62
Categories list server
09:41
63
List of categories client
10:32
64
Ant columns layout
09:33
65
Delete category
09:39
66
Update category server
06:42
67
Using modal component
09:06
68
Updating category on modal
13:47
69
Complete category update
09:39
70
Editor preview and posts page
13:52
71
Installing rich markdown editor
09:05
72
Styling editor
15:08
73
Post title and content in local storage
15:52
74
Load categories
06:24
75
Multiple select
07:42
76
Rich text editor upload image
04:15
77
React image resize and resolve editor issues
15:34
78
Using cloudinary
09:38
79
Uploading image
14:27
80
Post preview
13:59
81
Handle publish
08:10
82
Post route and schema
10:11
83
Save post in database
15:47
84
All posts server
07:03
85
Creating posts
12:27
86
List posts client
14:30
87
Why we need post context (theory)
05:03
88
Lifting state of posts
11:37
89
Lifting state of categories
10:56
90
WordPress inspired media library
04:40
91
Featured image modal
08:21
92
Media components
08:08
93
Upload component
09:39
94
Sending image as formdata
12:48
95
Save media in database
12:35
96
Drag and drop multiple images
12:52
97
Media context
13:03
98
Uploaded image preview
08:28
99
Create post with featured image
08:16
100
Media endpoints
06:28
101
Fetch media
04:29
102
Select from media library
09:11
103
Remove media
09:56
104
SEO in react apps and nextjs apps
09:01
105
Load all posts
10:48
106
Display posts
13:17
107
Single post page
11:34
108
Post image and meta content
14:26
109
Scrolling post view and responsive layout
08:24
110
Delete post
07:16
111
Post edit page
16:19
112
Pre populate post for edit
15:18
113
Post edit request client
07:14
114
Post edit server
10:53
115
Admin media upload
12:40
116
Admin media library
03:45
117
Create user by admin
12:50
118
Password generator select and checkbox
12:48
119
Create user by admin server
15:49
120
Send account info by email
12:26
121
Code refactoring new post
10:33
122
Code refactoring post list
06:25
123
Is admin middleware
05:11
124
Author nav and layout
11:51
125
Author post create page
05:12
126
Can create read update delete middleware
17:26
127
Apply new middleware
08:58
128
Author posts
14:15
129
Author post edit
09:35
130
Author media management
18:03
131
Subscriber nav layout and pages
12:08
132
Users page for admin
08:19
133
Users list for admin
16:57
134
Users list with number of posts
12:38
135
Delete user by admin
08:36
136
User update page for admin
14:33
137
User update form fields and media
14:37
138
Update user by admin
17:52
139
User image preview
10:55
140
Profile page
13:07
141
Author and subscriber profile page
10:19
142
Updating own profile based on roles
17:34
143
Post count and pagination server
10:36
144
Load more posts
17:47
145
All posts for admin
09:55
146
Searching and filtering
08:29
147
Creating comment server
09:16
148
Post comment form
07:13
149
Posting comment client
15:37
150
Populating post comments
15:37
151
Render list of comments
08:19
152
Can update delete comments server
13:09
153
Comments CRUD controller functions
10:29
154
Admin comments page
10:55
155
Rendering comments for admin
10:45
156
Load more comments
10:58
157
Comments description view and delete
10:16
158
Comments delete by admin
04:05
159
Comments page for users
06:08
160
Comment edit modal
14:05
161
Comment update
14:00
162
Contact page
16:19
163
Contact form submit
05:06
164
Send contact form email
16:22
165
Share post to social networks
09:02
166
Documents statistics server
05:21
167
Admin index page to display statistics
08:13
168
Numbers counter with progress
12:44
169
Custom hook useCategory
11:33
170
Custom hook useLatestPosts
05:03
171
Posts by category server
06:41
172
Posts by category page
11:40
173
List of posts based on category
11:46
174
Full width image
11:09
175
Loading to redirect
06:44
176
Text on top of full width image
07:31
177
Stats counter on home page
09:29
178
Latest posts in home page
08:05
179
Parallax image
09:36
180
Categories list in home page
07:09
181
Footer
07:25
182
Customize page
10:10
183
Customize home page from dashboard
10:04
184
Page create and fetch server
13:45
185
Customize home page
14:33
186
Custom hook useHome
06:49
187
Deployment overview
03:32
188
Digital ocean setup
05:46
189
SSH access
08:56
190
Push code to github
05:37
191
Installing NodeJs NGINX and git clone
13:18
192
Installing MongoDB and commit changes
15:49
193
Running frontend
04:59
194
Trying signup
04:09
195
Performing actions in dashboard
12:03
196
Final thoughts
02:16

Unlock unlimited learning

Get instant access to all 195 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

NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guide

Sources: udemy
The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-worl...
16 hours 20 minutes 55 seconds
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projects

Sources: udemy
This Course covers full process of web development from scratch till deployment with domain name. We will use Node, Express, MongoDB to build Server side which
22 hours 11 minutes 13 seconds
React and NodeJS: A Practical Guide with Typescript

React and NodeJS: A Practical Guide with Typescript

Sources: udemy
I'm a FullStack Developer with 10+ years of experience. I'm obsessed with clean code and I try my best that my courses have the cleanest code possible. My teach
6 hours 54 minutes 59 seconds