Semicolon

A simple Twitter/X clone built with Next.js.

What's inside?

This monorepo includes the following packages/apps:

Apps and Packages

• web: a Next.js app
• @semicolon/ui: a collection of primitive UI components based on shadcn/ui
• @semicolon/db: a PostgreSQL database client powered by Prisma and Kysely
• @semicolon/auth: Authentication logic implemented using Auth.js
• @semicolon/api: tRPC API routes with OpenAPI support thanks to trpc-openapi and Scalar
• @semicolon/eslint-config: eslint configurations
• @semicolon/typescript-config: tsconfig.jsons used throughout the monorepo
• @semicolon/tailwind-config: shared tailwind configuration

Each package/app is 100% TypeScript.

Utilities

This monorepo has some additional tools already set up for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• Vitest for unit testing

Develop

1. Set up your database environment

   To get started, you can use the provided Docker Compose file to quickly set up a PostgreSQL server:

   docker compose up -d
   echo "POSTGRES_PRISMA_URL=postgresql://postgres:postgres@localhost:5432/semicolon" >.env
   for p in apps/web packages/db packages/api; do ln -s ../../.env $p; done

   If you want to run your own custom server, make sure you adjust the environment variable above.

2. Migrate the database

   Run the following command to migrate and synchronize your database with the schema:

   npx prisma migrate dev

   Optionally, you can also seed the database for testing purposes:

   npx prisma db seed

3. Set up authentication secrets

   This project supports the following Auth.js providers:

   • Google
   • Discord
   • GitHub
   • Resend

   Refer to each of the documentation above for setup instructions. Your .env.local file should be located in apps/web.

4. Launch

   npm run dev

   And that's it. Everything should be set up now.

   By default, the dev environment will launch these apps in the following ports:

   • 3000: The main Next.js web app
     • /api/trpc/*: tRPC routes
     • /api/*: OpenAPI routes
       • /api/docs: OpenAPI documentation
   • 5555: IDE for interacting with the PostgreSQL database