Build a Full-Stack MERN Blog Website with Admin Dashboard

Name: Build a Full-Stack MERN Blog Website with Admin Dashboard
Rating: 4.3 (28 reviews)

Build a real full-stack React.js applications with Node.js, Express.js, MongoDB, Mongoose, JWT Authentication, etc.

Created byMd Al Mamun

Last updated 9/2024

English

What you'll learn

Build frontend with React Js, Tailwind CSS, Redux, Redux RTK Quary toolkit
Build backend with Node, Express js, MongoDB, Mongoose, JWT(JSON Web Tokens), bcryptjs and more
Build an entire project from scratch!
Learn how to implement Authentication & Authorization
Make blog page editor feature to create or update blog
Admin dashboard pannel to manage blogs, users, and everything

Course content

7 sections • 67 lectures • 13h 23m total length

Introduction14:53
Before You Get Started4:09
Install node js1:36
Install VS Code on Windows/PC2:38
Install Visual Studio Code on Windows, download from code.visualstudio.com, complete the setup with the installation wizard, and verify the installation by running code --help in the command prompt.
Connect MongoDB and Mongoose12:12
Connect a node backend to MongoDB with Mongoose by installing the Mongoose package, defining a connect method, and using a MongoDB URI; create a hotel rooftop database and log success.

Basic Express Js Server Setup17:41
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.
Dotenv and cors8:14
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.
Create A Blog Model using mongoose9:51
Basic Blog Routes Setup and Testing6:21
Download Postman and Test API5:08
Postman Download Link: https://www.postman.com/downloads/
Post a Blog to Database Collection10:47
Get all Blogs from Database3:32
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.
Search and Category Filtering using query8:41
Get a Single Blog by id7:36
Update a Blog Post6:03
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.
Delete a Blog Post4:26
Get all Related Blogs (exclude the current blog)8:51
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 Model for Comment3:48
Post a New Comment12:19
Get all the Comments Count using countDocuments() method3:03
Modify the blog routes for single post and delete post5:44

Create a User Model4:03
Register as A User9:01
How to Hash Password using bycrpt7:09
Login as a User using email and password11:11
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 JWT token using middleware16:59
Logout a user2:50
Get all Users from DB4:10
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.
Delete a User from db6:37
Update a User Role5:45
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 Model10:25
VerifyToken Middleware for Securing Private Routes12:28
const jwt = require('jsonwebtoken');

const JWT_SECRET = process.env.JWT_SECRET_KEY;

const verifyToken = (req, res, next) =>{
try {
// const token = req.cookies.token;
const token = req.headers.authorization?.split(' ')[1]; // Bearer token
if(!token) {
return res.status(401).send({message: "No token provided"})
}
const decoded = jwt.verify(token, JWT_SECRET);
if(!decoded.userId) {
return res.status(401).send({message: "Invalid token provided"})
}
req.userId = decoded.userId;
req.role = decoded.role;
next();

} catch (error) {
console.error( "Error verify token",error);
res.status(401).send({message: "Invalid token"})
}
}

module.exports = verifyToken
isAdmin Verification when Posting, Updating and Deleting Blog9:28
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.
Upload Blogs data to Mongodb4:46

Setup a React Project using Vite7:30
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.
Install and Configure Tailwind CSS10:11
Customize theme and Colors2:37
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.
React Router DOM setup8:11
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.
Project Structure and Outlet5:53
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.
Create Navbar Component22:09
Make Navbar Mobile Responsive14:29
Hero Section with Swiper js17:57
Create Blog and Search Component13:09
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.
Redux and redux toolkit setup16:22
Fetch Data and Show on Blog card13:50
Single Blog API and Route Setup10:02
Blog Details Content page23:54
Comment Card component10:07
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.
Post A Comment section6:18
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.
part-16-related blog section16:23

Create Login and Register page17:30
Auth Api Setup13:36
Login Funtionality and Get token on Browser Cookies20:16
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.
Modify and Show User profile on Navbar15:18
Create Comment API and Post Comment after Login23:36
Modify Blog API6:48
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.

Create your Admin Dashboard18:24
Admin Navigation Routes and Page setup9:11
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.
Setup Private Routes6:13
Admin Dashboard Page20:54
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.
Blog Graph Chart design using recharts12:12
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.
Add New Blog Post from Dashboard1:02:56
Manage Blog Post21:02
Update Blog Post18:30
Manage User and Update User Role41:29

Requirements

Basic knowledge about React js (Optional)
Basic Tailwind CSS (ex: margin, padding, background color, text color, etc)
NO expert React knowledge or MERN knowledge is required
No backend knowledge required

Description

Are you ready to take your web development skills to the next level? In this course, we'll build a full-stack MERN blog website, a real-world project valued at $250 on Upwork. Whether you're a beginner or an experienced developer, this course will guide you through creating a powerful, feature-rich blog platform from scratch.

What You'll Learn

Frontend Development:

React: Master the fundamentals and advanced concepts of React.
Tailwind CSS: Style your application efficiently with this utility-first CSS framework.
Redux & Redux RTK Query Toolkit: Manage state and handle API requests seamlessly.
Login & Registration: For login and registration will generate token and set it to cookies.
Role-Based Dashboard: We will implement private routing to give access based on user role.

Backend Development:

Node.js & Express.js: Set up a robust backend server.
MongoDB & Mongoose: Work with a NoSQL database and an elegant object data modeling library.
JWT Authentication: Implement secure authentication and authorization.
Bcrypt: Ensure user password security with hashing techniques.
MVC Architecture Pattern: We will follow the Model, the View, and the Controller architecture pattern to structure our backend project

Admin Dashboard:

Admin Panel: Create an admin dashboard to post, manage, and update blogs.
User Management: Control user access and manage overall functionality.

Course Highlights

Real-World Project: Build a project that can be sold or showcased in your portfolio.
Comprehensive Learning: Gain hands-on experience with both frontend and backend technologies.
Step-by-Step Guidance: Follow detailed instructions and best practices.
Admin Functionality: Learn to create and manage an admin panel for complete control over your application.

Why Take This Course?

This course offers a complete, in-depth look at modern web development using the MERN stack. By the end, you'll have a fully functional blog website and the skills to build and manage your own web projects. Plus, you'll gain insights into best practices for both frontend and backend development, making you a versatile and valuable developer in today's job market.

Join us on this exciting journey to become a proficient full-stack developer. Enroll now and start building your professional blog website today!

Who this course is for:

Freshers who want to get hired as an intern or full-time role.
Junior developer who wants to bring his skill to the next level
Using basic React js knowledge who want learn how to build a fullstack app
Advanced React developers who are interested in connecting React apps to Node/ Express

Build a Full-Stack MERN Blog Website with Admin Dashboard

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 35min

Backend Development16 lectures • 2hr 2min

Authentication and Authorization13 lectures • 1hr 45min

Get Started with Frontend Development16 lectures • 3hr 19min

Auth, User Login, Register and Comment Funtionality6 lectures • 1hr 37min

Superb Admin Dashboard9 lectures • 3hr 31min

Project Deployment2 lectures • 34min

Requirements

Description

Who this course is for: