The MERN Stack Blogify Project: Web Development



Harnessing MongoDB, Express.js, React.js, and Node.js for Powerful Web Applications

What you will learn

User Authentication: Learn how to implement secure user registration and login processes using strategies like password hashing and JSON Web Tokens.

File Upload: Understand how to allow users to upload files like profile pictures or post attachments securely and efficiently.

User Relationships: Learn to implement social features such as following and unfollowing other users

User Blocking: Implement a blocking and unblocking system, allowing users to manage who can interact with them or see their content.

Post Scheduling: Gain knowledge on how to implement post scheduling, enabling users to create content that will be automatically published at a specified future

User Profile: Learn to create a user profile system where users can view and manage their personal information, posts, and social interactions.

Password Reset: Understand the process of securely implementing password reset functionality, allowing users to recover their accounts when they forget

Forgot Password: Implement a secure system to recover forgotten passwords, which involves sending recovery emails to users’ registered email addresses.

Account Verification: Learn how to implement a user verification system using technologies like email verification to ensure that users have valid email address

Profile Update: Enable users to update their profile information such as username, email, profile picture, and password.

Hide Posts from Blocked Users: Learn how to modify your application’s visibility rules to hide a user’s posts from those they have blocked.

Hide Scheduled Posts: Understand how to effectively hide scheduled posts from your application’s feed until their scheduled publishing time arrives.

Pagination: Gain a practical understanding of how to implement pagination in a web application. Learn how to break down your data into manageable pieces

Filtering: Understand the essential techniques of implementing data filtering.

Searching: Master the process of integrating a robust search functionality into your web application.

Description

Course Title: The MERN Stack Blogify Project: Full Web Development Unleashed

Embark on a journey to become a proficient full-stack developer with our comprehensive MERN Blogify Project Course. This course leverages the power of MongoDB, Express.js, React.js, and Node.js (MERN) to guide you in creating a fully-featured blogging platform from scratch.

Throughout this immersive learning experience, you’ll gain hands-on expertise in developing and integrating essential web application features using cutting-edge technologies. These include user authentication, file uploading, social features such as following and unfollowing users, a user blocking system, and post scheduling capabilities.

You’ll learn how to build robust user profiles, complete with the ability to update profile information and manage user-to-user relationships. Dive deep into user experience considerations and data security as you implement password reset and account verification functionalities.

‘;
}});



In line with the ever-evolving digital world, the course also covers more nuanced features like hiding posts from blocked users and concealing scheduled posts until the predetermined publishing time arrives.

This course not only equips you with the necessary coding skills but also trains you in best practices for development, teaching you to write efficient, maintainable code. You’ll learn to troubleshoot and debug your application effectively, handle errors, and understand the intricacies of deploying a MERN stack application to the cloud.

By the end of this course, you will have built a fully-functional, real-world blogging platform and be armed with the skills to create and deploy your own web applications using the MERN stack. Whether you’re an aspiring web developer or looking to enhance your full-stack skills, this course is designed to propel you toward your career goals.

Join us in the MERN Blogify Project Course and harness the power of full-stack development to bring your innovative ideas to life!

LIVE DEMO

Project Features
Project Live Demo
Live Link Preview

HOW TO TAKE THIS COURSE & RESOURCES || IMPORTANT !!

How to take this course

GETTING STARTED || BACKEND

Setting Up The Environment
VSCODE Customisation
Folder Structure
MVC Explained
Create Express Server
Final Source Codes

DATA MODELLING-BACKEND

Data Structure
Creating Github Branch for data modelling
User Data Modelling
Post Data Modelling
Category And Comment Modelling

AUTHENTICATION & AUTHORISATION-BACKEND

Authentication & Authorisation Overview
How JSON WEB TOKEN (JWT) Works
Exploring More About JWT
Dummy User Registration Controller
Installing Postman
Connect to MongoDB Database
Create MongoDB Connection String
Installing Nodemon and VSCODE MongoDB Extension
User Registration
Hash User Password
Login User
Generate Token
Dummy Profile Controller
Is Login Middleware Logic Implementation
Get Token From Request Header
Verify Token
Save User into Request Object
Get User Profile Controller Improved

ERROR HANDLING-BACKEND?

Global Error Handler Middleware
Catch Async Errors
Refactored Error Handlers

POST CATEGORIES API-BACKEND

Create Category and Modified isLogin Middleware
Fetch All Categories
Delete and Update Category

POSTMAN CONFIGURATIONS-BACKEND

Environment In Postman
Environment Variables in NodeJS(dotenv)

POST AND COMMENT CONTROLLER-BACKEND

Create Post Controller
Delete, Update Fetch Single And All Post Controllers
Create Comment Controller and Populate Post Comments
Update And Delete Comment

BLOCKING AND UNBLOCKING, FOLLOWING UNFOLLOWING CONTROLLERS-BACKEND

Blocking User Controller
User Blocking Router and Fixed User Blocking Bug
Unblocking User Controller
Who view My Profile Controller
User Following Logic
User Following Controller
Fixed Following Controller
Unfollow User Controller

