Build a Complete Typescript React Fitness Application for Beginners | Responsive
HTML-код
- Опубликовано: 12 июн 2024
- Build and Deploy a Complete Typescript Fitness Application tutorial. For frontend, we will be using React, Typescript, Vite, Tailwind, Hero Icons, Framer Motion, Form Submit, React Anchor Link Smooth Scroll. We will also be using Cloudflare Pages for deploying our app.
Links:
React: reactjs.org/
Typescript: www.typescriptlang.org/
Typescript Types vs Interfaces: tinyurl.com/typescripttypesvs...
Vite: tailwindcss.com/docs/guides/vite
Google Fonts: fonts.google.com/
Tailwind: tailwindcss.com/
Prettier Tailwind Css Plugin: github.com/tailwindlabs/prett...
Prettier Tailwind Css Sorting: tailwindcss.com/blog/automati...
Hero Icons: heroicons.com/
Framer Motion: www.framer.com/docs/introduct...
Form Submit: formsubmit.co/
React Anchor Link smooth Scroll: github.com/mauricevancooten/r...
Cloudflare Pages: pages.cloudflare.com/
Code
completed code: github.com/ed-roh/gym-typescript
assets: github.com/ed-roh/gym-typescr...
tailwind config file: github.com/ed-roh/gym-typescr...
useMediaQuery code: github.com/ed-roh/gym-typescr...
-----------
Subscribe to my channel: / @edrohdev
for more web development and web 3.0 blockchain tutorials!
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
Chapters:
0:00 Building a Complete Fitness Typescript React Application
2:49 Installations, Packages and Configurations
12:54 Tailwind Installation and Setup
28:25 Navbar Menu
1:07:49 Enums
1:44:22 Home Page
2:22:16 Benefits Page
3:02:36 Our Classes Page
3:20:57 Contact Us Page
3:49:54 Footer
3:57:14 Repo Setup and Deployment on Cloudflare Pages
4:02:11 A Fully Built and Deployed Typescript Application 
Наука
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
please make this kind of exact video with React 🙏
the hero we need but dont deserve!
hell yea with the discord!
your channel is gonna grow even more, #100kin2023
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
Please sir, i wrote you through email and i am praying that you respond to my email. God bless you
Thank you for your videos!
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.
The way you explain every detail in a clear and concise way is amazing. Great video!
Ed, the way you take your time to explain everything in a digestable pace is legendary... thank you!
Finally, someone made TS project 🤗
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.....
Love your pace!
Your selfless efforts are much appreciated Ed.
These videos are freaking amazing! Im so happy you included TypeScript.
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.
finally I found my self a teacher that can guide me, thankyou for the lesson. .. Praying for your success and safetiness :)
Thank you! Thank you! Thank you!!! Really appreciate beginner friendly content from a professional like you!!!
Ed, I just want to say that you have been amazing! Keep it up!
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 🔵
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.
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
Thank you for this amazing tutorial! Learned so much. 👍🏻👍🏻 Amazing quality content, can't wait to watch another tutorial
Master! Always with the high quality contents you are the best, Thank you
Your videos are very informative and I learned so many things from your video. Nice work. All the best.
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..
You do explain everything in detail which is great! subscribed to you channel :)
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.
Excelent teacher and thanks for build this wonderful tutotial, i continue the hard work learning with you.
Thank you for this tutorial! It was exreamly helpful for TS beginners! Your explanations are great! Wish you and your family all the best)
Beautifully curated. Thank you.
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!
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.
2 hours nonstop coding with you and i'm overwhelmed. Found a great teacher and love the way you explain each steps.
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
ohhh. finished. thanks. it was very instructive and enjoyable
i love your tutorials please make more projects you excplain them so good
Big fan here, really appreciate your kindness on sharing your knowledge
Finally the wait is over ✌ Keep it up EdRoh ❤👌
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
this channel deserves a subs, you explain everything and i love it
I was actually wondering if you finished the project?? I am still having some issues
@@johanesguerra8557 if found any issues, can u say where to me?
Thank you so much for this amazing content, I will always be thankful
Thank you so much. thanks to you, I developed mine about typescript and some stuff. ♥️
you have the talent to teach
Thank you for this lesson, great project😁
Great tutorial. Thank you
You're a really good teacher!
wow 😍 thank you so much for your efforts, I really really really appreciate that!
thank you :)
such great content and for free. keep it up bro!
Thank you, the help me alot. Thanks once again keep up the good work
Thanks a lot of this video, helped a ton
You're crushing these 😁🔥🔥
😀
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".
Another fantastic tutorial. We should implement login features such as full authentication and logout functionality.😀
Talk about your approach to learning these frameworks and workflow in putting them all together. the WHY and HOW. thanks your awesome man.
thank you. I learned a lot from this video 👍😀
ive seen a lot of positive reviews, i am excited to learn from you
Timestamp 11:33. Just started to watch and already love it. Thank you @EdRohDev!
high quality, clear ,nice
Thank you for your tutorials
Wonderful Tutorials your channel, i appritiate thanks alot sir
what great videos man!
Done with video and all I have to say is hat's off to you
Perfect as always 💯
Dear Ed please make a tutorial to show how to create a UX-UI design and change it to a react app.🙏
well Done EdRoh that is great.
Ed you're the man!
Dude, you are awesome!
simply great ,thanks
Very nice tutorial 👍
Thanks edroh on this project l will learn typescript.
one word ThankYou
your videos are very helpful♥
This video is very helpful.. Thanks
Thank you so much brother!
Good tutorial!
wow , it's nice fitness application, I like it .
Thank you so much, Sir.
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!
thank you so much 🙂
Thank you so much!
thnaks for your work!
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.
Thanks a lot 🙏🏻
it would be great if you would bring more React content with typescript
Thank You for showing how to upload project, to CloudFlare.
FYI - there is an option in the VS Code ES7+ plugin to control if "import react ..." is added.
Great! Thanks
you are awesome ❤️🔥😍
please do more reactjs project 🔥
Thank you Sir ❤️
will do!!
@@EdRohDev Thank you ❤️🔥
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?
Thank you!)
Thanks for sharing brother
Questions can come in⬆️⬆️
Bro In how many days did you shot the video. Great quality content.
Edroh you're the best
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.
Will you make more react/nextjs +ts projects in future pls?
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?
thanks a lot
It was amazing
wow another nice video.. pls can you do react,redux with typescript or maybe the MERN stack with typescript , thank you sir
If you can then please provide the link to figma design as well. Thanks for the superb content!
Thanks!!
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 ?
MERN and typescript advance tutorial would be great, please consider
thanks
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. 😎👍
Nice!
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.
Hey EdRoh, could you make a video teaching a build a ERP with NextJS, Node and TypeScript? Thank you so much