CF

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

34h 4m 17s
English
Free

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
Free

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

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

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

More courses by Udemy

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.