FORGOT AND PASSWORD RESET-BACKEND

Password Reset Logic
Email Sending Using Nodemailer utility Function
App Passowrd for Gmail Account
Forgot Password Controller
Trying Forgot Password Controller
Forgot Password
Password Reset Controller

ACCOUNT VERIFICATION || BACKEND

Account Verification Logic
Account Verification Controller
Account Verification Route
Account Verification
Is Account Verified Middleware

POST LIKES AND DISLIKES CONTROLLERS || BACKEND

Post Like Controller
Post Like Route
Disliking a Post Controller

POST CLAPS AND SCHEDULING CONTROLLERS || BACKEND

Post Claps controller
Schedule Post Controller
Schedule Post Route

HIDING AND SHOWING POSTS

Hiding Scheduled and Hide Posts if Login User is Blocked Logic
Hiding Posts From Blocked Users Controller
Hide Scheduled Posts Controller
Populating MongoDB IDs
Fixed Profile Controller

FILE UPLOAD CONTROLLER || BACKEND

File Upload Middleware
Create Post With Image
Profile Image Upload

USER AUTHENTICATION & AUTHORISATION || FRONTEND

Create React Application
Install Tailwindcss
Configure React Router DOM
Rendering HomePage Component
Render Login Form
Install Redux Toolkit and Create Login Action
User Login Action Slice and Reducer
Configure Redux Store and Install DevTool Extension
Dispatch Login Action
Fixed Cors Error
Save Login User Into LocalStorage
Error-Success-Loading Components
Display Loading, Error, and Success Message Upon Login
Redirect User After Login And Display User Profile Component
Display Public Navbar
Display Private Navbar
Conditionally Display Navbar
Logout User
Protected Component
Modified User Registration API
Register User
Display Loading Error Upon Registration
Global Action Logic
Avoiding The Annoying Popups

WORKING ON POST || FRONTEND

Fetch Public Posts Action
Fetch Public Posts
Display Post Categories in React Select Component
Fetch All Categories
Handle Image Form Input
Dispatch Action To Create Post
Display Error, Loading, and Success when creating Post
Client Side Post Validation
Private Navbar Profile Link and Post Details Component
Post Details Action
Post Statistics
Post Days Ago and Reading Time
Displaying Private Posts
Prevent User From Deleting Any Post-Backend
Prevent User From Deleting Any Post-Frontend
Post Deleting Frontend
Change Logo And Avoid Success Popups for post
Post Details Page Improved
Private Posts Improved
Render Post Update Form
Update Post Endpoint To Support Image Update
Avoid Popups when Creating Post
Update Post Frontend
Liking of a Post
Disliking Post
Display Post Clapping Icon and Modified Post API
Avoid Reloading when a post is Liked or Disliked
Post Clapping
Post Views Controller-Backend
Post Views Count Frontend

POST COMMENTS || FRONTEND

Rendering Comment Form
Comment Action
Dispatch Comment Action
Display Comment Lists
Reload After comment is Created

USER PROFILE || FRONTEND

Public Profile Controller
Render User Profile Component and Modified Post Views Controller
Modified Public Profile Controller
User Public Profile Action
Display User Public Profile Data
Display User’s Posts

USER BLOCKING & UNBLOCKING || FRONTEND

User Blocking Another User Action
User UnBlocking Another User
Conditionally showing block and unblock user button Logic
User Private Profile
Conditionally showing block and unblock user button
Trying Blocking and Unblocking User Logic

FOLLOWING & UNFOLLOWING

Following and Unfollowing User
Private User Profile Details
Display User followers and Posts

PROFILE & COVER IMAGE UPLOAD || FRONTEND

Profile and Cover Image Upload Controller – Backend
Profile and Cover Image Upload Actions
Upload User Profile Image
Upload User Cover Image
Fixed Profile Picture on the Navbar

USER ACCOUNT VERIFICATION || FRONTEND

Check if user account is verified
Show warning If User Account is Not Verified
Dispatch Account Verification Action
Avoid Automatically Logging Out And Display Success when email is sent
Account Verification Logic
Rendering Account Verification Component
Dispatch Account Verification Action

PASSWORD RESET & FORGOT PASSWORD || FRONTEND

Password Reset Action
Dispatch Password Reset Action
Password Reset Error And Success Message
Render Password Reset Form
Dispatch Action To Reset Password
Password Reset Loading, Error & Success

USER PROFILE UPDATE || FRONTEND

Update User Profile API-Backend
Render Update User Profile Component
Dispatch Action To Update User Profile
Display Profile Update Loading, Error & Success

PAGINATION, FILTERING AND SEARCHING OF POST || FRONTEND

Filter Post By Category
Search Post by Title – Backend
Post Pagination Backend
Post Pagination Frontend
Searching Functionality Frontend
Filtering Post By Category
Render Schedule Post Component
Dispatch Action To Schedule Post

FURTHER RESOURCES

Further resources

WHAT NEXT?

What’s next?

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO

Check Today's 30+ Free Courses on Telegram!

X