MERN STACK WordPress Clone Build Ultimate CMS

Learn to build real world CMS like WordPress using React NextJs Node MERN Stack with SEO
MERN STACK WordPress Clone Build Ultimate CMS
File Size :
30.14 GB
Total length :
34h 3m



Ryan Dhungel


Last update




MERN STACK WordPress Clone Build Ultimate CMS

What you’ll learn

Learn FullStack JavaScript Web Development
Learn MERN Stack (MongoDB ExpressJs ReactJs NodeJs)
Learn Ant Design to build UI
Learn the concept of building a Real World CMS (Content Management System)

MERN STACK WordPress Clone Build Ultimate CMS


Basic understanding of JavaScript or any other Programming Language


Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) StackIf 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.


Section 1: Introduction

Lecture 1 Project demo

Lecture 2 Project demo (dashboard)

Lecture 3 Are you ready for this course?

Lecture 4 Code editor

Lecture 5 Using live demo as a guide

Lecture 6 Download source code from Github

Section 2: Getting Started

Lecture 7 Are you new to JavaScript React or NodeJs?

Lecture 8 Initialize a project using npm

Lecture 9 React NextJs project setup

Lecture 10 Ant design and custom app component

Lecture 11 Trying ant component

Section 3: React Context and Hooks

Lecture 12 Global context (theory)

Lecture 13 React hooks

Lecture 14 Accessing context

Lecture 15 Toggle theme context

Section 4: Navigation and Layouts

Lecture 16 Static folder for storing CSS files

Lecture 17 Menu component

Lecture 18 Next link to navigate between components

Lecture 19 Layout component

Lecture 20 Class to functional component (sidebar)

Lecture 21 Admin menu

Lecture 22 Menu icons

Lecture 23 Set current url

Lecture 24 Set active link

Lecture 25 Auto collapse menu based on window width

Section 5: Ant Design Components

Lecture 26 Ant design form (theory)

Lecture 27 Understanding grid and columns

Lecture 28 Signup form

Lecture 29 Signin form

Section 6: Server Setup

Lecture 30 Generate auth server

Lecture 31 Understanding server and GET request

Lecture 32 Understanding server and POST request

Lecture 33 Signup to mongo atlas

Lecture 34 Signup to sendgrid

Section 7: Signup and Signin

Lecture 35 Axios POST request and debugging

Lecture 36 Save user in database

Lecture 37 Toast notifications and loading

Lecture 38 Auth context

Lecture 39 Using context and local storage

Lecture 40 Env file and axios configuration

Lecture 41 Signin backend

Lecture 42 Signin frontend

Lecture 43 Signout

Lecture 44 Conditional rendering and reset fields

Section 8: Forgot and Reset Password

Lecture 45 How forgot password works (theory)

Lecture 46 Forgot password request

Lecture 47 Forgot password resposne

Lecture 48 Implement reset password

Lecture 49 Trying reset password

Section 9: Categories (server)

Lecture 50 Admin categories page

Lecture 51 Category create form

Lecture 52 Category schema

Lecture 53 Category route and controller function

Lecture 54 Middleware explained

Lecture 55 Request headers

Lecture 56 Require signin middleware

Lecture 57 Create category

Lecture 58 Is admin middleware

Section 10: Admin Access Control

Lecture 59 Role based redirect

Lecture 60 Protecting admin pages

Lecture 61 Loading state

Lecture 62 Current admin endpoint

Lecture 63 Protecting page based on server response

Section 11: Categories Management (admin)

Lecture 64 Categories list server

Lecture 65 List of categories client

Lecture 66 Ant columns layout

Lecture 67 Delete category

Lecture 68 Update category server

Lecture 69 Using modal component

Lecture 70 Updating category on modal

Lecture 71 Complete category update

Section 12: Rich Text Editor for Posts

Lecture 72 Editor preview and posts page

Lecture 73 Installing rich markdown editor

Lecture 74 Styling editor

Lecture 75 Post title and content in local storage

Lecture 76 Load categories

Lecture 77 Multiple select

Lecture 78 Rich text editor upload image

Section 13: Uploading images

Lecture 79 React image resize and resolve editor issues

Lecture 80 Using cloudinary

Lecture 81 Uploading image

Lecture 82 Post preview

Lecture 83 Handle publish

Section 14: Posts (server)

Lecture 84 Post route and schema

Lecture 85 Save post in database

Lecture 86 All posts server

Lecture 87 Creating posts

Lecture 88 List posts client

Section 15: Post Context

Lecture 89 Why we need post context (theory)

Lecture 90 Lifting state of posts

Lecture 91 Lifting state of categories

Section 16: Media Library (wordpress inspired)

