Skip to main content

Frontend Monorepo Design

The frontend is set up as a monorepo workspace managed via pnpm and built using turborepo. It separates applications from shared modular libraries (packages) to promote code reuse.

📂 Frontend Layout​

Located under frontend/:

frontend/
├── apps/
│   └── stacgis/          # Main client application (React + Vite)
├── packages/
│   ├── map/                  # Shared map viewer and drawing components
│   ├── ui/                   # Modular design UI kits (Button, Modal, etc.)
│   ├── charts/               # Common data charting utilities
│   ├── language/             # Internationalization setup (i18n)
│   ├── accessibility/        # Accessibility helper scripts
│   └── cookie-consent/       # Consent banner shared components
├── package.json              # Monorepo configuration
├── pnpm-workspace.yaml       # Defines workspace paths
└── turbo.json                # Turborepo execution pipeline cache configuration

1. Applications (apps/)​

  • stac-gis (apps/stacgis): The primary interface. It features dashboard metrics, GIS mapping toolbars, an admin panel for data management (collections, vectors, users, knowledge base), and an integrated Chat Widget that communicates with the Backend AI agent loop.

2. Shared Packages (packages/)​

To prevent code duplication, shared components are published as local packages and imported like normal npm modules:

UI Kit (packages/ui)​

A custom component library implementing the visual design system:

import { Button, Card } from '@stacgis/ui';

Map Engine (packages/map)​

Wraps Leaflet and Mapbox GL JS map configurations. It exports components like MapContainer, DrawingToolbar, and coordinate transformation functions.

import { MapContainer, DrawingTools } from '@stacgis/map';

This ensures every application built on the monorepo renders identical maps and shares the same drawing logic.