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?
