MERN Stack Social Media Application 2021 : React Redux Node

Set up a new React client for the MERN stack, install react-router-dom and Redux packages, and create home, profile, and add post pages with routing.

Develop a reusable default layout with a header, sidebar, and content area using routing. Apply it across pages and enable active-route highlighting in the navigation.

Develop the default layered layout with a header and a collapsible panel controlled by a collapse state, featuring a three-element header and bootstrap-based styling with Monserrat typography.

initialize the project, install express, set up a node and express server, create server.js, and start the backend on port 5000 as the MongoDB connection is covered next.

Learn to set up a MongoDB Atlas connection with Mongoose in a Node.js app, configure database users, and connect to Atlas using Compass for a functional MERN backend.

Create a Mongoose user model with fields for username, password, account flag, followers and following references, profile pic, bio, posts, saved posts, archived posts, and timestamps, and export the model.

Create registration and login APIs using express and mongoose. Implement user routes, import the user model, handle register and login requests, test with Postman, and fetch all users.

Set up Redux in the React frontend to enable state management and API requests with thunk. Build the store, actions, and reducers, wire with provider, and access users via useSelector.

Designs and implements login and registration screens for a MERN stack social media application, using a grid system, entity forms, and routing for responsive authentication.

Build login and register actions in a MERN stack app using axios to post to the backend API, manage loading states and alerts, and connect via a proxy.

Learn to implement alerts, loading indicators, and success or error messages for registration and login, including a loader during processing and storing the user in localStorage.

Learn to implement protected routes in a MERN stack social app by checking localStorage for a user, redirecting to login when absent, and rendering routes when authenticated.

Design the add post screen to collect a description and image, convert the image to base64, preview it, and send both to the backend to store in posts.

Learn how Cloudinary handles cloud-based image storage for MERN apps, including sign-up, login, dashboards, and managing media in folders.

Define the post model with a Mongoose schema, including title, optional description, image, comments (user reference and text), likes, and the posting user, with timestamps.

Learn to implement the add post API by uploading base64 images to a cloud service, then store the image URL in MongoDB via an Express route and post model.

Create and dispatch add post actions to connect front-end posting with back-end storage, detailing the post model fields: description, image, comments, likes, user, and the image upload flow.

Design the homepage post component to display all MongoDB posts using a get all posts API, wired with Redux actions, reducers, and useEffect to fetch data.

Design a post component in a MERN stack app by rendering a poster with user data, profile pic, username, date, image, and description, with flex layouts and moment date formatting.

Learn to implement like and unlike post functionality in a MERN stack app, including a deployed Heroku demo, Redux actions, and storing likes with user id and timestamp.

Learn to implement like and unlike functionality in a MERN stack social app, updating posts without reloading the page, with dynamic heart color changes and useEffect-driven refresh.

this lecture adds a comments feature to posts in the mern stack social app, updating the backend to push user comments and showing a responsive modal with loading states.

Open a comment modal on clicking the comment icon, display the post image and comments, allow text entry, and dispatch actions to add comments with loading and error handling.

Display comments in the mern stack app by populating user details with data fetched from all users to show profile pictures, names, comments, and dates.

Design an all users page in a MERN stack social app, render user cards with profile pictures, usernames, and join dates, and enable follow and unfollow via API requests.

Explain follow and unfollow in a MERN stack app by sending current and receiver user ids to backend, updating follow lists, and wiring API, actions, and producers with loading states.

Implement follow functionality by wiring the follow action and API call, dispatching actions, updating current user id and receiver user id, and rendering follow or unfollow buttons.

Enable unfollow by dispatching an unfollow action and updating both users' followers and following lists via the API, with loading indicators, alerts, and icons, plus completing the search users feature.