Cailloux 🪨🪨🪨

Table of contents

• Stack
• Project Structure
• Quickstart
• Development
• Deployment
• Debugging
• Tools
• Stack documentation

Stack

Development Environment and Tools

• Turborepo - Monorepo build system & codegen
• Bun – Fast npm-compatible package manager
• Github actions - Lint, Build & Apply your database migrations
• Biome - Lint & Format
• T3-env - Manage your environment variables

Backend and Database

• Next.js – Fullstack Framework
• Supabase – Database Provider
• Prisma – ORM
• Lucia – Auth

Frontend Frameworks and Libraries

• React Hook Form – Form Validation
• next-themes – Dark mode support
• Tailwind - CSS Framework
• shadcn/ui - Component Library
• Ladle - Tool for developing React components
• TypeScript – Language

API and Validation

• tRPC - End-to-end typesafety API Layer
• Zod - Schema validation library

Email and Logging

• React Email - Email Templates
• Resend – Transactional emails
• Pino – Logger

Project structure

.
├── .github/                    # Github workflows
├── .vscode/                    # VSCode recommended plugins & config
├── apps/                       # The magic happens here
│   └── web/                    # Next.js app
├── packages/
│   ├── db/                     # Datamodel & migrations with Prisma
│   ├── emails/                 # Emails with react-email
│   ├── tailwind/               # Shared tailwind configuration
│   ├── tsconfig/               # Shared tsconfig
│   └── ui/                     # React component library with Ladle
├── turbo                       # turbo generators
├── .editorconfig               # editorconfig
├── .gitignore                  # gitignore
├── .nvmrc                      # nvm config
├── biome.json                  # biome linter & formatter config
├── bun.lockb                   # bun lockfile
├── commitlint.config.ts        # commitlint config
├── docker-compose.yml          # docker-compose
├── package.json                # build scripts and dependencies
├── README.md                   # This file ;)
├── tsconfig.json               # ~root tsconfig
└── turbo.json                  # Turborepo config

Quickstart

To get a local copy up and running, please follow these simple steps:

Prerequisites

Here is what you need to be able to run the application:

• Bun
• Node.js >=20.x (Or LTS)
• Node Version Manager (fnm)
• Docker

Install dependencies

bun install

Set up database & environment variables

Prior to starting the application locally, run the init-setup.sh script, it will:

• Create a docker container for your local Postgres database
• Copy the .env.example files in apps/web & packages/db.
• Apply existing datamodel migrations, seed & generate the prisma client.

sh ./init-setup.sh

Set up your .env files

• Use openssl rand -hex 32 to generate a key and add it under ARGON_SECRET in the apps/web/.env file.

Configure the rest of the environment variables for the following:

• RESEND_API_KEY

Run the dev server

You can start the app using this command:

bun run dev

Development

Commands

# serve the application
bun run  dev

# migrate the database
bun run db:migrate

# seed the database
bun run db:seed

# run all tests
bun run test

Deployment

Vercel

Easily deploy your Next.js app with Vercel by clicking the button below:

Debugging

Debug & tracing are active by default on dev environments.

Debugging the Docker instance:

# List your containers
docker ps

# Check log for a specific container
docker logs -f e339bca6290c

Tools

Install recommended extensions for vscode, see .vscode/extensions.json

Scripts overview

The following scripts are available in the package.json:

• build: Build the packages & applications in the monorepo
• dev: Run development server
• db:generate: Generate the Prisma client
• lint: Lint accross apps & packages
• format: Checks & fix formatting issues
• generate: Turbo gen CLI
• generate:component: Bootstrap a new component under packages/ui
• generate:package: Bootstrap a new package under packages/
• update-deps: Check dependencies in the monorepo
• test: Run all tests

Stack documentation

tRPC

• Concepts
• Response Caching

Prisma

• Prisma Docs
• Concepts

Language

• Mozilla JavaScript References
• Typescript Docs

React/ Next.js

• Next.js
• Thinking in React

UI

• Tailwind CSS
• Ladle
• ShadCN

Turborepo

• Environment Variable Inputs
• Configuration Options
• Task Dependencies