DavinJ-0316 / roundest-pokemon-nextjs-typescript-tailwindcss-prisma-trpc-postgresql

Full stack web app using Next.js, React, TypeScript, Prisma, tRPC, Heroku + PostgreSQL, Tailwind CSS, and deployed with Vercel.

Roundest Pokémon Web App - Which Pokémon is most round?

Full stack web app using Next.js, React, TypeScript, Prisma, tRPC, Heroku + PostgreSQL, and Tailwind.

Deployed with Vercel:

• http://roundest-pokemon-nextjs-typescript-tailwindcss-prisma-javigong.vercel.app/

Getting Started

Prerequisite:

• Two PostgreSQL/MySQL local databases or connection to Heroku/Planetscale/etc database hosting service
• npm

Setup

1. Clone repo
2. npm install
3. Create .env file if one does not already exist
4. Add connection URLs for both database and shadow db to .env
5. Initialize database - npx prisma migrate dev
6. Initialize base data set - npm run ts-node ./scripts/fill-db.ts
7. Run dev server npm run dev

TODO

• Next.js and Tailwind setup
• API setup with tRPC
• Pokemon endpoint
• SSR setup
• Heroku and Prisma setup
• Use next/image to handle image caching and better rendering
• Cache pokemon data fetched from Pokemon API in our db
• Create Prisma relations
• Create script to backfill all pokemon into db
• Create the results page with counting/sorting votes
• Improve loading states between votes