MERN STACK WordPress Clone - Build Ultimate CMS

Learn to build real world CMS like WordPress using React NextJs Node MERN Stack with SEO

4.40 (68 reviews)
Udemy
platform
English
language
Web Development
category
instructor
1,042
students
34 hours
content
Feb 2024
last update
$74.99
regular price

What you will 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)

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.

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.

Content

Introduction

Project demo
Project demo (dashboard)
Are you ready for this course?
Code editor
Using live demo as a guide
Download source code from Github

Getting Started

Initialize a project using npm
React NextJs project setup
Ant design and custom app component
Trying ant component

React Context and Hooks

Global context (theory)
React hooks
Accessing context
Toggle theme context

Navigation and Layouts

Static folder for storing CSS files
Menu component
Next link to navigate between components
Layout component
Class to functional component (sidebar)
Admin menu
Menu icons
Set current url
Set active link
Auto collapse menu based on window width

Ant Design Components

Ant design form (theory)
Understanding grid and columns
Signup form
Signin form

Server Setup

Generate auth server
Understanding server and GET request
Understanding server and POST request
Signup to mongo atlas
Signup to sendgrid

Signup and Signin

Axios POST request and debugging
Save user in database
Toast notifications and loading
Auth context
Using context and local storage
Env file and axios configuration
Signin backend
Signin frontend
Signout
Conditional rendering and reset fields

Forgot and Reset Password

How forgot password works (theory)
Forgot password request
Forgot password resposne
Implement reset password
Trying reset password

Categories (server)

Admin categories page
Category create form
Category schema
Category route and controller function
Middleware explained
Request headers
Require signin middleware
Create category
Is admin middleware

Admin Access Control

Role based redirect
Protecting admin pages
Loading state
Current admin endpoint
Protecting page based on server response

Categories Management (admin)

Categories list server
List of categories client
Ant columns layout
Delete category
Update category server
Using modal component
Updating category on modal
Complete category update

Rich Text Editor for Posts

Editor preview and posts page
Installing rich markdown editor
Styling editor
Post title and content in local storage
Load categories
Multiple select
Rich text editor upload image

Uploading images

React image resize and resolve editor issues
Using cloudinary
Uploading image
Post preview
Handle publish

Posts (server)

Post route and schema
Save post in database
All posts server
Creating posts
List posts client

Post Context

Why we need post context (theory)
Lifting state of posts
Lifting state of categories

Media Library (wordpress inspired)

WordPress inspired media library
Featured image modal
Media components
Upload component
Sending image as formdata
Save media in database
Drag and drop multiple images
Media context
Uploaded image preview
Create post with featured image
Media endpoints
Fetch media
Select from media library
Remove media

Posts and Media (views SEO edit delete)

SEO in react apps and nextjs apps
Load all posts
Display posts
Single post page
Post image and meta content
Scrolling post view and responsive layout
Delete post
Post edit page
Pre populate post for edit
Post edit request client
Post edit server
Admin media upload
Admin media library

Creating User and Author Layout

Create user by admin
Password generator select and checkbox
Create user by admin server
Send account info by email
Code refactoring new post
Code refactoring post list
Is admin middleware

Author Dashboard

Author nav and layout
Author post create page
Can create read update delete middleware
Apply new middleware
Author posts
Author post edit
Author media management

Subscriber Dashboard

Subscriber nav layout and pages
Users page for admin
Users list for admin
Users list with number of posts
Delete user by admin
User update page for admin
User update form fields and media
Update user by admin
User image preview

User Profile Searching and Filtering

Profile page
Author and subscriber profile page
Updating own profile based on roles
Post count and pagination server
Load more posts
All posts for admin
Searching and filtering

Comments

Creating comment server
Post comment form
Posting comment client
Populating post comments
Render list of comments
Can update delete comments server
Comments CRUD controller functions
Admin comments page
Rendering comments for admin
Load more comments
Comments description view and delete
Comments delete by admin
Comments page for users
Comment edit modal
Comment update

Contact Form and Social Share

Contact page
Contact form submit
Send contact form email
Share post to social networks

App Statistics (admin) and Custom Hooks

Documents statistics server
Admin index page to display statistics
Numbers counter with progress
Custom hook useCategory
Custom hook useLatestPosts
Posts by category server
Posts by category page
List of posts based on category

Customization (admin)

Full width image
Loading to redirect
Text on top of full width image
Stats counter on home page
Latest posts in home page
Parallax image
Categories list in home page
Footer
Customize page
Customize home page from dashboard
Page create and fetch server
Customize home page
Custom hook useHome

Deployment

Deployment overview
Digital ocean setup
SSH access
Push code to github
Installing NodeJs NGINX and git clone
Installing MongoDB and commit changes
Running frontend
Trying signup
Performing actions in dashboard
Final thoughts

Bonus

Other courses you may like

Screenshots

MERN STACK WordPress Clone - Build Ultimate CMS - Screenshot_01MERN STACK WordPress Clone - Build Ultimate CMS - Screenshot_02MERN STACK WordPress Clone - Build Ultimate CMS - Screenshot_03MERN STACK WordPress Clone - Build Ultimate CMS - Screenshot_04

Reviews

Amit
March 2, 2023
it is good but now it's outdated, react js is changing so fast, its library has now new versions, and this project is missing some error handling too. but really good explained videos and cleared my concepts to advancement in my project.
James
December 28, 2022
This course should properly be titled "Build the UI for a Sort-Of-WordPress Clone" because that's mostly what it is--building a shiny interface for a React app. The actual mechanics of *building a CMS* are buried pretty deep in the course material...and if that's why you are taking the course, you are likely to be pretty frustrated. The back-end material (which is in my opinion the most important) is pretty spotty and mostly covered better elsewhere. Also, be advised that the course uses several third-party libraries: Next.js, Ant Design, and an npm plugin for scaffolding (plus possibly others). If you want to *not* use those libraries...good luck. It's pretty annoying that the instructor goes into a lot of detail about what NPM is, but then expects students to essentially learn several external packages on their own.
Lothar
October 18, 2022
Ant Design is outdated. The current version from 4.20. is available since April this year. The use of Menu has changed completely. The recommendation to use version prior to 4.20 is not very helpful. I don't support downgrading.
Kevin
August 11, 2022
I have not gotten done with the course yet but I have always enjoyed Ryan's courses. All of them are practical case scenarios and I love how, no matter what, he always makes his courses as advanced as they can be but at the same time in an introductory level; what I mean by that is he teaches you as if it was your first time writing code. He goes to everything; from showing you how and why to use X npm library all the the way to guide in how to sign-up for X third party website (sendgrid, cloudinary/aws, heroku, etc, etc). Love'em all his courses!.
Mohamed
June 11, 2022
This course is excellent, but if you have never used React before, you must learn React first before taking the course. If you know React, you will love this course. I have purchased almost all of Ryan's courses, because he always chooses practical projects.

Coupons

DateDiscountStatus
5/25/202295% OFF
expired
7/6/202295% OFF
expired

Charts

Price

MERN STACK WordPress Clone - Build Ultimate CMS - Price chart

Rating

MERN STACK WordPress Clone - Build Ultimate CMS - Ratings chart

Enrollment distribution

MERN STACK WordPress Clone - Build Ultimate CMS - Distribution chart
2617278
udemy ID
10/21/2019
course created date
5/25/2022
course indexed date
Bot
course submited by