> For the complete documentation index, see [llms.txt](https://international.open.gov.sg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://international.open.gov.sg/self-hosting/formsg/developer-resources.md).

# 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://international.open.gov.sg/self-hosting/formsg/developer-resources.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.