💻Developer Resources

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

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

🗺️ Codebase Exploration

Understanding the Architecture

Deepwiki

Visit Deepwiki →

• Best for: Quick exploration without cloning the repo

• How: Visit deepwiki.com, paste FormSG's GitHub URL

• Use cases: Understanding architecture, finding implementation details, exploring API endpoints

Repository Structure

Key directories to understand:

• /src - Backend Node.js application

• /frontend - React frontend application

• /shared - Shared TypeScript types and utilities

• /serverless - AWS Lambda functions (virus scanning, etc.)

🤖 AI-Powered Code Analysis

Repomix

Get Repomix →

• Best for: Creating codebase summaries for AI assistants

• How: npx repomix in the FormSG directory

• Use cases: Generating context for Claude, ChatGPT, or other LLMs when asking architecture questions

💻 Development Environment

AI-Native Development

Cursor

Download Cursor →

• Best for: AI-native development with full codebase awareness

• Setup: Open FormSG folder in Cursor, let it index the codebase

• Use cases: Writing new features, refactoring with context, understanding complex code flows

VS Code + GitHub Copilot

Get Copilot →

• Best for: In-line code suggestions while developing

• Setup: Install VS Code extension, authenticate with GitHub

• Use cases: Autocomplete, following existing patterns, generating boilerplate

🔧 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