Lecture 92 WordPress inspired media library

Lecture 93 Featured image modal

Lecture 94 Media components

Lecture 95 Upload component

Lecture 96 Sending image as formdata

Lecture 97 Save media in database

Lecture 98 Drag and drop multiple images

Lecture 99 Media context

Lecture 100 Uploaded image preview

Lecture 101 Create post with featured image

Lecture 102 Media endpoints

Lecture 103 Fetch media

Lecture 104 Select from media library

Lecture 105 Remove media

Section 17: Posts and Media (views SEO edit delete)

Lecture 106 SEO in react apps and nextjs apps

Lecture 107 Load all posts

Lecture 108 Display posts

Lecture 109 Single post page

Lecture 110 Post image and meta content

Lecture 111 Scrolling post view and responsive layout

Lecture 112 Delete post

Lecture 113 Post edit page

Lecture 114 Pre populate post for edit

Lecture 115 Post edit request client

Lecture 116 Post edit server

Lecture 117 Admin media upload

Lecture 118 Admin media library

Section 18: Creating User and Author Layout

Lecture 119 Create user by admin

Lecture 120 Password generator select and checkbox

Lecture 121 Create user by admin server

Lecture 122 Send account info by email

Lecture 123 Code refactoring new post

Lecture 124 Code refactoring post list

Lecture 125 Is admin middleware

Section 19: Author Dashboard

Lecture 126 Author nav and layout

Lecture 127 Author post create page

Lecture 128 Can create read update delete middleware

Lecture 129 Apply new middleware

Lecture 130 Author posts

Lecture 131 Author post edit

Lecture 132 Author media management

Section 20: Subscriber Dashboard

Lecture 133 Subscriber nav layout and pages

Lecture 134 Users page for admin

Lecture 135 Users list for admin

Lecture 136 Users list with number of posts

Lecture 137 Delete user by admin

Lecture 138 User update page for admin

Lecture 139 User update form fields and media

Lecture 140 Update user by admin

Lecture 141 User image preview

Section 21: User Profile Searching and Filtering

Lecture 142 Profile page

Lecture 143 Author and subscriber profile page

Lecture 144 Updating own profile based on roles

Lecture 145 Post count and pagination server

Lecture 146 Load more posts

Lecture 147 All posts for admin

Lecture 148 Searching and filtering

Section 22: Comments

Lecture 149 Creating comment server

Lecture 150 Post comment form

Lecture 151 Posting comment client

Lecture 152 Populating post comments

Lecture 153 Render list of comments

Lecture 154 Can update delete comments server

Lecture 155 Comments CRUD controller functions

Lecture 156 Admin comments page

Lecture 157 Rendering comments for admin

Lecture 158 Load more comments

Lecture 159 Comments description view and delete

Lecture 160 Comments delete by admin

Lecture 161 Comments page for users

Lecture 162 Comment edit modal

Lecture 163 Comment update

Section 23: Contact Form and Social Share

Lecture 164 Contact page

Lecture 165 Contact form submit

Lecture 166 Send contact form email

Lecture 167 Share post to social networks

Section 24: App Statistics (admin) and Custom Hooks

Lecture 168 Documents statistics server

Lecture 169 Admin index page to display statistics

Lecture 170 Numbers counter with progress

Lecture 171 Custom hook useCategory

Lecture 172 Custom hook useLatestPosts

Lecture 173 Posts by category server

Lecture 174 Posts by category page

Lecture 175 List of posts based on category

Section 25: Customization (admin)

Lecture 176 Full width image

Lecture 177 Loading to redirect

Lecture 178 Text on top of full width image

Lecture 179 Stats counter on home page

Lecture 180 Latest posts in home page

Lecture 181 Parallax image

Lecture 182 Categories list in home page

Lecture 183 Footer

Lecture 184 Customize page

Lecture 185 Customize home page from dashboard

Lecture 186 Page create and fetch server

Lecture 187 Customize home page

Lecture 188 Custom hook useHome

Section 26: Deployment

Lecture 189 Deployment overview

Lecture 190 Digital ocean setup

Lecture 191 SSH access

Lecture 192 Push code to github

Lecture 193 Installing NodeJs NGINX and git clone

Lecture 194 Installing MongoDB and commit changes

Lecture 195 Running frontend

Lecture 196 Trying signup

Lecture 197 Performing actions in dashboard

Lecture 198 Final thoughts

Section 27: Bonus

Lecture 199 Other courses you may like

Lecture 200 Join my Discord server

Anyone who is interested to learn how to code FullStack JavaScript Web Apps

Course Information:

Udemy | English | 34h 3m | 30.14 GB
Created by: Ryan Dhungel

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top