Build a Full-Stack Instagram Clone with the MERN Stack (React, Node.js, MongoDB) #2
In this video, we focus on the React side of our Full-Stack Instagram Clone. You’ll learn how to build the user profile UI, manage state, and connect the frontend to our backend API.
We also use React Router to handle dynamic profile routes and navigation within the app. You’ll see how to fetch user data based on route parameters, display posts, and structure a real-world React profile page using best practices.
We’ll cover fetching user data, displaying posts, handling API requests, and structuring the profile page in a real-world React application. This video is part of a full-stack series using React, Node.js, and MongoDB.
00:00 – Introduction
00:20 – Setting Up the project
01:53 – Setting UserProfile Route
02:37 – Creating UserProfile Component
04:05 – Creating data shape types for accepting backend response
06:26 – Fetching the data from the backend
09:34 - Telegram and Blog Promotion
09:54 – Creating Header.tsx for user profile details
16:05 – Creating User Gallery Component
18:55 – Styling
Source Code:https://github.com/theCodingHeaven/in...
My Blog: https://thecodingheaven.com/posts/ins...
Telegram Channel: https://t.me/learnatcodingheaven