Build a Complete Typescript React Fitness Application for Beginners | Responsive

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ต.ค. 2024

ความคิดเห็น • 236

  • @EdRohDev
    @EdRohDev  ปีที่แล้ว +76

    Hey all, this video is more for beginners and beginners in Typescript. I do my best trying to explain things a bit more thoroughly, so let me know what you think!
    Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX

    • @DebanjanChakraborty-tp4kt
      @DebanjanChakraborty-tp4kt ปีที่แล้ว +3

      please make this kind of exact video with React 🙏

    • @koreandude
      @koreandude ปีที่แล้ว +2

      the hero we need but dont deserve!
      hell yea with the discord!
      your channel is gonna grow even more, #100kin2023

    • @HassanKhan-vc6ij
      @HassanKhan-vc6ij ปีที่แล้ว +5

      Hey bro you're awesome I've a request that plz show the localhost development tab after every few minutes of code to see what changes it effect but you keep typing code for 20 minutes and then showed to us how changes look like
      Don't do that bro

    • @olawaleolafisoye4148
      @olawaleolafisoye4148 ปีที่แล้ว

      Please sir, i wrote you through email and i am praying that you respond to my email. God bless you

    • @Guccifer808
      @Guccifer808 ปีที่แล้ว

      Thank you for your videos!

  • @_Akbaralam
    @_Akbaralam ปีที่แล้ว +6

    Tried bunch of react with TypeScript projects ..... couldn't be able to complete one. This one I've been able to complete because It's a great project to showcase, a great instructor and great everything.... You are a blessing.....

  • @EfosaMichael
    @EfosaMichael ปีที่แล้ว +7

    Ed, the way you take your time to explain everything in a digestable pace is legendary... thank you!

  • @farid.dev1
    @farid.dev1 ปีที่แล้ว +19

    Finally, someone made TS project 🤗

  • @joshuamadero4508
    @joshuamadero4508 ปีที่แล้ว +7

    The way you explain every detail in a clear and concise way is amazing. Great video!

  • @Patinhow100
    @Patinhow100 ปีที่แล้ว +14

    I discovered this channel recently and it's already one of my favorites. Top tier content and explanation.
    Thank you very much for the typescript and MERN projects. I'm marathoning them all.

  • @SirArtificial
    @SirArtificial ปีที่แล้ว +1

    Hey @EdRoh it's nice to be here. Just wanted to let you know that Vite is a french word for "quick", pronounced /vit/, like "veet".

  • @macrooooo__
    @macrooooo__ ปีที่แล้ว +6

    Hi Ed, thanks for this man. Keep uploading quality content like this. I hope you could do ecommerce project with Ts and MERN.
    Personal Notes:
    2:15 - installing vite
    11:57 - setting up @path
    18:18 - prettier module
    30:30 - setup font and root css
    52:15 - Link tsx
    1:08:05 - Enums
    1:17:17 - useMediaQueries
    1:37:31 - window.scroll on Top of Screen state
    1:44:23 - HomePage
    2:13:49 - motion div
    2:20:20 - onViewPort
    2:33:04 - Mapping cards
    2:45:36 - staggered animation
    3:02:44 - scrolling images to the right
    3:20:57 - react-hook-form

  • @AsiladeriskaYuyun
    @AsiladeriskaYuyun 6 หลายเดือนก่อน

    omg, I just watched this video for 45 min and I think this video is better than most tutorial videos in youtube about React + Typescript
    Thank you for this tutorial Sir!

  • @kgcthu382
    @kgcthu382 ปีที่แล้ว +5

    i've been coding along this project for about an hour and i've gotta say the way you explained every code makes it very easy to understand for me. i would like more intermediate or advanced react/ts/next.js projects as well.

  • @blue_berry_pie64
    @blue_berry_pie64 ปีที่แล้ว +2

    Thank you so much for your video content! I learn a lot when how to write TS and this is the first video that show me how to write Tailwindcss in a complete different way. Your design figma is also very nice, your way of instructing and teaching are also golden.

  • @soumadip_banerjee
    @soumadip_banerjee 4 หลายเดือนก่อน +1

    4th June, 2024. Tuesday.
    12.09 am .. Kolkata, IN 🇮🇳. Saved this video in my playlist. Will wake up tomorrow and start building this. Will update as I go.
    Edits:
    1) Done with the HOME section. 7.44pm, 5th June, 2024. Kolkata, IN 🇮🇳. So far so good. Framer-Motion is goin over my head, cz it's my first time, not his fault. Proper usage of Typescript 🔵

  • @ahmadirfan7840
    @ahmadirfan7840 ปีที่แล้ว +3

    I am following one of your previous video, which is an e-commerce web app that include redux toolkit. This new video, to be honest, is what I am waiting for. By the way, the way you teach and show the best practice is understandable and easy to follow, including the complex part, and that’s what I love. Keep on going, bro..

  • @Coding-is-life
    @Coding-is-life ปีที่แล้ว

    finally I found my self a teacher that can guide me, thankyou for the lesson. .. Praying for your success and safetiness :)

  • @santisaldivar
    @santisaldivar 2 หลายเดือนก่อน +2

    Not sure if anyone is following the video today (8/5/24) but if the tailwind.config file isn't auto formatting then make sure to add import tailwindcss from "tailwindcss"; to the vite.config.ts file.

  • @orchne9179
    @orchne9179 11 หลายเดือนก่อน

    this channel deserves a subs, you explain everything and i love it

    • @johanesguerra8557
      @johanesguerra8557 8 หลายเดือนก่อน

      I was actually wondering if you finished the project?? I am still having some issues

    • @gusdev-r
      @gusdev-r 5 หลายเดือนก่อน

      @@johanesguerra8557 if found any issues, can u say where to me?

  • @tonydamari9468
    @tonydamari9468 ปีที่แล้ว

    This has been such a valuable video, I recently had to work on a codebase written in Typescript and this has helped me better understand what's going on and what all the errors that keep popping up in my code mean.

  • @thekontuli2828
    @thekontuli2828 ปีที่แล้ว

    Love your pace!
    Your selfless efforts are much appreciated Ed.

  • @yYggdtyy5433
    @yYggdtyy5433 ปีที่แล้ว

    This tutorial is so nice... The UI on EdRoh's screen is big enough to see what's going on on my small computer screen. And Explained in details and thoroughly.

  • @akalazuvictor7930
    @akalazuvictor7930 ปีที่แล้ว

    i am very happy man you did a very great work done man, i have been finding it difficult to understand typescript but your work gives me joy thanks

  • @eshw23
    @eshw23 ปีที่แล้ว +1

    These videos are freaking amazing! Im so happy you included TypeScript.

  • @lowmikow1099
    @lowmikow1099 5 หลายเดือนก่อน

    Thank you for this tutorial! It was exreamly helpful for TS beginners! Your explanations are great! Wish you and your family all the best)

  • @Murciallog0
    @Murciallog0 ปีที่แล้ว

    Thank you! Thank you! Thank you!!! Really appreciate beginner friendly content from a professional like you!!!

  • @sergiisechka1993
    @sergiisechka1993 ปีที่แล้ว

    Timestamp 11:33. Just started to watch and already love it. Thank you @EdRohDev!

  • @logicstv
    @logicstv ปีที่แล้ว

    Talk about your approach to learning these frameworks and workflow in putting them all together. the WHY and HOW. thanks your awesome man.

  • @hotfeeds694
    @hotfeeds694 8 หลายเดือนก่อน

    2 hours nonstop coding with you and i'm overwhelmed. Found a great teacher and love the way you explain each steps.

    • @johanesguerra8557
      @johanesguerra8557 8 หลายเดือนก่อน

      Hi I was actually wondering if you finished the project?? I need some help and I do not have anyone to ask about this project

  • @jerichodelacruz6070
    @jerichodelacruz6070 3 หลายเดือนก่อน

    i just discovered ur chanel lately and it is amazing!!!

  • @pirashanravi67
    @pirashanravi67 ปีที่แล้ว +1

    Could you please keep the current dev version of the site up instead of the completed site while you code? It makes it a lot easier to follow along and visualize what's happening with Tailwind as you go. Thank you for the tutorials, they're super helpful!

  • @thuraiit
    @thuraiit ปีที่แล้ว

    Your videos are very informative and I learned so many things from your video. Nice work. All the best.

  • @zerodegreecoder
    @zerodegreecoder ปีที่แล้ว +1

    Bro In how many days did you shot the video. Great quality content.

  • @petertarek
    @petertarek ปีที่แล้ว +1

    you have the talent to teach

  • @brandonadams1702
    @brandonadams1702 ปีที่แล้ว

    Ed, I just want to say that you have been amazing! Keep it up!

  • @Lost1nTranslation
    @Lost1nTranslation ปีที่แล้ว +2

    You're crushing these 😁🔥🔥

  • @BilalJan-h9v
    @BilalJan-h9v ปีที่แล้ว

    You do explain everything in detail which is great! subscribed to you channel :)

  • @emelkayaci
    @emelkayaci ปีที่แล้ว

    Thank you for this amazing tutorial! Learned so much. 👍🏻👍🏻 Amazing quality content, can't wait to watch another tutorial

  • @johnherrera5913
    @johnherrera5913 ปีที่แล้ว

    Master! Always with the high quality contents you are the best, Thank you

  • @allfashionscience8968
    @allfashionscience8968 ปีที่แล้ว

    Finally the wait is over ✌ Keep it up EdRoh ❤👌

  • @p20ph37
    @p20ph37 ปีที่แล้ว

    I am so grateful for your videos. Great quality!

  • @mstfucr8791
    @mstfucr8791 ปีที่แล้ว

    ohhh. finished. thanks. it was very instructive and enjoyable

  • @brigadasgrifo
    @brigadasgrifo ปีที่แล้ว

    Excelent teacher and thanks for build this wonderful tutotial, i continue the hard work learning with you.

  • @LuisFelipe-td8qk
    @LuisFelipe-td8qk ปีที่แล้ว

    Big fan here, really appreciate your kindness on sharing your knowledge

  • @k303k
    @k303k 10 หลายเดือนก่อน +1

    Will you make more react/nextjs +ts projects in future pls?

  • @dalestewart
    @dalestewart ปีที่แล้ว +1

    Another fantastic tutorial. We should implement login features such as full authentication and logout functionality.😀

  • @MaxPorPanne
    @MaxPorPanne ปีที่แล้ว +1

    Great tutorial. Thank you

  • @Abdullah-cm5xv
    @Abdullah-cm5xv ปีที่แล้ว +2

    wow 😍 thank you so much for your efforts, I really really really appreciate that!

    • @EdRohDev
      @EdRohDev  ปีที่แล้ว

      thank you :)

  • @niteshprajapat7918
    @niteshprajapat7918 ปีที่แล้ว +3

    you are awesome ❤️🔥😍
    please do more reactjs project 🔥
    Thank you Sir ❤️

  • @osmanidev
    @osmanidev ปีที่แล้ว

    i love your tutorials please make more projects you excplain them so good

  • @ilyukchiljin7640
    @ilyukchiljin7640 ปีที่แล้ว

    nice to see that you're using vite for this tutorial. TBH I think you should just ditch the CRA and go with Vite for all future videos.

  • @davique0
    @davique0 ปีที่แล้ว

    Thank you so much for this amazing content, I will always be thankful

  • @deepmane5845
    @deepmane5845 ปีที่แล้ว +1

    one word ThankYou

  • @celestinenwachukwu919
    @celestinenwachukwu919 ปีที่แล้ว

    ive seen a lot of positive reviews, i am excited to learn from you

  • @Krior07
    @Krior07 ปีที่แล้ว +1

    it would be great if you would bring more React content with typescript

  • @thomasmohaupt6462
    @thomasmohaupt6462 ปีที่แล้ว +1

    FYI - there is an option in the VS Code ES7+ plugin to control if "import react ..." is added.

  • @lafybugatti
    @lafybugatti ปีที่แล้ว

    Beautifully curated. Thank you.

  • @cevdet-gt3uu
    @cevdet-gt3uu ปีที่แล้ว

    Thank you so much. thanks to you, I developed mine about typescript and some stuff. ♥️

  • @uri8736
    @uri8736 ปีที่แล้ว

    Hi and thanks for share this excellent material, I have the question about the node and npm version that you are using on your project. I'm having some problems with prettier and tailwindcss configuration files. Possible by node version. Many thanks for the content.

  • @olasunkanmihammed7462
    @olasunkanmihammed7462 ปีที่แล้ว

    Thank you, the help me alot. Thanks once again keep up the good work

  • @oulehlajan
    @oulehlajan 3 หลายเดือนก่อน

    Amazing. I've been so frustrated with the Indians videos and this is incomparable. Thanks for your job :)

  • @KarielWin
    @KarielWin ปีที่แล้ว

    Thank you for this lesson, great project😁

  • @VirtualShaft
    @VirtualShaft ปีที่แล้ว

    You're a really good teacher!

  • @peterchinoko4339
    @peterchinoko4339 10 หลายเดือนก่อน

    Hey EdRoh, this is a great video but my concern is that the project has too much div containers, which can be hard to maintain? is there a way around this?

  • @abdulwahabadeoyin7375
    @abdulwahabadeoyin7375 ปีที่แล้ว +1

    wow another nice video.. pls can you do react,redux with typescript or maybe the MERN stack with typescript , thank you sir

  • @arrpit-tiwari
    @arrpit-tiwari ปีที่แล้ว

    Done with video and all I have to say is hat's off to you

  • @JanaerTheFirst
    @JanaerTheFirst ปีที่แล้ว

    high quality, clear ,nice

  • @mohammadkhosrotabar5658
    @mohammadkhosrotabar5658 ปีที่แล้ว

    thank you. I learned a lot from this video 👍😀

  • @navaneeth6157
    @navaneeth6157 ปีที่แล้ว

    what great videos man!

  • @Mohammad_Mihad
    @Mohammad_Mihad 2 หลายเดือนก่อน

    Thank you so much for your video content, we used react-anchor-link-smooth-scroll for scroll but on click in the button the scroll animation isnt perfect , i m trying on it.

  • @Salah-YT
    @Salah-YT ปีที่แล้ว +1

    thank you so much 🙂

  • @Bobert6B05
    @Bobert6B05 2 หลายเดือนก่อน

    Great video! some youtubers need to get that rushing and making the video an hour long for a whole project is going to attract viewers which is the exact opposite, a short video (relative to what you're making of course) is only going to highlight your lack of depth in the explanation of what you're doing.
    People who watch these kind of videos want to learn from them, instead of following along and observing things magically happen without actually understanding the reason behind each choice taken when making the website.

  • @charlesm4596
    @charlesm4596 ปีที่แล้ว

    Thank You for showing how to upload project, to CloudFlare.

  • @justadude4938
    @justadude4938 7 หลายเดือนก่อน

    Thanks a lot of this video, helped a ton

  • @sayidali431
    @sayidali431 ปีที่แล้ว

    Wonderful Tutorials your channel, i appritiate thanks alot sir

  • @Travelferry
    @Travelferry ปีที่แล้ว +2

    Make nextjs material ui typescript nft marketplace project for beginners ..from basic to advance 🌼🌼🌼now we have idea about tailwind lets learn material ui

  • @thestunningiitian9479
    @thestunningiitian9479 ปีที่แล้ว

    Quick tip to avoid all the smooth scroll stuff. Could just add smooth-scroll from tailwindCSS

  • @nurikbk99
    @nurikbk99 ปีที่แล้ว

    Dude, you are awesome!

  • @jakobehrler9364
    @jakobehrler9364 ปีที่แล้ว

    Hey Ed, I am currently trying to find out how you turned the three different fonts for the home page picture into an image. What did you use to do this?

  • @iamserano
    @iamserano 11 หลายเดือนก่อน

    i noticed sometimes you created variables and it was not needed at that point in time but to be used later, it will be nice not to because it causes confusion sometimes. But generally this was a great video and it helped my typescript knowledge👍🏼

    • @johanesguerra8557
      @johanesguerra8557 8 หลายเดือนก่อน

      Hey I actually need some help with this project do you mind helping me ??

  • @romimaximus
    @romimaximus ปีที่แล้ว

    I really wish you make some tutorials teaching how to use these css frameworks, that you use in your tutorials, cause i get stuck in the settings and configurations", and i always end up using "sass" or "css", so i can continue follow your tutorials. ...By the way i really like your projets in your tutorials. 😎👍

  • @Yahya_Umar
    @Yahya_Umar ปีที่แล้ว

    well Done EdRoh that is great.

  • @filipposecchi942
    @filipposecchi942 ปีที่แล้ว

    Ed you're the man!

  • @maitreyadewal
    @maitreyadewal ปีที่แล้ว +2

    I was following through but after @51:30 the nav bar at my side was distributed vertically, then i removed the const flexBetween = "flex justify-between items-center"; and placed the classes in div, it worked and distrubuted divs horizontally, if i'm keeping the const for the classes, somehow its giving me an issue, could you please help why its doing that ?

    • @arjunaherbst72
      @arjunaherbst72 3 หลายเดือนก่อน

      Did you ever figure this out? I am getting the same issue but even moving the classes directly in my div does not work.

  • @Englishmusic-qi9fp
    @Englishmusic-qi9fp ปีที่แล้ว

    Thanks edroh on this project l will learn typescript.

  • @ayushshende4290
    @ayushshende4290 ปีที่แล้ว

    If you can then please provide the link to figma design as well. Thanks for the superb content!

  • @joseph5413
    @joseph5413 ปีที่แล้ว

    hey Ed, could you make a Dashboard with simple menus and submenus and thanks for the tutorials are helping me in my junior programmer journey.

  • @relaxingzenmusic
    @relaxingzenmusic ปีที่แล้ว

    Thank you for your tutorials

  • @lucascoliveira3957
    @lucascoliveira3957 ปีที่แล้ว

    Hey EdRoh, could you make a video teaching a build a ERP with NextJS, Node and TypeScript? Thank you so much

  • @regilearn2138
    @regilearn2138 ปีที่แล้ว

    MERN and typescript advance tutorial would be great, please consider

  • @teodorbrisku4886
    @teodorbrisku4886 ปีที่แล้ว

    simply great ,thanks

  • @MightyKingKala
    @MightyKingKala ปีที่แล้ว

    Thank you so much brother!

  • @weidongkong1039
    @weidongkong1039 4 หลายเดือนก่อน

    Good tutorial!

  • @suryanshutomar
    @suryanshutomar ปีที่แล้ว

    Hi awesome tutorial.....Can you do an video streaming mern project with recommendation system based on user search......I can't seem to find any tutorial on this??

  • @sojibdas5301
    @sojibdas5301 ปีที่แล้ว

    This video is very helpful.. Thanks

  • @terrymarr5265
    @terrymarr5265 ปีที่แล้ว

    When you're showing us the code (ie useMediaQuery), kindly expand your code window so we can see the entire thing

  • @tomasslezak3628
    @tomasslezak3628 ปีที่แล้ว

    Very nice tutorial 👍

  • @regilearn2138
    @regilearn2138 ปีที่แล้ว

    I have just complete the tutorial. only missing part is dark mode theme switch , next tailwind css video please add that also,with typescript

  • @abdessamade6995
    @abdessamade6995 ปีที่แล้ว

    your videos are very helpful♥

  • @SayfSentinel
    @SayfSentinel ปีที่แล้ว

    Nice tutorial, thank Ed,
    Is it possible to make a tutorial but not with Tailwind CSS, i find out that it bloater the code and it's really repetitive, i know we could avoid that and create custom classes in tailwind config but non-the-less it bloater the code,
    what about the old fashioned css/scss or even material ui. ;)

  • @moisemuhesi1525
    @moisemuhesi1525 ปีที่แล้ว

    wow , it's nice fitness application, I like it .

  • @earnstein7607
    @earnstein7607 ปีที่แล้ว

    Edroh you're the best

  • @uminhtetoo
    @uminhtetoo ปีที่แล้ว

    Thank you so much, Sir.