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.
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
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 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 Title | Duration |
|---|---|---|
| 1 | Project 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 |
What courses are similar to MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)?
-
Updated 2y agoNode with React: Fullstack Web Development
By: Udemy, Stephen GriderGo beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a full25h 36m -
Updated 6mo agoNode.js Graceful Termination
By: Michael GuayLearn to properly terminate processes in Node.js within a Kubernetes environment. This is key to stable deployments and efficient scaling without downtime.30m -
Updated 2y agoReact, NodeJS, Express & MongoDB - The MERN Fullstack Guide
By: UdemyBuilding fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course.18h 45m -
Updated 2y agoMERN eCommerce From Scratch
By: Udemy, Brad TraversyThere are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized e14h 49m5/5 -
Updated 2y agoMERN Stack Web Development with Ultimate Authentication
By: UdemyLearn how to build a full MERN app with clear and safe auth. You work with JWT, roles, and deploy the project to a live server.9h 24m -
Updated 2y agoDiscord Clone - Learn MERN Stack with WebRTC and SocketIO
By: UdemyLearn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea19h 29m -
FreeUpdated 3y agoReact Summit Remote Edition 2021
By: React SummitAttend a three-day React conference gathering thousands of international Front-end and Full-stack engineers in the cloud.16h 1m -
Updated 3y agoMERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
By: UdemyIf you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies.13h 2m5/5
More courses by Udemy
-
Updated 1mo agoReact - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.47h 42m5/5 -
Updated 3y agoComplete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!30h 34m -
Updated 3y agoNest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul5h 39m5/5 -
Updated 3y agoThe HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!37h 18m5/5 -
Updated 3y agoMicroservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!54h 13m5/5 -
FreeClassic100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.58h 35m5/5
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.