CF

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

34h 4m 17s
English
Paid

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone) is a 196-lesson 34 hours 4 minutes self-paced course by Udemy. 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.

Course facts

Lessons
196
Duration
34 hours 4 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

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.

Who teaches MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)?

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
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

What courses are similar to MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)?

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling in this course, it is recommended that you have a basic understanding of JavaScript, HTML, and CSS. Familiarity with the concept of web development and an understanding of how web applications function will be beneficial. While the course does cover project initialization and setup using npm and React NextJs, having prior experience in these areas can enhance your learning experience.
What kind of project will I build in this course?
In this course, you will build a full-stack JavaScript web application that functions as a Content Management System (CMS) similar to WordPress. The project will cover a range of functionalities including user authentication, category management, and admin page protection, using technologies like MongoDB, ExpressJs, ReactJs, and NodeJS.
Who is the target audience for this course?
The course is designed for individuals who are eager to learn by building real-world applications without spending excessive time on the basics. It is well-suited for aspiring full-stack developers who wish to gain practical experience with the MERN stack. This course is also beneficial for developers looking to expand their skill set with modern web technologies.
How does this course compare to other full-stack development courses?
This course focuses primarily on practical application rather than theoretical concepts. It offers a hands-on approach to learning by guiding students through the creation of a CMS using the MERN stack. Unlike some other courses that may emphasize theory, this course includes 196 lessons with step-by-step instructions on using tools like Ant Design and NextJs, ensuring you gain tangible skills in building web apps.
What specific tools or platforms will be used in this course?
Throughout the course, you will work with a variety of tools and platforms, including MongoDB for database management, ExpressJs and NodeJS for server-side development, and ReactJs for the frontend. Additionally, you will use npm for project initialization, Ant Design for UI components, and NextJs for project setup. The course will also cover the use of SendGrid for email services and Axios for handling HTTP requests.
What topics are not covered in this course?
The course does not cover beginner-level topics such as basic HTML, CSS, or JavaScript syntax. It assumes that you have a foundational knowledge of these subjects. Advanced database optimization, deployment strategies for different environments, and comprehensive testing methodologies are also outside the scope of this course.
How much time should I expect to commit to this course?
This course consists of 196 lessons, and while the total runtime is not specified, it is advisable to allocate sufficient time to fully engage with the material and complete the hands-on projects. Dedicating consistent, focused study sessions to work through the lessons and apply the concepts in practice will be key to successfully building the CMS application.