React Social Media App Design Tutorial | React.js UI Course Full
HTML-код
- Опубликовано: 7 июн 2024
- React.js social media application design tutorial. Create social media project using React functional components and React Hooks.
In the last tutorial, we created a social media Rest API using Node.js. If you didn't watch that video, here you are • Node.js Social Media R... , and in the next part, we will combine that API and this design. To watch the last part: • React Node.js Social M...
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code: github.com/safak/youtube/tree...
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Twitter: / lamawebdev
Discord: / discord
0:00 Introduction
1:38 Installation
8:22 Topbar Component
25:19 Body Components
32:42 Sidebar Component with Material Icons
43:56 Feed (Share, Post Components)
01:12:43 Rightbar Component
01:24:14 Using Dynamic Data
01:38:19 Like Functionality with useState Hook
01:42:21 Profile Page
02:02:47 Login and Register Pages
02:16:42 Future 
Наука
I have searched thousands of tutorials and channels, but when I watch your videos I don't need to keep looking, thanks you (l)
Thats so awesome how you go slowly and type each import starting from the top for the newer devs learning from you. Thank you it means so much!!
Do you know if this project js is 100 percent made in react?
@@user-qk7th4lz1r this UI video is react theres a part 2 which is backend (node mongo)
Since you explained in a detailed and understandable way, I watched and accompanied you until the end without getting bored. Thank you.
Great work Safak! Thank you for putting the hard work. I have been a backend developer for quite some time and now finally trying the full dev scope. These videos are really helpful. Much Appreciated. :)
Do you know if this project js is 100 percent made in react?
Im so exited to finish all your courses. You truly are a gem. Thank you!
Nice UI, nice functionality. The most effective way to learn React is by building real-world apps like this. Learned a lot! Over to the last of the series. Thanks bro!
man loving your projects, I don't have words to even thankyou you are the reason I got the job
Alhamdulliah, Complete UI part and jump backend part! Thanks Lama Dev.
Just finished this part of the section. Everything was explained really well. Loving the journey so far. #thankyou
Man, thank you so, so much. You have the kind of projects that get people hired and I love the flow of your teaching. Really excited to complete this project -- thanks again and please keep up the awesome work.
Do you know if this project js is 100 percent made in react?
@@user-qk7th4lz1r yes its react on the front end, 100%
Şafak bey bu tarz paylaşımlarınız olduğu için gerçekten çok minnettarım. Türkiye'de böyle kapsamlı tutorialler yok. sayende başlangıç seviyesinde olan react bilgimi bu video ile biraz daha ilerlettim. Saygı ve sevgilerimle.
I'm really amazed by the teaching style here... as many tutors just skip this part by copying the navbar code snippet from bootstrap.. ( uptill navbar, i learned so much from it)
thanks alot sir for your efforts in making this available to us.
Love from India!
Have u developed it completely?
Really Sir. It's better than facebook.. I had watched thoroughly the whole series.. You are really fabulous 😍
Thank you so much for sharing your knowledge, I really aprecciate it.The project is awesome! Direct to part III => Greetings from Spain.Good moods for you.
Your teaching style is absolutely incredible! and your hardwork is really appreciated!!
Do you know if this project js is 100 percent made in react?
@@user-qk7th4lz1r The backend is built using express-node and mongodb database, but the frontend is entirely made in React (Uses some icons from mui but thats it)
i worked with this tutorial for around 5 days , each data i want to add more like to the video.. many many thanks , and now I'll start in the therd part
both you and the project are awesome!!!!
Very useful videos. I develop myself here. Thanks to Lama Dev
I love your tutorials!!! I'm building my final capstone and you are my saving grace! I will definitely buy you coffee soon! :) Thanks for all the tricks and amazing step by step that's better than ANY thing I've done besides following Anna Kubow. lol
Could you help me out i am stuck in one error i am unable to import the icons
I will be back ,that Terminator image show how hard he is trying to be creative and still keeping it simple .. thanku so much sir for this awesome piece of art
Awesome. This is so good. Thanks for making this amazing tutorial
What we really like in all your videos is that you do everything with calm and a great patience. If you write the code fast, then you surely explain it. You don't skip and move forward just like other tutorials. ❤️❤️❤️
Very true.You explain everything from scratch . Really Appreciated! 🔥🔥
Do you know if this project js is 100 percent made in react?
You are really experienced, i think it would take me a lot of time to reproduce Facebook like you, but i'm happy that i understood everything you said. It was really cool to see, thank you for the amazing resource.
The tutorial is comprehensive. Wow 💻👍🏽
LAMA DEV, YOU'RE THE GOAT, BROTHER!!!
Many thanks to Lama for the lessons, you explain and write clearly and clearly even to me who am starting to learn English
Thanks a lot , very useful hope you will get 10 thousands like soon on this video 🚀️🔥🚀️🔥🚀️🔥🚀️🔥
Thank you so much lama dev. It's helping a lot
Love this, needed this with material-ui.
exactly
Really...Really "Time is relative"..this was caught my mind and inspire me to listen attentively...it was awesome
I am good at react when creating clean and homogenies component good at handling state but totally shit when it comes to writing my own ui style , this helped me a tone thanks man :D
crisp and clear..amazing
Good job! Your level of pedagogy is just amazing
Do you know if this project js is 100 percent made in react?
Hello friends. Please note that there are some changes. With the release of v5, the names of all related packages were changed from @material-ui/* to @mui/* as part of updated branding.
have you made this project?
@@Ak-fd9kd Hi.
No. The project is outdated. Some of the codes that we see in the tutorial video conflict with the new requirements for writing code.
@@ToyhonaUz bro I want to learn react by building real life projects . can you help me get some good study materials?
@@christ4ever809 To be honest, I spent 1.5 years studying the code from textbooks. Zero result. I'm not saying that you can't learn from textbooks, it just turned out that it was me, the "visualist". It's easier for me to understand and remember what I've seen faster than what I've read.
And Lana Dev is really one of the few who explains the code he wrote super simply and in an accessible language.
I repeat, programmers-coders do not sit still, and every day and hour they develop a programming language. It's just that these video lessons are already outdated, and so, those video lessons that he has "fresh", teach and teach a lot.
With respect...
@@ToyhonaUz alright got it bro ty. I want to learn react js if u have any recommendations from where should I start or where should I fetch from pls let me know. Thankyou!!
Great Job, carry on, thank you.
Currently working as front end developer but after this tutorial I believe soon I will be working as Mern stake and handling so called backend ✌️
I love your simplicity bro, I mean creating such high value content and putting it completely free on internet shows your gratitute and down to earth nature. You videos are extremely great and helpful for the coding community. I hope someday I can contribute for your efforts after getting a job.
Let me tell you, there are channels who are doing great stuffs like you, but most of their content are half done for you type means they hide some details of the application. I don't have problem with length and I like such full detailed tutorials like yours. Hence, Thankyou so much for everything you are doing for the community.
Do you know if this project js is 100 percent made in react?
@@user-qk7th4lz1r Yes, its made in 100% React.
I have completed the video. what an amazing resource. Thank you for the teaching, I learnt so much.
Please what NodeJs version did you use ?
I am having a lot of dependencies issues
you are the best teacher
People like u make RUclips fun ❤️💋
You are really great at ur work. Thanks a bunch for sharing this beautiful craft
Truly awesome your way of approachment for this social media app....
Thanks bro for this wonderful tutorial. Keep making more videos.
thank you so much brother .alot of love and respect from Pakistan .we really appreciate your work .thanks once again from depth of my heart.
Just finished this project ❤️
Thanks for creating this video.Hope you become a famous RUclipsr!
Thank you so much for this great tutorial.
Amazing pace, I'm a beginner learning React and I was able to completely follow along and fill gaps in my knowledge. Thanks for sharing!
Did you get any error at 1:29:58 ,when filtering username and profile picture from dummy data .
@@mindplus4917 I didn't follow along all the way because I hadn't learned dynamic data at the time of posting. What kind of error were you having?
@@mindplus4917 I recommend you check the github link for his files and just compare to yours. That and make sure your folders aren't organized incorrectly or something. Check imports if you're using the dummy file.
More than amazing!!!!!!!!
Excellent you are ma gentle bro, keep it going
Hii lama im from india i love ur content that u provide no one can provide like u ....i have some more content with material ui instead of using css only
awesome tutorial, love you!
This is pure gold.
Great greetings from Tunisia 👍
Great work! Thank you!
one of the best Guy, thanks alot
You are just brilliant sir.
thanks for your awasome video! want to see more : )
great work man!
thank you safak🙏
greate sir your way of teaching is😍😍😍
Thanks very Much , i learned about of things from you 😘🥰
Awesome tutoral, thanks
Amazing really just simple and efficient. The only thing that could have been better is a little bit more explanation like how are you using these shortcuts? Like that CTRL + D multicursor I accidentally found out and a little bit more explanation on things. But it's amazing really how you put this amazing thing together.
I really love this guy. I'm having a first interview as a React Frontend developer next week. Hope everything goes well..
How was your interview
How it went
He forgor 💀
@@johnkucharsky6927 damn. sorry man. I totally forgot about this comment. I had bad result from fundamental questions about Javascript, so I was hired in next company's interview. These tutorials are helpful for real work from company, but for the interview, make sure you study fundamental javascript knowledges something like Closure, Hoisting, Debouncing, Event loop, async functions, etc... and if you are applying for Frontend position, at least practice some Easy Level Questions from Leetcode!
@@connornuggets5450 damn. sorry man. I totally forgot about this comment. I had bad result from fundamental questions about Javascript, so I was hired in next company's interview. These tutorials are helpful for real work from company, but for the interview, make sure you study fundamental javascript knowledges something like Closure, Hoisting, Debouncing, Event loop, async functions, etc... and if you are applying for Frontend position, at least practice some Easy Level Questions from Leetcode!
thank you so much sir it was really helpful :))
You such a amazing Sir..
Outstanding sir❤
thank you ! great work
Thank you! Good one!
How I finished this video after 4 days I would like to thank God first for energy, then I would like to thank myself for the hard work. Remember guys consistency is key.
Thank you so much, sir!!!
great work sir
😊
Thanks for video. I have question about moment where you declared HomeRightbar and ProfileRightbar components inside Righbar component. Isnt its antipattern to declaring component inside component as you did (1:53:34)? All info which I read before says: Should never create a component inside another.
You are great! Thanks
Great course. You should create a discord channel too.
just Waaw< u r tutorial's are great
I like you, GJ mate.
instead of `rfc` shorthand you could use `sfc` to create a stateless functional component.
Great work
great work sir
Thank you for this video
u r amazing bro :) :)
Thank you for all your tutorials. Please can you add a comment section feature to this project. Thank you so much.
very interesting video for beginners
Why do you use and style it that it ends up to be a normal ?
awesome bro thank you
awesome
Elinize, emeğinize sağlık gayet akıcı ve açıklayıcı tebrik ediyorum
thank you bro for this ......
Thank You Lama
great teaching
man, beside the great work you do, I love your jokes! I always end up laughing a lot 😂
👆Send a direct message for help 🆙 ⬆️.
Wonderful
We need more tutorial like javascript + project
Thanks for creating this video.
Your tutorials are amazing Shafak .
👆Send a direct message for help 🆙 ⬆️.
very nice project sir, i learned alot, thank u so much ....
Please what NodeJs version did you use ?
I am having a lot of dependencies issues
Thank you very much!
Thanks for the lessons, it's cool! I look from Russia