Skip to main content

Project Workflow

The frontend guides users through a multi-stage workflow from project creation to solution selection.

Workflow Stages​

┌──────────────┐     ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   Create     │────▶│   Configure  │────▶│   Simulate   │────▶│   Explore    │
│   Project    │     │   Variant    │     │   Generate   │     │   Solutions  │
│              │     │              │     │              │     │              │
│ • Name       │     │ • Product    │     │ • Run tower  │     │ • View 3D   │
│ • Upload DWG │     │   mix (BHK   │     │   optimizer  │     │ • Compare   │
│ • Set tags   │     │   types &    │     │ • Generate   │     │ • Solar     │
│              │     │   counts)    │     │   floorplates│     │   analysis  │
│              │     │ • Metadata   │     │ • Score      │     │ • Select    │
│              │     │   config     │     │   solutions  │     │   winner    │
└──────────────┘     └──────────────┘     └──────────────┘     └──────────────┘

1. Project Creation​

Route: /projects

The projects list page shows all projects the user has access to (owned + shared). Users can:

  • Create a new project with name, tags, and location
  • Upload a DWG survey map file
  • View project cover images and status

2. Project Detail / Map Workspace​

Route: /projects/[id]

The main workspace for a project. Features:

  • Full-screen Mapbox map with the site boundary overlaid
  • GIS layers from the Geo Server
  • Side panels for project details and variant management
  • DXF file preview using the dxf-viewer library

3. Variant Configuration​

Users create variants within a project, each with a different product mix:

{
  "productMix": [
    { "bhkType": "2BHK", "count": 40, "percentage": 40 },
    { "bhkType": "3BHK", "count": 30, "percentage": 30 },
    { "bhkType": "2.5BHK", "count": 30, "percentage": 30 }
  ]
}

Additional metadata can configure:

  • Target FAR (Floor Area Ratio)
  • Number of towers
  • Floor count targets
  • Setback overrides

4. Simulation​

Route: /projects/[id]/simulation

Triggers the backend to call the simulation engine. The process:

  1. Backend sends site geometry + product mix + constraints to the Simulation Engine (port 4902)
  2. Tower optimizer generates multiple configurations
  3. Floorplate generator assembles unit layouts for each floor
  4. Solutions are scored and ranked by overallScore
  5. Results are stored as ProjectVariantSolution records

5. Solution Explorer​

Route: /projects/[id]/solutions

Interactive 3D visualization of generated solutions:

  • 3D map view — Extruded building footprints on the Mapbox map
  • Metrics dashboard — FAR, BUA, unit counts, efficiency ratios
  • Solution comparison — Side-by-side metrics of different solutions
  • Solar analysis — Sun position and shadow overlays
  • Solution selection — Mark the best solution as the variant's final choice

State Management​

The frontend uses React Context for state management:

  • AuthContext — JWT tokens, user info, login/logout
  • ProjectContext — Current project data and active variant
  • MapContext — Viewport state, selected layers, active tools