Full stack MERN Blog Project: MERN Stack Blog with Dashboard

Create and wire pages and routes in a MERN blog project using react router dom, building sign up, sign in, about, home, projects, and the dashboard.

Create a header component in a MERN app using Flow Bite, featuring a logo, search bar, dark/light toggle, sign-in, and a responsive navbar with a hamburger menu.

Create and run a back-end server with express, set up root API in API/index.js, and configure dev and start scripts to reload on changes and listen on port 3000.

Install mongoose and connect to MongoDB with a uri, then secure the connection by loading it from a dotenv file and excluding it with .gitignore.

Create a user model with mongoose by defining a user schema that enforces username, email, and password as required and unique where applicable, with timestamps for creation and updates.

Create a test api route using express, wiring a dedicated user route to a controller and returning json. Test at localhost:3000/api/user/test and organize routes and controllers for scalability.

Develop a dedicated sign up api route for the Mern blog project, implement the auth controller, validate input, hash passwords with bcryptjs, save to MongoDB, and test with Insomnia.

Learn to implement an express error middleware and a dedicated error handler function, returning structured responses with status codes, messages, and a boolean success flag for a MERN blog API.

Create signup page UI for the MERN blog project by building a left logo panel and a right signup form with username, email, and password fields and a button.

Add interactivity to the signup page by tracking input changes with form data, validating fields, submitting to the signup API, showing loading and errors, and navigating to sign-in on success.

Build a reusable footer component in the MERN blog project using React and Flow Byte, featuring a logo, about, follow us, legal sections, and a dynamic year.

Create a sign in API route that validates credentials, authenticates with bcrypt, signs a JWT token, stores it in an HttpOnly cookie, and returns the user data without the password.

Reuse the sign-up page to create the sign-in page, remove the username field, post email and password, and navigate to the home page as Redux Toolkit global state is prepared.

Implement redux toolkit by creating a store and user slice, wrapping app with a provider, and dispatching sign-in actions to manage loading, error, and current user via redux dev tools.

Learn to implement redux persist with redux toolkit to save user data locally across reloads by configuring a root reducer, persist config, and persist gate.

Implement Google OAuth in a full stack blog project using Firebase authentication and a Google sign-in popup. Build a backend endpoint to store user data and manage sign-in flow.

Update the header to show the authenticated user by pulling current user data from Redux Toolkit, displaying an avatar with a dropdown for dashboard/profile and sign out.

Use a redux toolkit theme slice and toggle action to implement dark mode that persists after refresh, and wrap the app with a theme provider for light and dark styles.

Make the dashboard private by building a private route component that checks authentication with a Redux selector, redirects unauthenticated users to sign in, and renders the dashboard via an outlet.

Complete the dashboard UI by separating the dash sidebar and dash profile into two components, using location and url search params to switch tabs.

Build a complete profile page UI with a centered current user profile image and a form for username, email, and password, plus update, delete account, and sign up actions.

Implement complete user image upload functionality for the profile, including a hidden file input, image preview with a temporary URL, and Firebase storage upload with progress and error handling.

Implement a put update user api route that authenticates via cookie and verifies token, validates and updates username, email, and password, and returns the updated user while enforcing security checks.

Connect the front end to the user update API by managing image, username, email, and password in a form, then submit updates with redux-driven feedback.

Implement a delete user api route in a mern stack project, verifying the requester via cookie, deleting the user by id in the controller, and handling front-end deletion flow.

Implement complete delete account functionality by wiring a frontend delete button to a confirmation modal, call the delete account API route, and clear user data from Redux and frontend.

Add sign out functionality by building an API route to clear the access cookie and reset current user via redux across header and menu.

Add admin functionality by introducing a boolean is admin in the user model, securing it in the database and cookie, and restricting admin privileges to the backend.

Develop an admin only create post page in the MERN blog project, enabling title, category, image upload, and rich text editing with React Quill, plus a publish action.

Create a secure post API route by verifying admin via the browser cookie token, then save a new post with title, content, slug, image, and user id using a post model.

Implement post image upload in create post page using Firebase storage: select an image, upload with resumable task, track progress, handle errors, and store the download URL in form data.

Wire post creation form by listening to title, category, and content inputs, build and submit form data to the post create API; navigate to the post page on success.

Add a posts section to the admin dashboard of the full stack MERN blog project, including a posts tab and dash posts component gated by admin access.

Create a versatile get posts API route for the MERN blog project, enabling pagination, filtering, and search by title or content, plus total and last-month post counts.

Fetch admin user posts from the get posts API and render them in the dashboard as a scrollable table with image, title, category, date, and edit/delete actions.

Implement show more in the dashboard posts: add a show more button, track start index, fetch additional posts, append results, and hide the button when fewer than nine remain.

Add delete post functionality to dashboard with an api route and delete post controller that require the post id and user id and verify authentication and admin or owner rights.

Create an admin‑only update post page that fetches the post by id, fills the form, and submits a put request to update the post, then navigates to the updated post.