puzzlelist Tailwind Templates

Puzzlelist

A Puzzle tracker app for online puzzles like Wordle and Connections. Built with Next.js, featuring OAuth login, auth0, a custom puzzle API, Vercel Postgres, Prisma, Tailwind, and more.

Daily Puzzle Tracker "Puzzle List"

Puzzle List is a daily tracker app for online puzzles like Wordle and Connections. Users can create lists of their favorite puzzles and track their completion.

Built with Next.js, it leverages newer server actions for a separation of server and client code. The app uses Google and GitHub OAuth login via Auth0, along with a custom Puzzle API. User and puzzle data are stored in Vercel Postgres using Prisma. For styling and some UI components, Puzzle List uses Tailwind and Shadcn. For fast node package management, Puzzle List uses pnpm.

Todo

  • Create Figma mockup
  • Setup environment
  • Scaffold basic UI
  • Setup mock data
  • Setup Prisma SQLite --> Postgres database
  • Deploy on Vercel
  • Setup Prisma seeding & migration
  • Add authentication (Auth0)
  • Connect users to database
  • Refine schema
  • Add Shadcn
  • Add Follow/unfollow puzzle
  • Add Complete/uncheck puzzle input
  • Refine UI
  • Refine mobile UI
  • Refine schema (user created puzzles)
  • Add custom puzzle POST, DELETE
  • Make Signed-out page work
  • Add 'Help' 'Send Feedback' 'Disclaimer' pages/routes
  • Add Sanitization/Validation to new puzzle submissions
  • Refine basic server-side error handling
  • Setup Google and Github Production Oauth
  • Clean up console.log statements and comments

Extras

  • Add functionality to reset each user's 'completed' checkmarks every day

  • Refine client-side error handling

  • Add throttling for follow/unfollow, complete/uncheck puzzle actions

  • Add API to fetch puzzle url icons

  • Refactor server action calls to improve efficiency

  • Refactor code to allow for some static (instead of dynamic) generated page routes

  • Add optimistic updates

  • Add analytics

Scripts

pnpm dev
# launch development server with live reloading, updates, and debugging.

pnpm build
# bundle project and create deployable app

pnpm prisma studio
# view local database in web browser

pnpm prisma db push
# push changes to schema from prisma to database

pnpm prisma generate
# regenerates prisma client (use after schema changes)

pnpm prisma db seed
# create default puzzle data

Dev Notes

Top categories

Loading Svelte Themes