T3000

by @jonhmchan

This is an implementation of the T3 Stack project (Discord) bootstrapped with create-t3-app. It is an expansion of this repository t3-complete to include more opinionated technologies and patterns that are being used more frequently by its creator, @jonhmchan for new projects.

To learn more about the T3 Stack, take a look at the following resources:

Technologies

Server

Next.js, for React based web development

Storage

PostgreSQL, for relational database storage
Prisma, for object relational mapping (ORM), migrations, database GUI
Docker Compose, setup for local database

Data transfer

tRPC, for type-safe data transfer
superjson, for JS serialization on a superset of JSON
NextAuth.js, for authentication

State management

zustand, simple flex style state management

User interface

Tailwind CSS, for styling, user interface, design system
Radix UI, for base user interface components
Storybook, for user interface management
react-hook-form, for hooks-based forms
[@next/font], for optimized fonts
lucide, for icons
Autoanimate, for drop-in React animations

Testing

Playwright, for end-to-end (e2e) testing
Vitest, for unit/integration tests, has API compatibility with Jest

Analytics

Plausible, for analytics and event tracking
Sentry, for monitoring

Messaging

Twilio, for SMS
SendGrid, for emails

Billing

Stripe

Machine learning

Open AI

Deployment

GitHub, for version control and CI/CD
Vercel, for highly integrated Next deployment
Neon, for serverless branchable Postgres

Getting Started

Install deps

pnpm install

Start the db

docker compose up -d

Update env and push the schema to the db

cp .env.example .env
pnpm prisma db push

Start the dev server

pnpm dev

Run the tests

pnpm test:unit:watch

Local Development

Open Prisma Studio for local database GUI

npx prisma studio

Open Storybook for local component GUI

pnpm run storybook

Connect to production database

psql -h pg.neon.tech

Testing

There are several pnpm test commands you can use for local testing:

Run all tests with a coverage report

This will run all unit tests, e2e tests, and provide a coverage report. pnpm dev should not be running.

pnpm test

Unit tests

pnpm test:unit

While watching for changes while pnpm dev is running:

pnpm test:unit:watch

End-to-end (e2e) tests

pnpm dev should NOT be running when running e2e tests locally. This is because Playwright will start the server on the same port and there may be unexpected side effects due to conflicts.

pnpm test:e2e

There is no support for e2e tests in watch mode.

Coverage report

Testing uses c8 for coverage support. To get a report:

pnpm test:unit:coverage

While watching for changes while pnpm dev is running:

pnpm test:unit:coverage:watch

Deployment

This repository is attached to GitHub and requires all new code to be built in a branch with all tests, linting, and type checking to pass before merging and deploying automatically. These rules also apply to GitHub administrators.

Ensure prettier has run with pnpm format
Ensure tests pass with pnpm test
Push to remote branch and wait for tests to pass (see .github/workflows/ci.yml)
Merge into main, triggering automatic deploy by Vercel

Pull Requests

We use the following conventions when naming branches:

feat/* is for net new features
bug/* is for a bug fix
test/* is for any tests, typically for the pipeline