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

Social media website design using React, HTML, and CSS. React social media app using React Hooks, Context API, Dark Mode, Responsive design.

You are watching the 1st part (Design part)
Watch the 2nd part (Backend): Coming next week

If it is valuable to you, you can support Lama Dev.

Join Lama Dev groups

0:00 Introduction
01:30 Installation
05:30 React Login Page Design
17:00 React Register Page Design
19:40 React Router Dom Tutorial (v6.4)
27:29 React Router Dom Protected Route (Auth)
30:30 Social Media Website Navbar UI Design
39:30 Social Media Website Left Menu UI Design
47:40 CSS Sticky Positioning Tutorial
51:30 Right Menu UI Design
01:01:16 How to Create Dark Mode using React and Sass
01:11:16 React Dark Mode with Context API
01:17:20 Understanding React Context API
01:26:35 Social Media User Story Section UI Design
01:33:00 Social Media User Post UI Design
01:46:15 Social Media User Comments UI Design
01:55:17 Social Media Website User Profile Page UI Design
02:07:24 React Sass Responsive Design Tutorial (CSS media query)
02:16:20 Outro

[coder]

I can't believe you provide such good contents for free. You are the best instructor ever.

[TechBowl]

Amazing project as always! You're the best teacher on the YouTube for JavaScript! Appreciated your great efforts 🙏

[phebos]

My react skills have really improved thanks to your tutorials. Many thanks for such easy to understand content :)

[furqaanqoutes]

Seriously, I've never seen an instructor with a pure hearth that provides useful and real life cases like you. I wish I know you sooner and I also wish we are together or at least same country 😊. Thank you so so so much Safak😁

[DaveFredkove]

This is gold!! 💯 Thank you Lama! I've donated before, now giving more 🤑 love the Themed fn, context provider, sass seems good, and love your speed of explaining and thought process. So helpful!

[bewa]

NOTE: there should only be one <h1> element on a given page as per accessibility requirements - the headings (h1-h6) form the page outline and make it easier for people using assistive technologies like screen readers to navigate the website

[miguelibarra]

These videos low key helped me get a job at one of the top banking firms in the world.
The only thing he is missing is a section of algorithms and data structures, you got the projects for the portfolio.

[vlias]

You are the best teacher I've found on youtube! Thank you!!!

[oscargm]

I really like the part of mixins for mediaQueries.Well done, teacher!

[maczain]

this man is my best youtuber. i do recommend all my friends to watch his videos.

[GaBoyInKy]

There are a lot of talented people out there and you are one of them. Now with that said let me get to the point. Where you fail is by not doing everything from scratch. It's like telling a baby bird about flying but not showing how it's done. Just thought I'd let you know I'm one of the ones that loves creating projects that you teach.

[wailbouguerra]

I hope u get 1M followers by the end of 2023, u are just perfect

[mohitcodeswell]

Ohh This...Channel Lama Dev ! We will remember you after the Job also. Haha...

[nwaformicah]

Great work and the best javascript project, channel on YouTube. We appreciate the great effort you put in to produce this amazing work, thanks. We can't wait to see the back end build with mongodb. We love you and thanks again and again

[artpau]

Fingers crossed for the MERN stack for part 2 :D Would be incredible to have some sort of simple messaging functionality. Thank you so much Lama! <3

[wildingpipes]

Words cannot describe you are a great man 🌹

[xiaotingshao]

the theme part is hard to understand and could not be written by myself at all, and this is the first time to see it in your videos. I am happy to learn some new skills, thanks so much Lama.

[willstansill]

Hey guys just wanted to address an issue that I ran into that took days for me to figure out what was going on. Around 1:13 we implement the dark mode functionality. Everything was going fine until we made the context api file darkModeContext. I discovered after some time that this was due to the fact that on my side files like App and main were jsx files NOT js files. This meant that there was an overlap when I was trying to make the darkModeContext.js work over my App.jsx file. After sometime I tried switching darkModeContext to a jsx file and everything moved forward smoothly. Hope this helps someone!

[Koala_Studio]

Thank you so much sirr!! You helping me learn react from the bottom, so appreciate your dedication.

[ygaaaoo]

thanks for this project, I havet to practice my react knowledge and now I'm so happy to see this project here.