Skip to main content
Prerequisites:
This guide walks you through setting up Reactive Resume for local development. Whether you’re contributing to the project or customizing it for your needs, these steps will get you up and running.

​
Setting Up Your Development Environment

1

Clone the Repository

git clone https://github.com/amruthpillai/reactive-resume.git
cd Reactive-Resume
2

Install Dependencies

This project uses pnpm as its package manager for its speed and efficiency.
# Install pnpm if you haven't already
npm install -g pnpm

# Install project dependencies
pnpm install
3

Start Infrastructure Services

Start the required services using the development-specific Docker Compose file:
docker compose -f compose.dev.yml up -d
This starts the following infrastructure services:
  • PostgreSQL — Database (port 5432)
  • SeaweedFS — S3-compatible storage (port 8333)
  • Printer — PDF and screenshot generation service (port 4000)
  • Mailpit — Email testing server (SMTP on port 1025, UI on port 8025)
Use compose.dev.yml instead of compose.yml for local development. The development file only includes infrastructure services with ports exposed to your host machine, while the main compose.yml includes the full application stack intended for production deployments.
Wait for all services to be healthy before proceeding. Check with docker compose -f compose.dev.yml ps.
4

Configure Environment Variables

Create a .env file in the project root:
# Server
APP_URL=http://localhost:3000

# Printer (required for local development)
PRINTER_APP_URL=http://host.docker.internal:3000
PRINTER_ENDPOINT=ws://localhost:4000?token=1234567890

# Database
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres

# Authentication
AUTH_SECRET=development-secret-change-in-production

# Storage (SeaweedFS)
S3_ACCESS_KEY_ID=seaweedfs
S3_SECRET_ACCESS_KEY=seaweedfs
S3_ENDPOINT=http://localhost:8333
S3_BUCKET=reactive-resume
S3_FORCE_PATH_STYLE=true

# Email (Mailpit for local development)
SMTP_HOST=localhost
SMTP_PORT=1025
PDF Generation Note: The PRINTER_APP_URL variable is required when running Reactive Resume outside of Docker while the printer service is running inside Docker (which is the case when using compose.dev.yml). The printer needs to reach your local app to render resumes for PDF generation. Since Docker containers cannot access localhost on your host machine directly, you must set PRINTER_APP_URL to http://host.docker.internal:3000. This special hostname allows Docker containers to communicate with services running on your host machine.
Email Testing: The development stack includes Mailpit, an email testing tool. All emails sent by the application will be captured and viewable at http://localhost:8025. No emails will actually be sent to real addresses during development.
5

Run Database Migrations

Apply the database schema:
pnpm run db:migrate
6

Start the Development Server

pnpm run dev
Your local Reactive Resume instance will be available at http://localhost:3000.

​
Available Scripts

Here are the most commonly used scripts during development:

​
Development

CommandDescription
pnpm run devStart the development server with hot reload
pnpm run buildBuild the application for production
pnpm run startStart the production server
pnpm run lintRun Biome linter and formatter
pnpm run typecheckRun TypeScript type checking

​
Database

CommandDescription
pnpm run db:generateGenerate migration files from schema changes
pnpm run db:migrateApply pending migrations
pnpm run db:studioOpen Drizzle Studio (database GUI)

​
Internationalization

CommandDescription
pnpm run lingui:extractExtract translatable strings from code

​
Documentation

CommandDescription
pnpm run docs:devStart the Mintlify docs development server

​
Understanding the Project Structure

Understanding the project structure will help you navigate the codebase: 
reactive-resume/
├── src/
│   ├── components/         # Reusable React components
│   │   ├── ui/             # Base UI components (Button, Card, etc.)
│   │   ├── resume/         # Resume-specific components
│   │   └── ...
│   ├── dialogs/            # Modal dialogs
│   ├── hooks/              # Custom React hooks
│   ├── integrations/       # Third-party integrations
│   │   ├── auth/           # Better Auth integration
│   │   ├── drizzle/        # Database schema & utilities
│   │   └── orpc/           # API routes & services
│   ├── routes/             # File-based routing (TanStack Router)
│   │   ├── builder/        # Resume builder pages
│   │   ├── dashboard/      # User dashboard
│   │   ├── auth/           # Authentication pages
│   │   └── ...
│   ├── schema/             # Zod schemas for validation
│   ├── utils/              # Utility functions
│   └── styles/             # Global CSS styles
├── public/                 # Static assets
├── locales/                # Translation files (.po format)
├── migrations/             # Database migrations
├── docs/                   # Mintlify documentation
└── data/                   # Local data (fonts, uploads)

​
Working with the Database

​
Viewing the Database

Use Drizzle Studio to explore and manage your database: 
pnpm run db:studio
This opens a web-based GUI at https://local.drizzle.studio.

​
Making Schema Changes

  1. Edit the schema in src/integrations/drizzle/schema.ts
  2. Generate a migration: 
    pnpm run db:generate
  3. Apply the migration: 
    pnpm run db:migrate
Always review generated migrations before applying them, especially when working with existing data.

​
Working with Translations

Reactive Resume uses Lingui for internationalization.

​
Adding Translatable Text

Use the t macro for strings or <Trans> component for JSX: 
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";

// For plain strings
const message = t`Hello, World!`;

// For JSX content
<Trans>Welcome to Reactive Resume</Trans>

​
Extracting Translations

After adding new translatable text, extract them to the locale files: 
pnpm run lingui:extract
Translation files are located in the locales/ directory in .po format.

​
Code Quality

​
Linting & Formatting

Uses Biome for linting and formatting: 
# Check and auto-fix issues
pnpm run lint

​
Type Checking

Run TypeScript type checking: 
pnpm run typecheck
Configure your IDE to use Biome for automatic formatting on save. For VS Code, install the Biome extension.

​
Troubleshooting

Another process is using port 3000. Either stop that process or start the dev server on a different port:
PORT=3001 pnpm run dev
Ensure Docker containers are running:
docker compose -f compose.dev.yml ps
docker compose -f compose.dev.yml up -d
Check that PostgreSQL is healthy and accessible on port 5432.
Verify SeaweedFS is running and the bucket exists:
docker compose -f compose.dev.yml logs seaweedfs
docker compose -f compose.dev.yml logs seaweedfs_create_bucket
If the bucket wasn’t created, restart the bucket creation service:
docker compose -f compose.dev.yml restart seaweedfs_create_bucket
The route tree may need regeneration. Run the dev server which auto-generates routes:
pnpm run dev
Or run type checking to see specific errors:
pnpm run typecheck

​
Next Steps

Project Architecture

Deep dive into the project architecture and codebase structure.

GitHub Repository

View the source code and contribute to the project.