Bridge Image

Bridge

An internal tool for managing the water restriction platform via the Water Restrictions API. Built with Nuxt.

I originally built Bridge to simplify updating water restriction data, which I had previously been doing with manual HTTP requests to the Water Restrictions API. It has become my hub for the water restrictions platform, incorporating feedback and domain events for auditing purposes too. It’s built with Nuxt and Vue.js.

Implementation ⚙️

Tech stack This project uses my standard platform setup.

Frontend:

Backend:

Infrastructure:

Entities and relationships

The Water Restrictions API is the gatekeeper for all water restriction data. Bridge interacts with it to manage the data. For some context on the content of this page, here are the main entities and their relationships:

Water Restriction Data

  • Organisations are responsible for setting water restrictions for one or more areas. Typically, this is a local council or water entity.
  • Areas are geographical locations, such as a region, city or town, where water restrictions can apply.
  • Schemes are defined sets of water restriction stages. They can apply to one or more areas.
  • Stages represent levels of water restrictions, typically increasing in severity (eg. Level 1, Level 2, etc.).

Platform

  • Feedback is user-submitted messages for issues or improvement suggestions about the platform. This will be available on the public website in future.
  • Domain Events are records of significant actions taken within the system. They help with auditing and tracking changes over time.

Presenting Data and Actions 💻

Using shadcn/vue made the UI development much easier. It’s lightweight and flexible, and the integration with Tailwind CSS made it easy to customise the design to fit my needs.

Bridge is mainly a data management app so most of the data is presented in tables. Shadcn allowed me to create a reusable table component that is used across most pages providing a consistent experience. It provides optional features for a text filter and actions above the table, actions within a dropdown menu within each row, and pagination.

Modals for Explicit Actions 🎯

All important actions take place in modals. This keeps the interface clean and focused, and prevents accidental changes from simple button clicks.

Area’s also have boundaries defined by a GeoJSON MultiPolygon object. While the boundary is not displayed on a map in Bridge (these are modified in a GIS tool), the boundary can be edited as raw GeoJSON within Bridge.

For performance, a Monaco live code editor component is used to provide syntax highlighting and validation. This was used because a Textarea component was simply too laggy for the amount of data it had to hold.

Feedback 📝

When the public website has been launched, I’m planning to have a mechanism in place for anonymous feedback submission. This will be presented in Bridge for me to review and then delete once addressed.

Domain Events 📜

The events page shows all recorded domain events that have occurred in the system. This is useful for auditing and tracking changes over time. The events can be filtered by a number of parameters, including data for all columns shown in the table as well as by date range.

The overall platform is being designed with data privacy front of mind. Data will be kept only as long as needed as is anonymised where possible, although domain events will be necessary for auditing purposes.

Reflections 💭

Bridge has been a great way to brush up on my front end skills and try out both Nuxt and shadcn. Although it’s intended only to be used by myself for now, it’s nice to have a friendly UI for managing the water restrictions platform now and going forward as I add new features.