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.

Typescript Types vs Interfaces:
Google Fonts:
Prettier Tailwind Css Plugin:
Prettier Tailwind Css Sorting:
Hero Icons:
Framer Motion:
Form Submit:
React Anchor Link smooth Scroll:
Cloudflare Pages:

completed code:
tailwind config file:
useMediaQuery code:

Subscribe to my channel:
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.

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