Development Setup

Guide for setting up your local development environment and contributing to ShipKit

Development Setup

This guide covers how to set up your local development environment and contribute to ShipKit.

Prerequisites

Before you begin, ensure you have the following installed:

node -v # v18.17 or higher
pnpm -v # v8.0 or higher
git --version # v2.0 or higher
docker -v # v20.0 or higher (optional, for local services)

Getting Started

Clone the Repository

git clone https://github.com/shipkitdev/shipkit.git
cd shipkit

Install Dependencies

# Install dependencies
pnpm install

# Setup git hooks
pnpm setup-git-hooks

Environment Setup

# Copy environment template
cp .env.example .env.local

# Generate development keys
pnpm generate-keys

Required environment variables:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/shipkit_dev"

# Authentication
AUTH_SECRET="generated-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# Email (Resend)
RESEND_API_KEY="re_dev_..."

# Content Management
BUILDER_PUBLIC_KEY="your-builder-public-key"
BUILDER_PRIVATE_KEY="your-builder-private-key"
PAYLOAD_SECRET="generated-payload-secret"

# Other services...

Development Services

Using Docker Compose for local services:

# Start development services
pnpm dev:services

# Or individually
docker compose up -d postgres
docker compose up -d redis

Database Setup

# Push database schema
pnpm db:push

# Generate types
pnpm db:generate

# Seed development data
pnpm db:seed

Development Workflow

Running the Application

# Start development server
pnpm dev

# Start with turbo logging
pnpm dev --trace-turbo

# Start with debugger
pnpm dev:debug

Testing

# Run all tests
pnpm test

# Run unit tests
pnpm test:unit

# Run E2E tests
pnpm test:e2e

# Run specific test file
pnpm test:unit path/to/test.test.ts

# Update snapshots
pnpm test:unit -u

Code Quality

# Lint code
pnpm lint

# Fix linting issues
pnpm lint:fix

# Check types
pnpm typecheck

# Format code
pnpm format

Git Workflow

Branching Strategy

We follow a trunk-based development workflow:

  1. Create feature branches from main
  2. Keep branches short-lived (1-2 days max)
  3. Rebase frequently to stay up to date
# Create feature branch
git checkout -b feature/my-feature

# Stay up to date
git fetch origin
git rebase origin/main

Commit Guidelines

We use conventional commits for clear history:

# Format
type(scope): description

# Examples
feat(auth): add Google OAuth provider
fix(ui): correct button alignment
docs(api): update authentication docs

Types:

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation
  • style: Formatting
  • refactor: Code restructuring
  • test: Tests
  • chore: Maintenance

Pull Requests

  1. Title: Use conventional commit format
  2. Description: Include:
    • What changes were made
    • Why changes were needed
    • How to test changes
    • Screenshots (if UI changes)

Example PR template:

## Description
Brief description of changes

## Changes
- Added X feature
- Fixed Y bug
- Updated Z documentation

## Testing
1. Step one
2. Step two
3. Expected result

## Screenshots
[If applicable]

## Checklist
- [ ] Tests added/updated
- [ ] Documentation updated
- [ ] Types checked
- [ ] Code reviewed

Code Style

TypeScript

// Use explicit types
function add(a: number, b: number): number {
  return a + b;
}

// Use interfaces for objects
interface User {
  id: string;
  email: string;
  name?: string;
}

// Use enums for constants
enum Role {
  USER = "user",
  ADMIN = "admin",
}

// Use type guards
function isUser(obj: any): obj is User {
  return "id" in obj && "email" in obj;
}

React Components

// Use functional components
import { type ReactNode } from "react";

interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
  variant?: "primary" | "secondary";
}

export const Button = ({
  children,
  onClick,
  variant = "primary",
}: ButtonProps) => {
  return (
    <button
      onClick={onClick}
      className={cn(
        "px-4 py-2 rounded",
        variant === "primary" && "bg-blue-500",
        variant === "secondary" && "bg-gray-500"
      )}
    >
      {children}
    </button>
  );
};

Project Structure

shipkit/
├── src/
│   ├── app/             # Next.js App Router
│   ├── components/      # React components
│   ├── lib/            # Utility functions
│   ├── server/         # Server-side code
│   │   ├── actions/    # Server actions
│   │   ├── api/        # API routes
│   │   └── services/   # Internal services
│   └── types/          # TypeScript types
├── public/             # Static assets
├── tests/             # Test files
│   ├── unit/          # Unit tests
│   └── e2e/           # E2E tests
├── scripts/           # Build/maintenance scripts
└── docs/             # Documentation

Common Issues

Database Connection

If you can't connect to the database:

  1. Check if PostgreSQL is running
  2. Verify DATABASE_URL is correct
  3. Ensure database exists
  4. Check network/firewall settings

Build Errors

For build errors:

  1. Clear Next.js cache: rm -rf .next
  2. Remove dependencies: rm -rf node_modules
  3. Clean install: pnpm install
  4. Rebuild: pnpm build

Type Errors

For TypeScript errors:

  1. Run pnpm typecheck for details
  2. Update types: pnpm db:generate
  3. Check tsconfig.json settings
  4. Verify package versions match

Best Practices

Code Quality

  1. Testing

    • Write tests for new features
    • Maintain high coverage
    • Use meaningful assertions
  2. Documentation

    • Document new features
    • Update existing docs
    • Include code examples
  3. Performance

    • Profile before optimizing
    • Consider bundle size
    • Use performance tools

Security

  1. Secrets

    • Never commit secrets
    • Use environment variables
    • Rotate compromised keys
  2. Dependencies

    • Keep dependencies updated
    • Review security advisories
    • Use lock files
  3. Code Review

    • Review security implications
    • Check for vulnerabilities
    • Validate input/output

Getting Help

Related Resources