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: https://www.youtube.com/channel/UCOxWrX5MIdXIeRNaXC3sqIg/join
Buy me a coffee: https://www.buymeacoffee.com/lamadev
Join Lama Dev groups
Facebook: https://www.facebook.com/groups/lamadev
Instagram: https://www.instagram.com/lamawebdev
Discord: https://discord.gg/yKremu4mPr
Twitter: https://twitter.com/lamawebdev
Source Code: https://github.com/safak/youtube2022/tree/react-social-ui
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
source
light and darkmode function is not working is it older version??
hii lama dev can please create web design course play list CSS and HTML
Theres no code in the source code
45:02 i add the hr tag , it creates the space between the divs but it appears on the bottom after courses any help plz?
Can you have a short video or a short document of how you created your app and what are the dependencies of it, please?
does anyone know where is the second part?
How work with localstrorage? Dont work?
At Dark mode?
Your channel is holy grail! π
why my 1st command is not running
Iβm struggling with the git stuff there are some
Missing files on your GitHub
What did you use to make the png icons?
thanks a lot!! (it is an amazing tutorial) => { amazing teacher π }
Hey, can someone post the link to 2nd part of this? can't seem to find anywhere
How do I change to font that is used in the project?
the folder structure has been changed i guess. facing errors starting this project can anyone help me solving these issues? problem basically starts when i start the application using npm start or yarn start
I love your Llama.
i have made darkMode Context in TS but when i toggle the mode the whole page refresh ..any guide ?
<RouterProvider /> is giving error
so nice lama
thank you for your amazing videos
You are Holy π π
Thank you so much πβ¨οΈ
Hey I believe you're missing the part 2 link in your video description. I just want to point that out in case your viewers may miss it
My react skills have really improved thanks to your tutorials. Many thanks for such easy to understand content π
npm start is not working as it says start is missing in the script , what should i do ?
such a great content can you please make a tutorial continuation of this project for adding the feature of DM and notifications and also video upload it will help
does this tutorial only design home and profile page, like other things mentioned in sidebar are not implemented?
thank you for your content. they are very helpful!
hi, can you do this but with redux toolkit and private messages ?
1:30:00
always you are the best π
What a great project! I have learned a lot from this! Thank you so muchβ€
Thanks Vey much π, now i learned responsive Design and understand it .Thanks on All Things i learned from you π₯°ππ«
hey buddy your react-mini repo has changed?
Exellent this tutorial. I'm learning a lot. Grettings from Argentina
thanks for this project, I havet to practice my react knowledge and now I'm so happy to see this project here.
40 : 22
Smoothest way to do a project with minute details
Thanks for your valuable content.
thanks you sirπ
Hello Lama make a GitHub video using a project
After cloning I didn't get the exact file , i use npm start how could I fix I got json package and two files inside src and nothing π’π’π’
Thank you so much sir !
Sir thank u so much it's easy to understand us as a beginner, pls post regularly in one project one week either react or full stack so will also learn and get skilled like u, thank u
thans for protected route