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

Подписаться 304 тыс.

Просмотров 180 тыс.

50% 1

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: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
Twitter: / lamawebdev
Source Code: github.com/safak/youtube2022/...
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

Наука

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 220

@coder5336 Год назад

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

@sirjoeyt8601 Год назад

Yeah . I agree.

@TechBowl Год назад

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

@dhannunakhuwa2693 Год назад

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😁

@phebos2228 9 месяцев назад

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

@miguelibarra7328 Год назад

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.

@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!

@griffinkirkland9087 Год назад

Is this project on React V18.2?

@nwaformicah433 Год назад

Great work and the best javascript project, channel on RU-vid. 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

@vlias500 Год назад

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

@oscargm1979 Год назад

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.

@artpau3025 Год назад

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!

@ShubhamSingh-gk8vp Год назад

Another amazing video!! I have learnt so much from your videos!! ❤️❤️

@eQ-13 Год назад

This is beautiful. You are an amazing teacher.

@thedevnoteyt Год назад

Thanks for these awesome free tutorials and thanks for making this design responsive, one small request, please make all the future react ui designs responsive ❤️

@pabz8340 Год назад

this is what i'm waiting for, thank you so much sensei

@wildingpipes5653 Год назад

Words cannot describe you are a great man 🌹

@ygaaaoo Год назад

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

@Koala_Studio14 2 месяца назад

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

@wailbouguerra5381 Год назад

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

@xiaotingshao3689 Год назад

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.

@ancutacosovanu6304 Год назад

You are the best instructor ever!!!!!

@user-yf8ns8mp8i 3 месяца назад

I will watch this later. It seems interesting. Liked and subscribed 😊

@shahidafridi3403 Год назад

Awesome bro.. i am a big fan of your work...keep doing....

@FitNess_Ph Год назад

I love your content i recommend this to my friends

@techhouse182 Год назад

Excellent Project learned alot....need more projects on react, node js and MySQl stack projects. Waiting for that 👌👌

@marvii13 Год назад

may god bless you, you're an amazing teacher

@marianojimenez990 Год назад

Exellent this tutorial. I'm learning a lot. Grettings from Argentina

@dayojaiyed7721 Год назад

I can't wait to get started with this. Still working on the blog app 💯💯

@neelkashyap82 Год назад

Smoothest way to do a project with minute details

@AtiqueRahmanatik 8 месяцев назад

Your channel is holy grail! 🙏

@GaBoyInKy 2 месяца назад

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.

@Borzokhan 9 месяцев назад

so nice lama thank you for your amazing videos

@mohitcodeswell Год назад

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

@pandereta6932 Год назад

Amazing content Lama! can you please make it using the PERN stack? there is almost no content about that, it would be awesome!

@taihaycode Год назад

Thank you so much for your tutorial, very very ease to understand

@shravzzv Год назад

lama, awesome video; but effects are escape hatches [see the new react beta docs] that should be used to control systems outside of React. localStorage doesn't need 'stepping out' of react.

@rchbiy 11 месяцев назад

What a great project! I have learned a lot from this! Thank you so much❤

@giorgim3071 10 месяцев назад

thank you for your content. they are very helpful!

@FelipeSantos-ce4hd Год назад

Amazing, Lama. Thanks a Lot. You are a great teacher. Are you going to use react and MySQL for the backend?

@jamjam3337 Год назад

Beautiful project! Thank you Lama💪👏👏👏

@Lamadev01_for_help_telgraam_me Год назад

👆Send a direct message for help 🆙 ⬆️

@nickleydeonyango1704 5 дней назад

Nice tutorial. very informative and helpful

@mayursutar4214 Год назад

another good project ...nice work ...keep it up

@user-mi2zv3lx4q Год назад

Thanks for your valuable content.

@wilsonmela6343 Год назад

Amazing, thank you.

@owoahenejoseph3094 Год назад

Amazing project again.

@abuhossain4274 Год назад

one of the best content!!

@darshmostafa6138 11 месяцев назад

Thanks Vey much 😘, now i learned responsive Design and understand it .Thanks on All Things i learned from you 🥰😘💫

@vinaypatil8009 Год назад

You are legend, god or best teacher on RU-vid because your projects are on different level and you explain also everything. Thank you so much for providing this amazing content and knowledge.

@xcrxwadda8287 Год назад

Anyone developer who want to bring his skills to the next level , I recommend him to this community and channel

@hamemigafsi6953 10 месяцев назад

always you are the best 😍

@be2wa Год назад

NOTE: there should only be one 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

@bhirajk9450 Год назад

Lama♥️♥️♥️best tutr in YT

@juneldelacuadra5973 Год назад

I can't believe this is free!!! Wow!!! Just wow!

