Full stack web app using Next.js, React, TypeScript, Prisma, tRPC, Heroku + PostgreSQL, and Tailwind.
Deployed with Vercel:
Prerequisite:
- Two PostgreSQL/MySQL local databases or connection to Heroku/Planetscale/etc database hosting service
- npm
Setup
- Clone repo
npm install
- Create
.env
file if one does not already exist - Add connection URLs for both database and shadow db to .env
- Initialize database -
npx prisma migrate dev
- Initialize base data set -
npm run ts-node ./scripts/fill-db.ts
- Run dev server
npm run dev
- 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