Build a Complete Typescript React Fitness Application for Beginners | Responsive

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: https://reactjs.org/
Typescript: https://www.typescriptlang.org/
Typescript Types vs Interfaces: https://tinyurl.com/typescripttypesvsinterfaces
Vite: https://tailwindcss.com/docs/guides/vite
Google Fonts: https://fonts.google.com/
Tailwind: https://tailwindcss.com/
Prettier Tailwind Css Plugin: https://github.com/tailwindlabs/prettier-plugin-tailwindcss
Prettier Tailwind Css Sorting: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted
Hero Icons: https://heroicons.com/
Framer Motion: https://www.framer.com/docs/introduction/
Form Submit: https://formsubmit.co/
React Anchor Link smooth Scroll: https://github.com/mauricevancooten/react-anchor-link-smooth-scroll
Cloudflare Pages: https://pages.cloudflare.com/

Code
completed code: https://github.com/ed-roh/gym-typescript
assets: https://github.com/ed-roh/gym-typescript/tree/master/src/assets
tailwind config file: https://github.com/ed-roh/gym-typescript/blob/master/tailwind.config.cjs
useMediaQuery code: https://github.com/ed-roh/gym-typescript/blob/master/src/hooks/useMediaQuery.ts
———————————

Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1
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