React Social Media App Design Tutorial | React.js UI Course Full

Поділитися
Вставка
  • Опубліковано 14 лис 2024

КОМЕНТАРІ • 331

  • @juanmanuelarroyo5794
    @juanmanuelarroyo5794 3 роки тому +15

    I have searched thousands of tutorials and channels, but when I watch your videos I don't need to keep looking, thanks you (l)

  • @ramizulislam5284
    @ramizulislam5284 Рік тому +6

    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!

  • @ToyhonaUz
    @ToyhonaUz Рік тому +47

    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.

    • @Ak-fd9kd
      @Ak-fd9kd Рік тому +1

      have you made this project?

    • @ToyhonaUz
      @ToyhonaUz Рік тому

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

    • @anindiansquirrel
      @anindiansquirrel Рік тому +2

      @@ToyhonaUz bro I want to learn react by building real life projects . can you help me get some good study materials?

    • @ToyhonaUz
      @ToyhonaUz Рік тому +3

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

    • @anindiansquirrel
      @anindiansquirrel Рік тому

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

  • @micheebakanda36
    @micheebakanda36 Рік тому +1

    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.

  • @hayatkh185
    @hayatkh185 2 роки тому +1

    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

  • @johnfisher3022
    @johnfisher3022 3 роки тому +42

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

    • @UlugbekYoqubjanov-t8t
      @UlugbekYoqubjanov-t8t Рік тому

      Do you know if this project js is 100 percent made in react?

    • @OP-ig1fj
      @OP-ig1fj Рік тому

      @@UlugbekYoqubjanov-t8t this UI video is react theres a part 2 which is backend (node mongo)

  • @jsmaster1506
    @jsmaster1506 Рік тому +1

    Alhamdulliah, Complete UI part and jump backend part! Thanks Lama Dev.

  • @jaylee3862
    @jaylee3862 3 роки тому +26

    I really love this guy. I'm having a first interview as a React Frontend developer next week. Hope everything goes well..

    • @johnkucharsky6927
      @johnkucharsky6927 2 роки тому +4

      How was your interview

    • @connornuggets5450
      @connornuggets5450 2 роки тому +2

      How it went

    • @mr.roulette7537
      @mr.roulette7537 2 роки тому +1

      He forgor 💀

    • @jaylee3862
      @jaylee3862 2 роки тому +5

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

    • @jaylee3862
      @jaylee3862 2 роки тому +2

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

  • @MrBorndd
    @MrBorndd 3 роки тому +19

    Im so exited to finish all your courses. You truly are a gem. Thank you!

  • @kashmirtechtv2948
    @kashmirtechtv2948 3 роки тому +23

    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. ❤️❤️❤️

    • @aaronpauljacob5143
      @aaronpauljacob5143 2 роки тому

      Very true.You explain everything from scratch . Really Appreciated! 🔥🔥

    • @UlugbekYoqubjanov-t8t
      @UlugbekYoqubjanov-t8t Рік тому

      Do you know if this project js is 100 percent made in react?

  • @halituzan
    @halituzan 2 роки тому +1

    Since you explained in a detailed and understandable way, I watched and accompanied you until the end without getting bored. Thank you.

  • @Hz-qz5mr
    @Hz-qz5mr 3 роки тому +4

    man loving your projects, I don't have words to even thankyou you are the reason I got the job

    • @bayunirayudha
      @bayunirayudha 5 місяців тому

      .b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.

  • @sushilkumar-ef7gh
    @sushilkumar-ef7gh 2 роки тому

    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

  • @emanuelameh5722
    @emanuelameh5722 3 роки тому +8

    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!

  • @atamuradniyazov9897
    @atamuradniyazov9897 10 місяців тому

    Many thanks to Lama for the lessons, you explain and write clearly and clearly even to me who am starting to learn English

  • @caninan652
    @caninan652 Рік тому

    Ş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.

  • @mengistutadese4858
    @mengistutadese4858 8 місяців тому

    Really...Really "Time is relative"..this was caught my mind and inspire me to listen attentively...it was awesome

  • @abhimanyuarora9262
    @abhimanyuarora9262 3 роки тому +19

    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. :)

  • @sushilkumar-ef7gh
    @sushilkumar-ef7gh 2 роки тому +1

    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 ✌️

  • @satyaprakashsahoo7772
    @satyaprakashsahoo7772 2 роки тому +2

    Really Sir. It's better than facebook.. I had watched thoroughly the whole series.. You are really fabulous 😍

  • @oscargm1979
    @oscargm1979 3 роки тому +11

    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.

  • @pranavyeole102
    @pranavyeole102 2 роки тому +5

    Your teaching style is absolutely incredible! and your hardwork is really appreciated!!

    • @UlugbekYoqubjanov-t8t
      @UlugbekYoqubjanov-t8t Рік тому

      Do you know if this project js is 100 percent made in react?

    • @pranavyeole102
      @pranavyeole102 Рік тому

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

  • @nate1988
    @nate1988 3 роки тому +6

    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.

  • @mahendrakergaurav7760
    @mahendrakergaurav7760 2 роки тому +20

    Man the tutorial is just outstanding, and the beautiful girl too 😂😂

  • @luckydewangan5985
    @luckydewangan5985 Рік тому +1

    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.

  • @naveedkhankapoor9513
    @naveedkhankapoor9513 8 місяців тому

    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.

  • @sriram_798
    @sriram_798 3 місяці тому

    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.

  • @Sunil_1200
    @Sunil_1200 2 роки тому

    Just finished this part of the section. Everything was explained really well. Loving the journey so far. #thankyou

  • @minali4322
    @minali4322 3 роки тому +2

    Very useful videos. I develop myself here. Thanks to Lama Dev

  • @aarondiaz2506
    @aarondiaz2506 Рік тому

    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.

  • @beinerthchitivamachado9892
    @beinerthchitivamachado9892 Рік тому

    LAMA DEV, YOU'RE THE GOAT, BROTHER!!!

  • @dje7382
    @dje7382 2 роки тому

    I have completed the video. what an amazing resource. Thank you for the teaching, I learnt so much.

    • @ataimebenson
      @ataimebenson Рік тому

      Please what NodeJs version did you use ?
      I am having a lot of dependencies issues

  • @haralc
    @haralc 3 роки тому +5

    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

  • @kazisohail6798
    @kazisohail6798 2 роки тому +1

    Just finished this project ❤️

  • @darkfrozen1860
    @darkfrozen1860 Рік тому +2

    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.

  • @techtalk6365
    @techtalk6365 3 роки тому +3

    Thanks a lot , very useful hope you will get 10 thousands like soon on this video 🚀️‍🔥🚀️‍🔥🚀️‍🔥🚀️‍🔥

  • @Zzaa01
    @Zzaa01 2 роки тому +1

    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

    • @deepakverma79998
      @deepakverma79998 2 роки тому

      Could you help me out i am stuck in one error i am unable to import the icons

  • @okonkwo.ify18
    @okonkwo.ify18 2 роки тому

    People like u make UA-cam fun ❤️💋

  • @hcoder
    @hcoder 3 роки тому +3

    Thanks for creating this video.Hope you become a famous UA-camr!

  • @soltiscd
    @soltiscd 3 роки тому +8

    Love this, needed this with material-ui.

  • @aguyoninternet9883
    @aguyoninternet9883 3 роки тому +1

    both you and the project are awesome!!!!

  • @ajayaj3399
    @ajayaj3399 Місяць тому

    best one for beginner💯

  • @haralc
    @haralc 3 роки тому

    Why do you use and style it that it ends up to be a normal ?

  • @PrinceKumar-hh6yn
    @PrinceKumar-hh6yn Рік тому

    The tutorial is comprehensive. Wow 💻👍🏽

  • @alivelidurali
    @alivelidurali 3 роки тому +26

    Him: writes codes, runs codes, everything runs perfectly
    Me: copy everything pixel by pixel, run codes, " 404 Error "

    • @marcoonlinetv7769
      @marcoonlinetv7769 3 роки тому +1

      He make mistakes when he build app first time. When he is familiar ease with code, then he record video

    • @holicneko1668
      @holicneko1668 3 роки тому

      lol =))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

  • @Dseyisax
    @Dseyisax 4 місяці тому +1

    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

  • @anoop7133
    @anoop7133 Рік тому

    Thanks bro for this wonderful tutorial. Keep making more videos.

  • @hamemigafsi6953
    @hamemigafsi6953 3 роки тому +2

    you are the best teacher

  • @amarbugarin2242
    @amarbugarin2242 3 роки тому

    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

  • @edenbekele-x9k
    @edenbekele-x9k Рік тому +1

    thank you safak🙏

  • @chandrasekarm905
    @chandrasekarm905 3 роки тому

    Truly awesome your way of approachment for this social media app....

  • @vikehietoyhoshii9901
    @vikehietoyhoshii9901 3 роки тому +1

    Awesome. This is so good. Thanks for making this amazing tutorial

  • @kashmirtechtv2948
    @kashmirtechtv2948 3 роки тому +1

    If you really want to know why he's best check from 24:55 26:55 27:34 32:25 42:45

  • @sufails6990
    @sufails6990 2 роки тому

    crisp and clear..amazing

  • @zakariyedaauud5527
    @zakariyedaauud5527 3 роки тому +1

    We need more tutorial like javascript + project

  • @shankarchavhan7204
    @shankarchavhan7204 3 роки тому

    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

  • @michaelmas2841
    @michaelmas2841 2 роки тому

    Good job! Your level of pedagogy is just amazing

  • @hamidkhan2075
    @hamidkhan2075 Рік тому

    greate sir your way of teaching is😍😍😍

  • @zzz-oc4fe
    @zzz-oc4fe 2 роки тому

    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!

    • @mindplus4917
      @mindplus4917 2 роки тому

      Did you get any error at 1:29:58 ,when filtering username and profile picture from dummy data .

    • @zzz-oc4fe
      @zzz-oc4fe 2 роки тому

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

    • @zzz-oc4fe
      @zzz-oc4fe 2 роки тому

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

  • @rahmatullahbizhan7796
    @rahmatullahbizhan7796 5 місяців тому

    Thank you so much for this great tutorial.

  • @softmerit25
    @softmerit25 3 роки тому

    You are really great at ur work. Thanks a bunch for sharing this beautiful craft

  • @blankslate6393
    @blankslate6393 2 роки тому +1

    instead of `rfc` shorthand you could use `sfc` to create a stateless functional component.

  • @Getentertainedp
    @Getentertainedp 3 роки тому

    Thank you so much lama dev. It's helping a lot

  • @mahmoud_saadaoui
    @mahmoud_saadaoui 3 роки тому

    Great greetings from Tunisia 👍

  • @msalameh01
    @msalameh01 2 роки тому

    one of the best Guy, thanks alot

  • @shrijaykesarwani6773
    @shrijaykesarwani6773 3 роки тому

    I like the way when you said it's better than Facebook 😁😁 2:1:59

  • @darshmostafa6138
    @darshmostafa6138 2 роки тому

    Thanks very Much , i learned about of things from you 😘🥰

  • @sushantadas7249
    @sushantadas7249 2 роки тому

    This is pure gold.

  • @JMulungo17
    @JMulungo17 2 роки тому +1

    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?

  • @realzoneB
    @realzoneB 2 роки тому

    Thank you for all your tutorials. Please can you add a comment section feature to this project. Thank you so much.

  • @techbd7189
    @techbd7189 3 роки тому +1

    Great Job, carry on, thank you.

  • @anuraghere4997
    @anuraghere4997 2 роки тому

    You are just brilliant sir.

  • @hieptx1909
    @hieptx1909 Рік тому

    awesome tutorial, love you!

  • @ferhatberkocak3389
    @ferhatberkocak3389 3 роки тому +2

    Elinize, emeğinize sağlık gayet akıcı ve açıklayıcı tebrik ediyorum

  • @kashmirtechtv2948
    @kashmirtechtv2948 3 роки тому

    You can create more Local Disks on your machine. If windows gets corrupted, you can save data from being lost.

  • @dr4z359
    @dr4z359 3 роки тому +5

    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

    • @LamaDev
      @LamaDev  3 роки тому +2

      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 :)

    • @dr4z359
      @dr4z359 3 роки тому +2

      @@LamaDevI I will try do the last part then do the responsive video then come back to this project to make it responsive :D

    • @renebleu8711
      @renebleu8711 3 роки тому

      @@dr4z359 w3.com is great for learning media query.

    • @shellyshack9364
      @shellyshack9364 3 роки тому +1

      @@LamaDev Can you tell which video is that? Are you telling the last part(ie) MERN app

    • @wangarimaina8542
      @wangarimaina8542 3 роки тому +1

      @@dr4z359 did you manage to make it responsive?

  • @cobiejoe96
    @cobiejoe96 3 роки тому +7

    "Oh, some albino guy"
    Spit my coffee out all over my keyboard.

  • @rajugm9504
    @rajugm9504 Рік тому

    Great work. I would request you please build educational platform application similar to udemy or linkedin learning using react.

  • @alem182
    @alem182 Рік тому

    Great work! Thank you!

  • @SachinKumar-ju9mf
    @SachinKumar-ju9mf Рік тому

    Your tutorials are amazing Shafak .

    • @cchelseacxx
      @cchelseacxx Рік тому

      👆Send a direct message for help 🆙 ⬆️.

  • @malred
    @malred Рік тому

    thanks for your awasome video! want to see more : )

  • @Punjabi_coding
    @Punjabi_coding Рік тому

    Outstanding sir❤

  • @rounakbhattacherje3426
    @rounakbhattacherje3426 Рік тому

    very nice project sir, i learned alot, thank u so much ....

    • @ataimebenson
      @ataimebenson Рік тому

      Please what NodeJs version did you use ?
      I am having a lot of dependencies issues

  • @tkot7857
    @tkot7857 Рік тому

    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) :)))))))

  • @fancyAlex1993
    @fancyAlex1993 3 роки тому

    Great course. You should create a discord channel too.

  • @jonathanadel3831
    @jonathanadel3831 3 роки тому +6

    Wow Very Beautiful Girl😂😂
    Very Useful Tutorial Thank You❤

  • @altum2450
    @altum2450 3 роки тому +1

    More than amazing!!!!!!!!

  • @daveshaffer4593
    @daveshaffer4593 3 роки тому +5

    "oh you again, what a coincidence" :)

    • @CloudwalkTV
      @CloudwalkTV 3 роки тому +1

      Just looking through comments for this, I was laughing so hard hahahah

  • @mathumathusan154
    @mathumathusan154 Рік тому

    great work sir
    😊

  • @prasu1697
    @prasu1697 Місяць тому

    nice explanation

  • @tkot7857
    @tkot7857 Рік тому

    thank you so much sir it was really helpful :))

  • @e-genieclimatique
    @e-genieclimatique 2 роки тому

    very interesting video for beginners

  • @Станислав-щ7ф8е
    @Станислав-щ7ф8е 3 роки тому +1

    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.

  • @ataimebenson
    @ataimebenson Рік тому

    Very Nice, Please what version of Node did you use for this project ?

  • @somnathdas8922
    @somnathdas8922 Рік тому

    Best React project only available on your youtube channel 👍

  • @hayatkh185
    @hayatkh185 2 роки тому

    just Waaw< u r tutorial's are great

  • @omkardeshmukh2244
    @omkardeshmukh2244 2 роки тому

    great work sir

  • @mohitagrawal1555
    @mohitagrawal1555 3 роки тому +1

    u r amazing bro :) :)

  • @321123580
    @321123580 3 роки тому

    Awesome tutoral, thanks

  • @MrSamillon
    @MrSamillon 3 роки тому

    You are awesome! Could you create a tutorial about creating register system with email confirmation?