⚠️ STADTPULS HAS BEEN DISCONTINUED
Stadtpuls' pilot phase is over and the project isn't maintained anymore. If you wish to know why, read the blog post If you wish to download or clone the working code of this repository, use the latest pre-shutdown release.

---

Stadtpuls (Frontend)

This repository contains the frontend of the platform Stadtpuls of Technologiestiftung Berlin. It is built using Next.js, TypeScript, visx, and a wrapper for Mapbox GL.

The API for authenticating and posting from external sources (e.g. The Things Network) can found in a different repository.

Getting started

Clone this repository, then on the root level create a file named .env or .env.development.local and fill in the required values (see .env.example for a reference).

The actual API is mocked in dev mode using a Mock Service Worker (msw).

Run npm install to install all required dependencies and then npm run dev to start developing locally. All available script can be found further down.

Quality management

We use husky and lint-staged to run some quality management script before each commits. These scripts are:

• Lint all js files
• Type-check changed typescript files
• Run tests concerned by changed files

To enable type checking of only staged files, a script has been added scripts/tsc-lint.sh. To allow this script to run, you might need to give it the relevant permissions. Run chmod +x scripts/tsc-lint.sh. The script is needed because there is otherwise no way to run tsc only on staged files. Typescript only allows for either a list of files or a tsconfig.json.

Structure

The folder structure follows Next.js's recommendations.

Views and components

Page routing is achieved with Next.js's file-system routing. The views themselves are simply React components that can be found in src/components. All other components can be found there as well.

Storybook

We use Storybook to create and test our React components in isolation. We also use the storyshots addon to create test snapshots.

Testing

We use jest to unit test our code. We also use a testing-library to test our react components, user events, and other things.

To run the tests enter:

npm t

Or in watch mode:

nom run test:watch

Requests

Requests to the Supabase API and our custom API are defined in various request utility functions located in src/lib/requests/ and src/lib/hooks/.

Styling

For styling we use TailwindCSS. Configuration can be found in tailwind.config.js.

Workflow

New features, fixes, etc. should always be developed on a separate branch:

1. In your local repository, checkout the main branch.
2. Run git checkout -b <name-of-your-branch> to create a new branch (ideally following Conventional Commits and with a reference ID).
3. Make your changes
4. Push your changes to the remote: git push -U origin HEAD
5. Open a pull request.

You can commit using the npm run cm command to ensure your commits follow our conventions.

Deployment

The frontend is currently deployed to Vercel. Pushing to the main branch will automatically trigger a new deploy (avoid to push directly to main and rather create pull requests).

Contributors

Thanks goes to these wonderful people (emoji key):

Dennis Ostendorf 💻 🎨 🖋 📖

Lucas Vogel 💻 🎨 📖

Ingo Hinterding 🖋 📖

Julia Zet 🖋 📖

Fabian Morón Zirfas 💻 📖

lucasoeth 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Content Licencing

Texts and content available as CC BY.

Credits

A project by

Supported by