We (Delta10 and Frameless) are developing a new web form for Signalen, an open source application for municipalities for reports about the public space.
Our goals are to:
- be fully compliant with WCAG 2.1 conformance level AA for compliance with Dutch law ("Toegankelijkheidsstatus A");
- support NL Design System;
- and have multi-language support.
The frontend can easily be customized by configuring a single JSON file.
First, install the dependencies:
npm install
Set the environment variables in a .env
file:
NEXT_PUBLIC_BASE_URL_API=http://127.0.0.1:8000
NEXT_PUBLIC_MAPTILER_API_KEY=
NEXT_PUBLIC_MAPTILER_MAP=https://api.maptiler.com/maps/nl-cartiqo-topo
NEXT_PUBLIC_PDOK_URL_API=https://api.pdok.nl/bzk/locatieserver/
NEXT_PUBLIC_MAPTILER_MAP_DARK_MODE=https://api.maptiler.com/maps/streets-v2-dark
Customize the .env
configuration file for yourself:
NEXT_PUBLIC_MAPTILER_API_KEY
: visit the MapTiler website and create a free account. Login to go to the API Keys page for MapTiler Cloud. Create a new key for your development computer. Allowlocalhost
as origin. Copy the key and assign it toNEXT_PUBLIC_MAPTILER_API_KEY
in.env
.NEXT_PUBLIC_MAPTILER_MAP
: go the to Maps page for MapTiler Cloud and either pick an existing map or create a new map. Copy the first part of the "Use vector style" URL, everything before/style.json?key=
. Assign that first part of the URL toNEXT_PUBLIC_MAPTILER_MAP
.- Users can specify a different map theme for dark mode, which is triggered when the browser's preferred style theme is set to dark. To implement this, set the
NEXT_PUBLIC_MAPTILER_MAP_DARK_MODE
environment variable to the desired dark mode theme.
Then start the Next.js development server:
npm run dev
Open http://localhost:3000 with your browser to see the web form.
- Next.js with the App Router for the web application.
- NL Design System for components.
- React Hook Form for form logic, validation, and more.
- Zod for object validation.
- zustand for global state management.
- next-intl for internationalization (i18n), enabling multi-language support in the frontend.