Build a Full-Stack MERN Blog Website with Admin Dashboard

Name: Build a Full-Stack MERN Blog Website with Admin Dashboard
Rating: 4.3 (27 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
Connect MongoDB and Mongoose12:12

Basic Express Js Server Setup17:41
Dotenv and cors8:14
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
Search and Category Filtering using query8:41
Get a Single Blog by id7:36
Update a Blog Post6:03
Delete a Blog Post4:26
Get all Related Blogs (exclude the current blog)8:51
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
Generate JWT token using middleware16:59
Logout a user2:50
Get all Users from DB4:10
Delete a User from db6:37
Update a User Role5:45
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
Upload Blogs data to Mongodb4:46

Setup a React Project using Vite7:30
Install and Configure Tailwind CSS10:11
Customize theme and Colors2:37
React Router DOM setup8:11
Project Structure and Outlet5:53
Create Navbar Component22:09
Make Navbar Mobile Responsive14:29
Hero Section with Swiper js17:57
Create Blog and Search Component13:09
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
Post A Comment section6:18
part-16-related blog section16:23

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: