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
31 май 2024
