This repository provides the frontend component for the smart city web solution LautrerWissen. It delivers a user-friendly, interactive, responsive and accessible data experience, visualizing Smart City insights for citizens in an intuitive interface.

A major focus of the frontend lies in geospatial data, integrated into an interactive map view. Additional insights such as elections, city statistics, visualizations, plots, events, construction sites and grafana dashboards are embedded in dedicated pages. The frontend has the following features:

• 📱 Progressive Web App (PWA) – Installable on mobile and desktop as a full progressive web app
• 🎨 Fully Responsive UI – Automatically adapts to all screen sizes (mobile, tablet, desktop, ultrawide)
• 🔁 REST API Integration – Retrieves map layer configuration and city data from backend (geo objects, statistics, elections)
• 🐳 Docker Production Deployment – Alpine-based Node container optimized for size and performance
• 🗺️ Geospatial Smart City Data Visualization – Interactive map with dynamic layers & geo objects
• 📊 Embedded Dashboards – Analytics and statistics pages powered by Grafana
• 📡 Real-time sensor values via a configurable WebSocket endpoint
• 🎨 TailwindCSS Styled Interface – Clean and scalable utility-based styling
• 🔎 Map Layer Configurable – Backend-driven or default fallback layer configuration
• ⚙️ Fallback / Default Data Support – Local defaults auto-activate if backend API is unreachable

All data is dynamically retrieved from the LautrerWissen Backend using a REST API and WebSockets. To ensure resilience, the frontend contains fallback default values if the backend is unavailable.

The frontend is based on the following tech-stack:

The frontend is build in a modular manner and contains resuable app components. The solution has the following architectural structure:

Before running the application, set environment variables for configuration.

cp .env.example .env.local

Update .env.local file and set values for environment-specific endpoints and additional info (Backend API domain, WebSocket endpoint, Plausible analytics script host & tracked domain, Contact email address). When starting the development server locally, pnpm will pick up values from this file.

Remove the .env file from the project. The environment variables are passed in docker during the build process. See below how to pass them.

This project leverages Tailwind CSS, a modern utility-first CSS framework, for streamlined and maintainable styling, ensuring pixel-perfect responsiveness across all target devices. Global design settings such as colors, spacing, and font sizes can be configured centrally in:

tailwind.config.ts

Adjusting these values will update the styling across the entire application.

The frontend uses a set of predefined default values to ensure baseline functionality and interface stability. These values serve as a fallback mechanism and can be customized to reflect project-specific UI defaults.

In the event that the backend becomes temporarily unavailable — for example, during deployments, maintenance, or updates — the frontend will automatically revert to these stored defaults to preserve usability, specifically within navigational and map-related interface components.

The default configurations can be adjusted in the following files:

• mapSidebarDefaultConfig.ts Defines fallback values for the map sidebar, including group structures, displayed layers and endpoint mappings.
• NavigationBarDefault.ts Contains defaults for the main application navigation, including labels, menu structure.

After modifications, redeploy the frontend to ensure updated fallback settings are loaded.

For running the frontend without using docker (e.g. for local development), ensure required packages are installed and start the development server as follows:

Install dependencies:

pnpm install

Start development server:

pnpm dev

Open http://localhost:3000 with your browser to see the frontend.

Important note: For the connection to the backend API to serve application data, make sure your backend API is accessible on the host and the endpoint is set correctly in your environment variable!

The frontend component is deployed via a Node Alpine docker container. For local testing with docker or for ensuring that the frontend can be served via the production ready node image, run the following:

Build the frontend image (locally):

docker build \
  --build-arg NEXT_PUBLIC_API_BACKEND=your-domain \
  --build-arg NEXT_PUBLIC_API_WEBSOCKET_ENDPOINT=your-endpoint \
  -- ...
  -t lautrerwissen-frontend .

In this case, pass all environment variables defined in the.env.example file.

Run the container (locally):

docker run -p 3000:3000 lautrerwissen-frontend

To deploy the component in the production environment together with the backend components, please use the docker-compose file in the backend repository to ensure the components are on the same docker network, logging stack, etc. Make sure that this repository is located at the same level as the backend project folder and run the following:

docker compose -f ./compose.yaml up --build frontend

In this case environment variables are already passed in the docker compose file.

This project uses open-source components, including:

• Docker — Apache-2.0
• Next - MIT license
• Tailwindcss - MIT license

For a complete list of third-party licenses (including transitive dependency licenses), see the NOTICE.md file for a compact view and THIRD-PARTY-NOTICES_FULL.md for the license of each dependency in the project root.

E-Mail: info[at]vision-impulse.com

© 2025 Vision Impulse GmbH • License: AGPLv3
Implemented by Vision Impulse GmbH