Build a Full-Stack MERN Blog Website with Admin Dashboard

Create a two-folder project (frontend and backend) and initialize npm to build a basic express server in index.js. Run with nodemon for automatic restarts and manage ports for localhost.

Securely connect your MERN blog by configuring dotenv and cors, installing and using .env for the MongoDB URL, and enabling express.json parsing with a mongoose connection.

Organize the backend into a src/blogs structure and create a blog model with mongoose, defining title, description, content, cover image, category, author, rating, and createdAt.

Define and test blog routes with express by creating a router, exporting it, and wiring app.use with api blocks to serve blog data.

Learn how to create a route to get all blog posts from MongoDB using a Mongoose model and the find method, returning a 200 response with the posts.

Create a get by id endpoint to retrieve a single blog by id, using request params, querying the blog model, and returning 404 when not found.

Update a blog post in a MERN app using patch (or put) and findByIdAndUpdate, retrieving the post id from the route and returning a post updated successfully message.

Define a delete route to remove a post by id using router.delete, verify the post exists, delete by id, and return 200 or 404 if not found.

Learn to build a related blogs feature by creating a dedicated route for related posts, excluding the current blog, and fetching results by title-based regex in a MERN stack.

Create a mongoose comment model by defining a comment schema with type, user reference, post reference, and created at, then export the model for use with blocks.

Learn how to add a post comment route in a full-stack mern blog, implement the comment model, connect to api/comments, and handle async creation and errors with express and mongodb.

Modify the blog routes to fetch a single post with its comments, populate user details, and cascade delete related comments when deleting a post.

Learn to build a post /register route for user registration using Express, handle the request body, save the new user to the database, and return a success message.

Secure user passwords by hashing with bcrypt in a mongoose pre-save hook, using 10 salt rounds, in a full-stack MERN blog with an admin dashboard.

Implement a login flow that authenticates users by email and password, comparing bcrypt hashed passwords, and returns a user object on success. Handle invalid credentials with a 401 error.

Generate a JWT token in middleware on login, sign it with a secret key, include user id and role as payload, and store it in the cookie named token.

Implement a get all users route using router.get to fetch users from the database with the user model and return a 200 response with user data.

Execute a delete route to remove a user by id, using router.delete and find by id and delete, with 404 and 200 responses, and verify with get all users.

Update a user role in the admin dashboard with a put or patch request, using id from params and role from body to update MongoDB and respond with success.

refactor blog routes and models to populate author details from user id, update the blog schema with description and an object-type content, and enable token verification for protected routes.

Define an isAdmin middleware to verify admin users for blog post creation, updating, and deletion, enforce token and authorization checks, and test admin access in the MERN blog API.

Set up a React project with vite and organize frontend and backend folders. Install dependencies with npm, run npm run dev to launch the frontend, and install Tailwind CSS.

Define a custom tailwind color palette in tailwind.config.js by extending colors for a full-stack mern blog project. Set primary, background, and accent colors to style the app.

Learn to set up react router dom to enable single-page navigation for a mern blog, render specific pages (home, about us, privacy policy, contact us) without reloading the whole page.

Set up a modular MERN blog architecture with a fixed header and footer and an outlet rendering changing body content, using a home page as a child route.

Set up the home page with a banner hero and blog blocks, implementing a swiper js carousel for the hero and incorporating search and card features on a responsive layout.

Build a blog base with blog cards and a searchable interface, featuring a search bar, a search component, and stateful handlers for query and category.

Set up Redux and Redux Toolkit for a full-stack blog app with comments. Configure an RTK Query blog API, create the store, and wrap the app with the provider.

Build the blog details content page with a block card component that renders the post title, date, author, cover image, and render rich content via an HTML editor parser.

Design and implement a comment card component for a mern blog, map comments, display user name and avatar, format created at, and handle no comments found.

Create a post a comment section in a MERN blog app using route params for the post id, a controlled textarea, and a styled submit button.

Create a functional login and register experience for a full-stack MERN blog, building routes for /login and /register, and implementing email, password, and username forms with client-side state.

implement login and registration in a mern blog app, using a login mutation and browser cookies to store the token, with client-side auth state managed by a redux slice.

Customize the navbar to show the user profile avatar or admin dashboard links, using Redux useSelector and useDispatch to conditionally render by user role.

Define and integrate post, update, and delete blog APIs using builder mutations, dynamic IDs, and tag invalidation within a MERN blog app, then secure the admin dashboard.

Set up admin navigation routes and pages for a full-stack MERN blog, creating root and child paths for dashboard, add post, manage items, and users, with Redux logout integration.

Design and implement an admin dashboard page for a full-stack MERN blog, featuring a welcome header, four stat cards (users, blocks, admins, comments), and a blog chart.

Design a blog graph chart using Recharts with a responsive area chart, including x axis, y axis, tooltip, and formatted data such as name, date, title length, and page views.

Learn to manage users and update user roles in a full-stack MERN blog admin dashboard, using API calls to fetch users, edit roles, delete users, and register new ones.

Learn how to run a full-stack MERN blog project by deploying backend and frontend, configuring MongoDB Atlas, env vars, and admin dashboard with posts and comments.

Deploy your MERN blog full-stack project on Vercel by deploying the backend first, then the frontend, using Git and GitHub, and updating the backend and frontend URLs.