Development

This section provides guides for developing within the Sustentus monorepo.

Overview

The Sustentus monorepo uses modern development tools and practices:

• Turborepo: Task orchestration and caching
• pnpm Workspaces: Package management
• TypeScript: Type safety across all packages
• Hot Module Replacement: Fast feedback during development
• Linting & Formatting: Consistent code quality

Quick Start

Run all applications:

pnpm dev

Run specific applications:

pnpm marketing:dev    # Port 3001
pnpm docs:dev         # Port 3003
pnpm storybook:dev    # Port 3002

Run packages in watch mode:

pnpm packages:dev     # Both packages
pnpm ui:dev          # UI package only
pnpm services:dev    # Services package only

Build, lint, and format:

pnpm build           # Build everything
pnpm lint            # Run ESLint
pnpm format          # Format with Prettier
pnpm clean           # Clean build outputs

Build-specific targets are also available: pnpm marketing:build, pnpm docs:build, pnpm storybook:build, pnpm packages:build.

Development Topics

Workflow

How features actually ship here — the /pipeline ICM delivery pipeline:

• The four gated stages: Define, Build, Ship, Release
• Branch and PR management (driven by the pipeline, not by hand)
• Code review and merge as the Ship stage
• Daily dev, testing, and debugging

Build System

Turborepo configuration, task dependencies, caching, and build optimization.

Code Style

TypeScript conventions, React patterns, file organization, and naming conventions.

Development Environment

Required Tools

• Node.js >= 22
• pnpm >= 10
• Git
• VSCode (recommended)

Recommended VSCode Extensions

• ESLint: Real-time linting
• Prettier: Code formatting
• TypeScript: Enhanced TypeScript support
• Tailwind CSS IntelliSense: Tailwind class autocomplete
• MDX: MDX syntax highlighting

Setup

1. Clone repository
2. Install dependencies: pnpm install
3. Set up environment variables (see Getting Started)
4. Run development servers: pnpm dev

A typical flow is to run shared packages in watch mode (pnpm packages:dev) alongside the app you are working on (e.g. pnpm marketing:dev); changes to packages or app code update via HMR. When working on UI components, run pnpm ui:dev and pnpm storybook:dev together to see changes hot-reload in Storybook. Run pnpm lint and pnpm format before committing.

Port Reference

Learn More

• Workflow Guide
• Build System
• Architecture
• Applications
• Packages