# Developer Resources

This guide provides tools and workflows to help you efficiently develop, debug, and customize FormSG.

### :map: Codebase Exploration

#### Understanding the Architecture

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Deepwiki</strong></td><td><p><a href="https://deepwiki.com/opengovsg/FormSG"><strong>Visit Deepwiki →</strong></a></p><ul><li><strong>Best for:</strong> Quick exploration without cloning the repo</li><li><strong>How:</strong> Visit deepwiki.com, paste FormSG's GitHub URL</li><li><strong>Use cases:</strong> Understanding architecture, finding implementation details, exploring API endpoints</li></ul></td></tr><tr><td><strong>Repository Structure</strong></td><td><p><strong>Key directories to understand:</strong></p><ul><li><code>/src</code> - Backend Node.js application</li><li><code>/frontend</code> - React frontend application</li><li><code>/shared</code> - Shared TypeScript types and utilities</li><li><code>/serverless</code> - AWS Lambda functions (virus scanning, etc.)</li></ul></td></tr></tbody></table>

#### :robot: AI-Powered Code Analysis

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Repomix</strong></td><td><p><a href="https://repomix.com/"><strong>Get Repomix →</strong></a></p><ul><li><strong>Best for:</strong> Creating codebase summaries for AI assistants</li><li><strong>How:</strong> <code>npx repomix</code> in the FormSG directory</li><li><strong>Use cases:</strong> Generating context for Claude, ChatGPT, or other LLMs when asking architecture questions</li></ul></td></tr></tbody></table>

### 💻 Development Environment

#### AI-Native Development

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Cursor</strong></td><td><p><a href="https://cursor.com/"><strong>Download Cursor →</strong></a></p><ul><li><strong>Best for:</strong> AI-native development with full codebase awareness</li><li><strong>Setup:</strong> Open FormSG folder in Cursor, let it index the codebase</li><li><strong>Use cases:</strong> Writing new features, refactoring with context, understanding complex code flows</li></ul></td></tr><tr><td><strong>VS Code + GitHub Copilot</strong></td><td><p><a href="https://github.com/features/copilot"><strong>Get Copilot →</strong></a></p><ul><li><strong>Best for:</strong> In-line code suggestions while developing</li><li><strong>Setup:</strong> Install VS Code extension, authenticate with GitHub</li><li><strong>Use cases:</strong> Autocomplete, following existing patterns, generating boilerplate</li></ul></td></tr></tbody></table>

### 🔧 Common Development Patterns

#### FormSG Architecture Patterns

**Frontend (React + TypeScript)**

* Uses React Query for API state management
* Chakra UI for component library
* React Hook Form for form handling
* Custom hooks for business logic

**Backend (Node.js + Express)**

* Mongoose for MongoDB interactions
* Express.js with TypeScript
* Microservice architecture for specific features
* Environment-based configuration

**Key Files to Understand**

* `/src/app/routes` - API endpoint definitions
* `/frontend/src/features` - Feature-based frontend organization
* `/shared/types` - TypeScript interfaces shared between frontend/backend
* `/src/app/models` - Mongoose database schemas