@sdfsfsfd437 Год назад

Awesome! 💯🤗

@xavier-wz4on Год назад

I love it, it worked. will you make a tutorial to install react-admin?

@talebulkawser5865 Год назад

Thank you good sir!🙏🏻🙏🏻🙏🏻🙏🏻

@WillSmith-qt7me Год назад

Would be nice to see Firebase for part 2. Thanks!

@willstansill9161 5 месяцев назад

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!

@rasengan720 3 месяца назад

how did you fix the error that happens on the scss side of things? I enabled the @mixin function in navbar.scss and it just removes all the css associated with the navbar for me

@sagorray00 Год назад

Hello sir, Please use rem for future projects. And millions of thank you for sharing awesome projects with us.

@n45ko Год назад

Well done, I'm inspired by your tutorial and would like to thank you for the great effort you put in, keep up the good work ;) 👏

@thuanbiro Год назад

I hope I finish your previous project quickly so I can work on this one right away.

@brilliantatosam6882 Год назад

Awesome 💯

@thuanho8164 Год назад

Thank you so much sir !

@grinfluencers 8 месяцев назад

thanks a lot!! (it is an amazing tutorial) => { amazing teacher :-) }

@yolamontalvan9502 9 месяцев назад

I love your Llama.

@mohamedhesham9192 Год назад

dude you are amazing

@venkatchalam6385 Год назад

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

@priyanka_aggarwal Год назад

Have you used the latest react version or the one used in this video. If you are using latest, are you facing any issue ?

@obiedajehad6601 11 месяцев назад

@@priyanka_aggarwal I'm using the latest version without issues

@priyanka_aggarwal 11 месяцев назад

@@obiedajehad6601 thankyou for your response.

@talebulkawser5865 Год назад

Just a request. But can you please add messaging functionality to this app as well? Ik there's already a tutorial on that but this app is close to perfect. Adding the messaging functionality willmake it god tier

@oshimanathunga3054 9 месяцев назад

Thank you so much 👍✨️

@yvzblgcyln Год назад

just amazing 🔥🔥

@Lamadev01_for_help_telgraam_me Год назад

👆Send a direct message for help 🆙 ⬆️

@prakashsubedi9980 Год назад

Amazing tutorial. I just wanted to know that, when the currentUser = true, and if you do "localhost:3000/login" ... will it redirect to the home page?

@hassanmehmood8711 Год назад

Please upload projects with typescript

@jesustzinon Год назад

Can you add admin and user roles for the api part? also there is this payloadcms maybe you should try it on a next video, or maybe trying to get a sponsor from them, there arent many tutorials on youtube, at least on the authentication and stuff side

@megatronskneecap Год назад

Wow! Now add backend to it!

@Leo-es3fq Год назад

Awesome

@faruqtechnology461 10 месяцев назад

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

@tharindumandusanka7708 Год назад

You are the best❤❤❤❤

@ucthainguyen289 Год назад

Please make a video for backend also. Thanks master Lama!!

@kishankharb420 Год назад

nice sir for this project

@user-ms2jf1eg3j Год назад

What node -v and nmp -v you have? I am have something like: 10 vulnerabilities (9 high, 1 critical), after npm install

@biniteshome1403 Год назад

Oh my God you are so awesome

@c_sahilshaikh559 11 месяцев назад

hey buddy your react-mini repo has changed?

@kishankharb420 Год назад

this video is helpful for beggineer

@user-jl7ys2cv9t Год назад

Hai its a great work .can you just tell on what platform you implemented this project i tried with visual studio code but could'nt install git clone .can u help me ?

@sanatani_0228 10 месяцев назад

does this tutorial only design home and profile page, like other things mentioned in sidebar are not implemented?

@phongnguyenphamthanh3106 7 месяцев назад

Can you have a short video or a short document of how you created your app and what are the dependencies of it, please?

@aleksandarbisevac3129 Год назад

Thank you.

@pancakegenial Год назад

Incredible work, thank you ! I got a question, do you know what kind of solution we can use to store pictures ? The cheapest solution

@Arich.shorts Год назад

google drive

@bearddev9974 Год назад

Nice 👍

@Alireza-lc8vj Год назад

wow it's great

@user-zo8bz1eu5d 2 месяца назад

Thank you sir

@sachinporwal4275 Год назад

Good One

@cat-developer 9 месяцев назад

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

@naziknassar Год назад

Thanks for this great video, can you show us how to deploy this project in your next video?

@andre-wv9eg Год назад

thanks you sir💖

@DTUSEM Год назад

Make videos on architecture to follow while doing development using react

@Jack-fw3wt Год назад

I wanna ask u that if e switch mode btw dark and light, it will make page reload content even img even content doesn't change. Is there have any way to prevent it ?