Frontend App

The Xylem frontend is a Next.js 15 application (App Router) with React 19 that provides the primary user interface — a map-based workspace for managing real estate development projects.

Project Structure

xylem-frontend/
├── app/
│   ├── layout.tsx               # Root layout (fonts, providers)
│   ├── page.tsx                 # Home redirect
│   ├── globals.css              # Global styles
│   ├── (auth)/                  # Auth pages (login, register)
│   ├── (app)/                   # Authenticated app shell
│   │   ├── layout.tsx           # App layout
│   │   └── projects/            # Projects section
│   │       ├── page.tsx         # Projects list page
│   │       └── [id]/            # Single project workspace
│   │           ├── page.tsx     # Project detail page (map workspace)
│   │           ├── simulation/  # Simulation controls
│   │           └── solutions/   # Solution explorer
│   ├── components/
│   │   ├── auth/                # Login/register forms
│   │   ├── projects/            # Project-specific components
│   │   ├── shared/              # Shared components
│   │   │   └── GeocoderWrapper/ # Mapbox geocoder integration
│   │   └── ui/                  # Reusable UI elements
│   ├── context/                 # React context providers
│   ├── hooks/                   # Custom React hooks
│   ├── interfaces/              # TypeScript interfaces
│   └── lib/                     # Utility libraries
├── public/                      # Static assets
└── next.config.ts               # Next.js configuration

Key Technologies

Library	Version	Purpose
Next.js	15	React framework with App Router
React	19	UI library
Mapbox GL JS	3.14	Interactive 2D/3D map rendering
react-map-gl	8	React wrapper for Mapbox GL
Three.js	0.176	3D building visualization
dxf-viewer	1.0	CAD file preview in browser
Lucide React	—	Icon library
SunCalc	1.9	Solar position calculations
Turf.js	7.2	Geospatial analysis
Zod	3.25	Schema validation
Axios	—	HTTP client

Environment Variables

Variable	Description
NEXT_PUBLIC_API_URL	Backend API base URL
NEXT_PUBLIC_MAPBOX_TOKEN	Mapbox GL access token

Styling

The app uses CSS Modules (*.module.css) with a dark glassmorphic design aesthetic:

• Dark background with frosted glass panels
• Blue/teal accent colors (matching the Xylem brand)
• Smooth transitions and micro-animations
• Responsive layouts for different screen sizes

Development

# Install dependencies
npm install

# Start dev server (Turbopack)
npm run dev

# Build for production
npm run build

# Start production server
npm run start

info

The dev server uses Turbopack for fast Hot Module Replacement. The production build runs on port 4801 behind Nginx.