Prisma + tRPC

Features

  • 🧙‍♂️ E2E typesafety with tRPC
  • ⚡ Full-stack React with Next.js
  • ⚡ Database with Prisma
  • ⚙️ VSCode extensions
  • 🎨 ESLint + Prettier
  • 💚 CI setup using GitHub Actions:
  • 🔐 Validates your env vars on build and start

Todo

Must have features right now

  • Create question
  • Delete question
  • Retrieve question
  • Edit question
  • Lexical based markdown editor to create question
  • Profile page
  • Save to bookmark
  • Answer question
  • Upvote or downvote question
  • Delete/Deactive Account
  • Responsive on phone / Bottom + Sidebar navigtion

Nice to have

  • Dark mode

Requirements

  • Any non-member (guest) can search and view questions. However, to add or upvote a question, they have to become a member.
  • post new questions.
  • add an answer to an open question.
  • add comments to any question or answer.
  • A member can upvote a question, answer or comment.
  • can flag a question, answer or comment, for serious problems or moderator attention.
  • can add a bounty to their question to draw attention
  • earn badges for being helpful.
  • Members can add tags to their questions
  • identify most frequently used tags in the questions.
  • Moderators can close or reopen any question.

Setup

yarn:

yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dx

npm:

npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dx

Requirements

  • Node >= 14
  • Docker (for running Postgres)

Development

Start project

yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dx

Commands

yarn build      # runs `prisma generate` + `prisma migrate` + `next build`
yarn db-nuke    # resets local db
yarn dev        # starts next.js
yarn dx         # starts postgres db + runs migrations + seeds + starts next.js
yarn test-dev   # runs e2e tests on dev
yarn test-start # runs e2e tests on `next start` - build required before
yarn test:unit  # runs normal jest unit tests
yarn test:e2e   # runs e2e tests

Deployment

Using Render

The project contains a render.yaml "Blueprint" which makes the project easily deployable on Render.

Go to dashboard.render.com/blueprints and connect to this Blueprint and see how the app and database automatically gets deployed.

Files of note

Path Description
./prisma/schema.prisma Prisma schema
./src/pages/api/trpc/[trpc].ts tRPC response handler
./src/server/routers Your app's different tRPC-routers

Created by @alexdotjs.