MERN STACK WordPress Clone - Build Ultimate CMS

Create a front-end project structure with separate client and server folders, then initialize an npm project with npm init -y to access thousands of packages like React, Next, and Express.

Set up a Next.js React project by installing Node.js, choosing create next app or manual setup, configuring package scripts, and building a home component served via npm run dev.

Explore building a two-base next.js app with an admin section, integrating ant design globally via a custom app component, and using folder naming for routes.

Explore building UI with Ant Design button components, importing and destructuring exports, and applying a global theme via context to support dark and light modes, plus local and global state.

Discover how to create a global state with the use context hook to manage theme across the app, and contrast it with local state and Redux alternatives.

Create a theme context with React hooks, manage light and dark themes with useState, implement a theme provider to wrap the app, and persist user preference with localStorage via useEffect.

Learn to access and toggle the theme using a context provider, wrap the app with a theme provider, and create a toggle component to manage light and dark modes.

Toggle theme context teaches how to switch between light and dark themes using a context value and on-click handlers, persist choice with local storage, and load theme styles in Next.js.

learn to store and load css files for light and dark themes from a public folder, reference static assets, and persist user theme choice with local storage.

Learn to build a responsive top navigation with dark and light themes using a menu component, including dropdowns and menu items, and convert class components to functional components with useState.

Build navigation in a MERN stack WordPress clone using Next.js link components for client-side routing and a shared top nav with admin and user links.

Create an admin dashboard layout with a left sidebar and content area using a reusable layout component. Wrap pages with an admin layout that renders children content and protects routes.

Convert the admin nav sidebar into a functional component and implement a collapsible sidebar using the state hook, reusing the top navigation menu code with icons and responsive collapse.

Build a dynamic admin menu with a collapsible sidebar and nested items for posts, media, categories, comments, and users, using next link and a dark/light layout.

Map menu items to an icon library, set the default selection, and ensure the active link persists on page reload, covering post, media, comments, and users in a WordPress clone.

Set up a base admin page for posts to test active links, detect path with useEffect in the browser, and create a responsive sidebar that collapses on small screens.

Create an activeName helper to apply an active class when the current name matches a link name, then style the active link with blue color and an underline.

Learn to auto collapse the sidebar as the window width shrinks below 800 pixels, using a window width hook and collapse state, with a manual override via onCollapse.

Explore ant design form theory by examining a login and signup flow within an admin layout, leveraging built-in form state, validation rules, and input components to implement authentication roles.

In the MERN stack WordPress clone course, learn to build a responsive sign-up form using a 24-column grid with rows and columns, centering the form with spans and offsets.

Build a signup form with username, email, and password including initial values and validation plus password visibility, and use on finish to capture and log values while linking to sign-in.

Reuse the sign-up form for sign-in by updating the heading and button, then implement email and password inputs and connect to the backend to authenticate users with hashed passwords.

Generate a custom authentication server with a globally installed CLI tool to scaffold a full API, including routes, controllers, and a MongoDB-backed proxy with SendGrid emails.

Build an express server with mongoose, configure MongoDB and SendGrid env vars. Implement get and post routes for sign up and sign in on port 8000.

Learn how to implement a post request to sign up users, validate input, hash passwords, generate a token, and save the user with a mongoose model and controller.

Sign up for Mongo Atlas and learn to set up a MongoDB cloud cluster, create a user, configure a connection string, and whitelist IPs to connect from your app.

Learn to implement a signup flow using axios to post user data from client to server, handle responses, and debug with network insights and toast notifications.

Register a user by validating input, ensuring unique email with Mongoose, hashing the password, saving to MongoDB, generating a token, and returning the user data with the token (password omitted).

Learn to implement toast notifications and loading indicators in a MERN WordPress clone, handle server errors, validate input, show success messages, and redirect after signup.

Create an authentication context to store the user and token globally, persist them in local storage, and auto-authenticate on sign up to access the dashboard.

Configure environment variables with an .env file and set a global axios base URL in a Next.js app, using NEXT_PUBLIC prefixes for client access and enabling server-side rendering for SEO.

Implement sign in by posting email and password to the sign in endpoint, store user data and token in local storage and context, and use toasts for errors.

Implement sign out by clearing the auth token from local storage and context, then redirect the user, and conditionally render navigation links based on login status.

Learn conditional rendering of sign in, sign out, and admin links based on user context, and how to reset form fields using form refs for a seamless login experience.

Build a forgot password request flow with an email input that posts to the forgot password endpoint, shows loading and toast feedback, and reveals code and password fields on success.

Implement forgot password by locating the user by email, saving the reset code, and emailing it via SendGrid; prep the front end to enter the code and new password.

Implement reset password flow in a MERN stack clone by building a two-stage form that toggles reset code and new password fields and calls a reset endpoint.

Master the authentication flow in a MERN stack WordPress clone, covering forgot password with email reset codes, new password setup, login, and admin restricted access for categories and posts.

Build the admin categories page in the MERN stack WordPress clone, enabling create, read, update, and delete for categories using a simple name form.

Create a category with a frontend form using a 24 column grid and input fields, then build backend routes, controllers, and a category schema to save it in the database.

Learn how to define a category schema with mongoose using name and slug, enforce uniqueness and lowercase, and use timestamps for created and updated fields.

Build category route and controller function to post a category name and save it to the database, using module imports and exports and preparing admin authentication for protected endpoints.

learn how a logged-in user's token is created, stored in context, and validated by server-side middleware, using a popular express library to verify the token. configure axios to automatically attach the authorization bearer token to every request by setting default headers, simplifying api calls across the app.

Implement a require signin middleware with express jwt to verify tokens, attach the user to the request, and protect routes for logged-in users.

Create an admin-protected category in the mern stack by saving a new category from the request body, generating a lowercase slug with slugify, and returning the created category.

Implement is admin middleware in a MERN WordPress clone to guard admin routes by validating the logged-in user's admin role via token and a database lookup, then call next.

Redirect users by role after login to admin, author, or subscriber spaces, and implement a dynamic dashboard link showing the authenticated user's name for a personalized navigation experience.

Protect admin pages by checking the user role in local storage and context within the admin layout, redirecting non-admin users; this front-end guard precedes a backend secured solution.

Manage a loading state with use state, show a loading spinner by default, and render content only for admins while redirecting non-admins after a backend check.

Create a current admin endpoint that validates the token with admin middleware and returns the user, while the frontend uses an effect to fetch it and redirect non-admins to login.