Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Full stack MERN Blog Project: MERN Stack Blog with Dashboard

Name: Full stack MERN Blog Project: MERN Stack Blog with Dashboard
Rating: 4.6 (174 reviews)

Learn full stack MERN Blog project with JWT Firebase and Google OAuth by building a MERN full Stack blog with dashboard

Created byDr. Sahand Ghavidel

Last updated 5/2024

English

What you'll learn

Create a new blog app step by step using the latest MERN stack technologies.
Master email, password, and OAuth authentication with JWT for secure user access.
Learn how to keep user access safe by mastering email, password, and OAuth authentication using JWT.
Allow users to easily create, update, and delete property listings with the ability to perform basic operations like adding, editing, and removing items.
Add a smart search function to your project with filters and sorting choices. Make sure to fine-tune MongoDB queries for better performance.
Create a user-friendly profile management system that includes the ability to upload profile images and securely delete accounts. Implement JWT cookie validatio
Discover how to deploy your MERN blog app on the 'Render' platform, getting it ready to showcase in your portfolio or share it with the public.
Enhance your Reactjs skills by practicing dynamic routing, managing state with Redux Toolkit, and integrating third-party APIs such as Google OAuth.
Keep yourself informed about the latest industry trends by incorporating React Router Dom and Tailwind CSS into your frontend development practices.
Make use of Firebase Storage to efficiently handle images, allowing users to easily upload and manage property images without hassle.

Course content

16 sections • 58 lectures • 18h 46m total length

Overview of the project5:09
Install React.js and Tailwind CSS and create the first template12:04
Install React.js using Vite, install Tailwind CSS, create the first template, configure Tailwind, run the dev server, and push to GitHub.

Create signup API route17:15
Add a middleware and a function to handle errors8:55
Create signup page UI19:35
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 functionality to the sign up page27:05
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.

Add Google OAuth functionality40:38
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 header component with user data12:09
Complete dark mode functionality14:10
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 private5:10
Complete sidebar of the dashboard21:29
Complete profile page UI15:09
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.
Complete user image upload functionality43:24
Add update user API route29:12
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.
Complete update user profile page functionality28:30
Add delete user API route6:57
Complete delete user account functionality17:48
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 signout functionality16:09
Add admin functionality to the user10:36

Complete create a post page UI32:12
Add create a post API route21:33
Complete upload post image functionality18:50
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.
Complete create post functionality14:29
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 posts section to the dashboard8:13
Create get posts API route18:28
Show user posts inside dashboard26:24
Add show more functionality to the posts results of the dashboard7:48
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 the dashboard12:41
Add update post functionality18:57

Requirements

Before diving into this topic, learners should have a basic grasp of JavaScript, including knowledge of variables, functions, and basic syntax.
Having some previous experience with Reactjs would be beneficial, as the course explores advanced React concepts and best practices.
It will be helpful to have a basic understanding of web development concepts such as HTML, CSS, and web architecture.
Learners should feel comfortable using a text editor or integrated development environment (IDE) for writing code.

Description

Get ready for an exciting journey into the world of modern web development! Our course, "Full stack MERN Blog Project: MERN Stack Blog with Dashboard" is designed to guide you from the basics to creating a fully functional MERN (MongoDB, Express.js, React, and Node.js) stack blog.

Whether you're an aspiring full-stack developer, a React enthusiast, or someone looking to expand your web development skills, this course has you covered. Here's what you can expect:

1. Comprehensive MERN Stack Mastery: We start from the basics, guiding you through essential tool installations like React.js and Tailwind CSS for a strong foundation.

2. Advanced Authentication: Learn to implement email and password authentication using JSON Web Tokens (JWT), and seamlessly integrate Google OAuth for a smooth login experience.

3. Real-world CRUD Operations: Master Create, Read, Update, and Delete (CRUD) operations with hands-on experience in managing property listings using MongoDB.

4. User-friendly Features: Enhance user experience by allowing effortless creation and management of property listings, including the ability to upload and modify multiple images.

5. Advanced Search Functionality: Implement a modern search feature that allows users to filter listings by title, apply sorting options, and efficiently limit search results using cutting-edge MongoDB techniques.

6. Admin Dashboard: Implement a modern admin dashboard to see the recent users, comments and posts plus taking a full control over them.

7. Deployment Made Easy: Learn how to deploy your fully functional MERN stack blog application for free using the 'render' platform.

Prerequisites:

A basic understanding of JavaScript and React is recommended, but if you're excited about building a blog app and diving into full-stack development, you're more than ready to get started.

Join us on this immersive journey to master the MERN stack, JWT authentication, Firebase integration, Google OAuth, and more. By the end of the course, you'll not only have a fully functional blog app but also the skills to boost your web development career. Enroll now and let's embark on this exciting learning adventure together!

Who this course is for:

This course is designed for individuals who want to become proficient in the MERN stack and create a blog app starting from the ground up.
This course is tailored for React enthusiasts who are eager to enhance their skills through engaging in complex real-world projects.
For developers looking to broaden their skill set with authentication, Redux, and advanced MongoDB usage, this course is an excellent choice.
This course is ideal for students and hobbyists who are looking for a challenging, hands-on project to elevate their web development expertise.

Full stack MERN Blog Project: MERN Stack Blog with Dashboard

What you'll learn

Explore related topics

Course content

Introduction, preview and Installation2 lectures • 17min

Pages and routes and header component2 lectures • 32min

Create the server and connect to the database4 lectures • 32min

Signing up the users4 lectures • 1hr 13min

Footer section1 lecture • 27min

Signing in users2 lectures • 29min

Redux toolkit and Redux persist2 lectures • 34min

Google OAuth, update header and add dark mode3 lectures • 1hr 7min

Dashboard page10 lectures • 3hr 14min

Create and update a post10 lectures • 3hr

Requirements

Description

Who this course is for: