I have an UPDATED VERSION OF THIS TUTORIAL NOW https://www.youtube.com/watch?v=YkOSUVzOAA4
Which Pokemon is roundest??? Today we will find out! #t3stack #fullstack #webdevelopment
Theo builds a full stack web app using the T3 Stack as detailed on https://init.tips/
If you're interested in Next.js, React, TypeScript, Prisma, tRPC, PlanetScale + MySQL, and Tailwind, all deployed on Vercel, you're in the right place :)
The services we used are...
Planetscale - https://planetscale.com/?ref=theo
Vercel - https://vercel.com/?ref=theo
Check out the final product at https://roundest.t3.gg/
Github repo: https://github.com/TheoBr/roundest-mon
Follow me on twitter for more web dev BS: https://twitter.com/t3dotgg
Rough timestamps:
0:00 - Intro & planning in Excalidraw
4:15 - Initializing with init.tips
5:00 - Tailwind setup
17:15 - API setup with tRPC
27:45 - Random pokemon endpoint
39:00 - SSR is hard
1:04:00 - PlanetScale and Prisma setup
1:26:00 - Image optimization and caching with `@next/image`
1:38:50 - Cache pokemon from PokeAPI in our db
1:43:00 - Relations are hard (Prisma fails)
1:58:00 - Backfilling all pokemon into db
2:11:00 - Results page
2:35:40 - Typescript saves us
215 Comments