MERN Stack Social Media Blog Posting Application (2022)

Name: MERN Stack Social Media Blog Posting Application (2022)
Rating: 4.8 (8 reviews)

Learn How to Build Social Media Blog Posting Application With MERN Stack

Created byIndian Coders

Last updated 4/2022

English

What you'll learn

Learn to build Blog Application With MERN Stack
Use multiple collections of MongoDB
Create Auto Login and Register/ Login / Logout Functionality
Learn to make a complete Blog Posting App Of Multiple Users
Create Modern UI UX Blog App

Course content

7 sections • 46 lectures • 3h 48m total length

Introduction1:27
Introduces building a MERN stack social media blog app with login, signup, redux authentication, and MongoDB with Mongoose; manage users and blocks with create, edit, delete, and view all blocks.
Introduction To MERN Stack and Project2:34

Introduction0:05
Creating Blog Model Schema2:13
Creating Route For Getting All Blogs From Database3:54
Creating Add Blog To Database Functionality4:02
Implement add blog to database functionality in a MERN stack app by handling post /add requests to create and save a blog with title, description, image, and user.
Creating Blogs Update Functionality5:47
Creating Get Blog By ID Functionality2:32
Creating Blog Delete Functionality3:21
Wrapping Up0:05

Installing React App and Dependencies4:47
Creating Header Of Blog Application7:16
Build a blog app header with material UI, using app bar, toolbar, and typography, add login and sign-up buttons, and place controls on the right with gradient styling.
Adding React Router To Application15:03
Enable routing in the application by integrating react-router-dom with browser router, creating login and signup flows, and wiring routes for blocks, user blocks, and block details.
Adding Redux For Authentication State8:16
Creating Login Page With Dynamic Form handling14:54
Sending Login Request to backend5:23
Modifying Login Request For Signup Functionality and Updating Redux State6:39
Fetching and displaying All Blogs From Database12:41
Fetching Logged In User's Blogs9:25
Fetch the logged-in user's blogs by retrieving the user id from local storage and using an axios get request to fetch the user's blocks in a useEffect.
Creating Add Blogs To Database Functionality From Frontend18:24
Adding Edit and Delete Icons For Logged In User's Blogs7:05
Fetching Blog's Details From ID in URL and Setting Form Data6:44
Fetch blog details by id from the url using a detail component, then populate and update the blog form with the retrieved data using useEffect and axios.
Sending Request To Update Blog3:58
Update a blog post by sending a put request via axios to localhost:5000/api/blog/update, including id, title, and description, while removing image field, handling errors, and navigating back to my blocks.
Deleting Blog On Delete Icon's Click4:26
Define a delete workflow for blog posts by wiring a delete icon to a handle delete function, issuing an axios delete request to the server, updating routes and UI.
Summary0:04

Fixing Redirecting Of Routes2:54
Fixing Card Style with Icon colors and Description1:30
Adding Protected Routes1:32
Implement protected routes by wrapping content in a login check and redirecting unauthenticated users. Render blocks when the user is logged in to safeguard content and guide users to login.
Changing Font with Google Fonts (Roboto) and Generating MaterialUI styles6:42
Fixing Auto Login State of User3:14
Implement auto login by checking local storage for the user id on app render with useEffect, dispatching login, and clearing on logout to persist login across refreshes.
Wrapping Up0:02

Requirements

Basic React and JavaScript Knowledge Required

Description

Hi, Welcome

Yes, you have read it right if you are here reading this description. This is a Blog Posting Application With MERN Stack In which the user will be able to login/signup and he/she will be able to post his / her blogs and will be able to view blogs of other users as well same like Facebook / Twitter functionality

If you are a complete beginner, then this course is perfect for you because I have explained every single step before moving ahead. And trust me you will learn a lot of things.

And if you are already an intermediate MERN Developer, this will help you to grow your skills with creating Social Media Blog App with MERN Full Stack.

What You will learn

How to Build a Blog Posting Application
How to Make a Responsive Blog App
How to build a Backend For a Blog Posting Application
How to encrypt a user's password before storing it in a database
How to Build Frontend with Blogs and Add Blog / Login Signup Functionality
How to Build a Modern UI UX Blog App
How to make the relation between 2 collections of MongoDB

We will use MERN Stack With this

MongoDB: MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License.

ExpressJS: Express.js, or simply Express, is a back-end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

ReactJS: React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications

NodeJS: Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

See you in the course.

Hurry

Who this course is for:

Beginner ReactJs Developers who wants to Learn MERN Full Stack With Creating Blog Application

MERN Stack Social Media Blog Posting Application (2022)

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 4min

Building Backend For Blogs App8 lectures • 42min

Building Blogs Backend8 lectures • 22min

Adding Relation Between User and Blogs5 lectures • 19min

Building Blog Posting Frontend15 lectures • 2hr 5min

Optimizations and Basic Fixes6 lectures • 16min

Summary and Thank You2 lectures • 1min

Requirements

Description

Who this course is for: