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!
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.
@@anindiansquirrel 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!!
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.
@@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!
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
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!
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. ❤️❤️❤️
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. :)
Ş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.
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.
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
@@UlugbekYoqubjanov-t8t 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)
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.
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.
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
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.
@@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.
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
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.
Your videos are so greate im learning so many new things but I didnt understand one thing why use margins and wrapper if we have `display:flex, gap and box-sizing: border-box` properties. And you are greate inspiration to me.
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.
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
At 1:07:34 how are you able to reach the image source using just "assets/like.png" ? I don't see any .env file to change the absolute path behavior, and it looks like the full relative path to get from Post.jsx to like.png would be "../../../public/assets/like.png" ?
Ah, figured out and answering here just in case anyone else comes across the same question. Since index.html is the page that is running these JSX scripts, the relative path starts from the location of index.html, not Post.jsx.
How did you solve the problem at 1:26:15, I have this error: ERROR Cannot read properties of undefined (reading 'date') TypeError: Cannot read properties of undefined (reading 'date')
Why do we not need whole assets path when we are in 'topbar' folder and not in 'public'? Can someone please help me with the query? Thanks in advance! at 15:22 in video
Hi, first time with LamaDev, he mentions doing a video before this - does any have a link to the video we should have done before starting this, i found the one that comes after this, but wondering what the first one is? Thanks!
I'm doing all 4 of these in order and I therefore assumed that we would be working out of the same folder as the previous video in the playlist so I tried to do the create-react-app command at the beginning of this one on that folder and I got the error "The directory . contains files that could conflict:" because the REST api folder already has a package.json etc etc. The rest API in the previous video is a different folder. So if you have that error, make sure to do this tutorial in a new folder. He says here that LATER we'll connect the two.
This is amazing, i've been following this tutorial, already did first part, any idea how should we proceed if we wanted all of this to be responsive ? :D
Thank you for the tut. When I try to download the source file, it does not include a public or src folder, it has a .github folder which only has one file in it.
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?
@@UlugbekYoqubjanov-t8t this UI video is react theres a part 2 which is backend (node mongo)
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?
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?
@@anindiansquirrel 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!!
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.
Im so exited to finish all your courses. You truly are a gem. Thank you!
man loving your projects, I don't have words to even thankyou you are the reason I got the job
.b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.
Alhamdulliah, Complete UI part and jump backend part! Thanks Lama Dev.
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!
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
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!
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?
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?
Really Sir. It's better than facebook.. I had watched thoroughly the whole series.. You are really fabulous 😍
Get a life
Ş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.
Really...Really "Time is relative"..this was caught my mind and inspire me to listen attentively...it was awesome
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.
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
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?
@@UlugbekYoqubjanov-t8t 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)
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?
@@UlugbekYoqubjanov-t8t yes its react on the front end, 100%
Many thanks to Lama for the lessons, you explain and write clearly and clearly even to me who am starting to learn English
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?
@@UlugbekYoqubjanov-t8t Yes, its made in 100% React.
Very useful videos. I develop myself here. Thanks to Lama Dev
Just finished this part of the section. Everything was explained really well. Loving the journey so far. #thankyou
Love this, needed this with material-ui.
exactly
Man the tutorial is just outstanding, and the beautiful girl too 😂😂
Yeah bro bagrid
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
LAMA DEV, YOU'RE THE GOAT, BROTHER!!!
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.
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 ✌️
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.
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
Thanks for creating this video.Hope you become a famous TH-camr!
"Oh, some albino guy"
Spit my coffee out all over my keyboard.
Thanks a lot , very useful hope you will get 10 thousands like soon on this video 🚀️🔥🚀️🔥🚀️🔥🚀️🔥
People like u make TH-cam fun ❤️💋
you are the best teacher
both you and the project are awesome!!!!
The tutorial is comprehensive. Wow 💻👍🏽
Just finished this project ❤️
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.
Awesome. This is so good. Thanks for making this amazing tutorial
Why do you use and style it that it ends up to be a normal ?
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
Good job! Your level of pedagogy is just amazing
Do you know if this project js is 100 percent made in react?
Him: writes codes, runs codes, everything runs perfectly
Me: copy everything pixel by pixel, run codes, " 404 Error "
He make mistakes when he build app first time. When he is familiar ease with code, then he record video
lol =))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
best one for beginner💯
If you really want to know why he's best check from 24:55 26:55 27:34 32:25 42:45
Thanks bro for this wonderful tutorial. Keep making more videos.
Great greetings from Tunisia 👍
crisp and clear..amazing
Did you know when you click the add file, you can just type 'components/sidebar/sidebar.css' and it will auto-create the folders for you
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.
thank you safak🙏
Truly awesome your way of approachment for this social media app....
greate sir your way of teaching is😍😍😍
Your videos are so greate im learning so many new things but I didnt understand one thing why use margins and wrapper if we have `display:flex, gap and box-sizing: border-box` properties.
And you are greate inspiration to me.
one of the best Guy, thanks alot
Thank you so much lama dev. It's helping a lot
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.
Great Job, carry on, thank you.
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
You are really great at ur work. Thanks a bunch for sharing this beautiful craft
This is pure gold.
Thank you so much for this great tutorial.
Wow Very Beautiful Girl😂😂
Very Useful Tutorial Thank You❤
Your tutorials are amazing Shafak .
👆Send a direct message for help 🆙 ⬆️.
At 1:07:34 how are you able to reach the image source using just "assets/like.png" ? I don't see any .env file to change the absolute path behavior, and it looks like the full relative path to get from Post.jsx to like.png would be "../../../public/assets/like.png" ?
Ah, figured out and answering here just in case anyone else comes across the same question. Since index.html is the page that is running these JSX scripts, the relative path starts from the location of index.html, not Post.jsx.
instead of `rfc` shorthand you could use `sfc` to create a stateless functional component.
awesome tutorial, love you!
Outstanding sir❤
8:00
16:00
25:24 end of topbar style (done)
32:02
48:35 (done)
52:46 (done)
1:12:44 (done)
1:19:10 (done)
1:48:06 (done)
2:02:45(done)
(done) :)))))))
You are just brilliant sir.
I like the way when you said it's better than Facebook 😁😁 2:1:59
Thanks very Much , i learned about of things from you 😘🥰
"oh you again, what a coincidence" :)
Just looking through comments for this, I was laughing so hard hahahah
@Lama I'm getting an error at 1:29:57 ,which is type error with filter function . Filtering the username and profile picture is not working
How did you solve the problem at 1:26:15, I have this error:
ERROR
Cannot read properties of undefined (reading 'date')
TypeError: Cannot read properties of undefined (reading 'date')
Great work! Thank you!
thanks for your awasome video! want to see more : )
great work sir
😊
Can someone explain why do we need to add another div with class sidebar-wrapper when we already have a div with class named sidebar? 34:50
Why do we not need whole assets path when we are in 'topbar' folder and not in 'public'?
Can someone please help me with the query? Thanks in advance!
at 15:22 in video
man, beside the great work you do, I love your jokes! I always end up laughing a lot 😂
👆Send a direct message for help 🆙 ⬆️.
What happened if you post the pornigraphic content. Like image or video how To detect. We can use NSWF, or google vision API but how ?
Yeah we really missed you 🤣🤣🤣
More than amazing!!!!!!!!
This is great...
please can I get the link to part 2. I don't seem to find it.
someone can help me with it, thank you
Elinize, emeğinize sağlık gayet akıcı ve açıklayıcı tebrik ediyorum
u r amazing bro :) :)
Hi, first time with LamaDev, he mentions doing a video before this - does any have a link to the video we should have done before starting this, i found the one that comes after this, but wondering what the first one is? Thanks!
wow...pls help me with the link of the one that come after this
I like you, GJ mate.
why create wrapper css class for every component can't we just add the padding directly to the container class of that component
I'm doing all 4 of these in order and I therefore assumed that we would be working out of the same folder as the previous video in the playlist so I tried to do the create-react-app command at the beginning of this one on that folder and I got the error "The directory . contains files that could conflict:" because the REST api folder already has a package.json etc etc. The rest API in the previous video is a different folder. So if you have that error, make sure to do this tutorial in a new folder. He says here that LATER we'll connect the two.
Hello!
I'm very excited to start with react. I think I'm going to learn a lot from this course.
How can I get the projects' assets?
This is amazing, i've been following this tutorial, already did first part, any idea how should we proceed if we wanted all of this to be responsive ? :D
It's not hard we used flexbox, so you can arrange them easily using media query. You can check responsive section of the last video :)
@@LamaDevI I will try do the last part then do the responsive video then come back to this project to make it responsive :D
@@dr4z359 w3.com is great for learning media query.
@@LamaDev Can you tell which video is that? Are you telling the last part(ie) MERN app
@@dr4z359 did you manage to make it responsive?
Thank you for the tut. When I try to download the source file, it does not include a public or src folder, it has a .github folder which only has one file in it.
thank you so much sir it was really helpful :))
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