React Social Media App Design | Dark/Light Mode & Responsive & HTML CSS

---

Hey there! 👋 This is a detailed, step-by-step summary of the YouTube video, including all the key points, learnable content, and exact quotes (translated to English) from the subtitles. Let's walk through the process of building a beautiful, responsive social media app in React, with dark/light mode and modern design features. Ready? Let's dive in! 🚀

---

1. Project Overview & Features

The video starts with an exciting introduction:

"Hello friends, today we are gonna design this beautiful social media application using React, HTML, and CSS."

Key Features:

• Home Page with sticky navbar, left/right menus, posts, and user stories.
• Dark Mode:

  "We are gonna implement this dark mode functionality. Even if you refresh the page, it will be remembered because we are going to store this information in the local storage."

• Profile Page:

  "There is a profile page where we can see the user information and their posts."

• Login & Register Pages:

  "We will design this login page and register page."

• Responsive Design:

  "This project will be responsive, so you will learn how to create responsive components using React and SASS."

• API Integration (Next Video):

  "In the next video, we will be able to log in and register using a backend server and we will fetch all this data from our API."

Encouragement:

"If you don't want to miss the next tutorial, you can subscribe now because I will create it as soon as possible."

---

2. Project Setup

Quick Start with GitHub:

• Clone the starter repo:

  "We are going to be using our GitHub repository because I want to get rid of unnecessary files. It's going to be a quick start."

• Use a single branch for simplicity.
• Install dependencies with npm install or yarn.

Project Structure:

• Pages: login, register, home, user profile
• Each page/component has its own .jsx and .scss files.
• SASS is used for easier styling:

  "We are going to be using SASS because it's really easy to handle class names."

---

3. Login & Register Pages

Login Page Layout

• Two-part Card: Left (image, title, description, register button), Right (login form).
• Flexbox for layout:

  "We are going to be using flexbox and separate this div into two pieces."

• SASS Parent Selectors:

  "You don't have to give specific class names for those elements. We are just writing directly inside parents, it's that easy."

Styling Highlights:

• Centered with display: flex; align-items: center; justify-content: center;
• Card with border-radius, background image, and linear gradient overlay.
• Responsive font sizes and button styles.

Register Page

• Similar to login, but with more inputs (email, name).
• Flex Direction Reversed for layout:

  "Only difference is there are more inputs here, and our background image is different, and also form is on the left side and this background on the right side."

---

4. Routing with React Router

• Install React Router DOM.
• BrowserRouter for navigation.
• Routes for /login, /register, /home, /profile/:id.
• Navigation Links:

  "When we click here, it's going to login page, and if I click here, it's going to register page."

---

5. Layout & Common Components

• Layout Component:

  "We can create any component here, any specific component, and we can write our common elements here. In our case, it's going to be navbar, left bar, and right bar."

• Outlet for variable content (home/profile).
• Don't Repeat Yourself:

  "Writing those three components for each page is not a good idea. We shouldn't repeat ourselves."

---

6. Protected Routes (Authentication)

• Fake Auth for Now:

  "If you are not logged in, we shouldn't see this page... it's gonna redirect us immediately to login page."

• ProtectedRoute Component:

  "If there is no current user, it means we are not logged in, so return navigate to login page. If there is a current user, return just children."

---

7. Navbar, Left Bar, Right Bar

Navbar

• Logo (links to home), icons (using MUI), search bar, user info.
• Flexbox for layout.
• Sticky Positioning:

  "As you can see, our left and right bar is sticky. Also the navbar, when I scroll, they are staying in a certain place."

Left Bar

• User Info, Menu Items (with images/icons), Shortcuts, Other Menus.
• Scrollable with hidden scrollbar:

  "If I scroll here, as you can see, it's not moving, but if I scroll here, perfect, we can see our other items. But this scroll bar looks a little bit ugly. I don't want to see that."

Right Bar

• Suggestions, Latest Activities, Online Friends (with green dot).
• Box Shadow for card effect:

  "It's not a border, it's a shadow. Just Google for box shadow generator and find any website."

---

8. Dark/Light Mode with Context API

• Context API for global dark mode state.
• Local Storage persistence:

  "Even if I refresh the page, it's gonna stay as a dark. It means we are gonna store this dark mode variable and it's going to be our local storage."

• Theme Variables in SASS for easy color switching.
• Toggle Button in Navbar:

  "When I click on this button, our items are changing and if I make this dark color, even if I refresh the page, it's gonna remain like that."

• Dynamic Icon:

  "If I click here, as you can see, our icon is changing."

---

9. Authentication Context

• Context API for user authentication.
• Current User stored in local storage as a stringified object.
• Login Function updates user and triggers redirect.
• Usage in Navbar/Left Bar for displaying user info.

---

10. Stories & Posts Components

Stories

• Horizontal Scroll of user stories.
• Add Story Button for current user.
• Positioning for overlaying username and add button.

Posts

• Dummy Data for now.
• Post Component: User info, content (text/image), interaction buttons (like, comment, share).
• Like Button toggles icon and color.
• Comments Component:

  "When I click on these comments, we are going to show comments component here."

• Add Comment input for current user.

---

11. Profile Page

• Cover Image, Profile Picture, User Info (location, website, follow button).
• Social Links with icons.
• Posts listed below profile info.
• Responsive Layout for different screen sizes.

---

12. Responsive Design

• Media Queries in SASS for mobile/tablet breakpoints.
• Hide/Show Components based on screen size:

  "If it's a mobile screen, it's gonna be display none."

• Adjust Layouts (e.g., stories become circles, left/right bars hidden on mobile).
• Flex Wrap for profile page on small screens.

---

13. Final Words & Next Steps

• API Integration Coming Next:

  "In the next tutorial, we are going to fetch all these data from our DB and it's going to be a dynamic app."

• Encouragement:

  "If you learned something new today, please like the video. You can support by using the link in the description below or by joining the channel. Don't forget to follow Lama Dev social media accounts. I hope I will see you in the next tutorial. Goodbye!"

---

Summary Table of Key Concepts

---

Memorable Quotes

• "It's that easy, guys!"
• "If you didn't understand, just watch it again and you are gonna understand better."
• "Don't forget, in the next tutorial we are going to fetch all these data from our DB and it's going to be a dynamic app."

---

Conclusion

This video is a fantastic hands-on guide for building a modern, responsive social media app in React, with dark/light mode, authentication, and clean, reusable components. The instructor's step-by-step approach, use of exact quotes, and clear explanations make it easy to follow and learn best practices for real-world React projects.

If you want to level up your React and CSS skills, this is a must-watch!
👍 Like the video, subscribe, and stay tuned for the next part!

---

Happy coding! 💻✨