Commons App

​Github Code

Frontend

Backend

​​

Overview

 

Commons is a full-stack civic data product that structures and surfaces Canadian federal legislation in near real time. It transforms fragmented parliamentary data from LegisInfo into a unified, searchable system designed to improve clarity, traceability, and accessibility of legislative activity.

The product is built with React and a Node.js/Express backend, with a lightweight machine learning classification layer used to organize bills into categories for improved discoverability.

​

Problem

​

Canadian legislative data is publicly available but difficult to meaningfully use.

Bills are distributed across legacy government systems, formatted inconsistently, and lack a cohesive way to track status, relationships, or progression over time. This creates a high cognitive load for users trying to understand what legislation is active, changing, or relevant. As a result, there is a gap between data availability and data usability.

​

Goal

​

Design a system that reduces friction in how users discover, interpret, and track legislative activity. The focus was on building an information layer that could structure unstandardized civic data into a coherent, navigable product experience.

​

Solution

​

Commons introduces a structured data pipeline combined with automated categorization to transform raw legislative inputs into a usable product experience.

​

Key system decisions included:

• Data normalization layer: Standardized inconsistent LegisInfo data into a structured schema for reliable querying and filtering

• Automated classification layer: Used a lightweight ML-based approach to assign categories to bills, improving discoverability and reducing manual tagging

• Search-first architecture: Prioritized retrieval and filtering over hierarchical navigation models

• Progressive disclosure: Separated high-level summaries from detailed legislative metadata to reduce cognitive load

• State-aware organization: Bills are contextualized by status, chamber, and session to support comparative analysis over time

 

Key Features

​

• Live legislative ingestion pipeline from LegisInfo with structured transformation

• Automated bill categorization system to support browsing and discovery

• Search and filtering system across bill attributes, categories, and status

• Bill lifecycle views showing progression through legislative stages

• Responsive interface optimized for scanning dense informational content

 

System Design

​

• Frontend: React (component-driven UI)

• Backend: Node.js / Express REST API

• Data layer: ETL pipeline converting LegisInfo XML/JSON into a normalized schema

• Classification layer: Lightweight ML-assisted categorization for bill grouping

• Architecture: Decoupled frontend/backend with API-first data consumption

 

Design Focus Areas

​

This project emphasized:

• Designing for high-complexity civic datasets with inconsistent structure

• Building a meaningful information hierarchy from unstructured data

• Applying automated classification to improve content organization and discoverability

• Optimizing for scanability and progressive understanding of dense content

• Balancing data completeness, interpretability, and cognitive load

 

Outcome

 

Commons demonstrates how system design and structured data modelling can improve accessibility of institutional information without oversimplifying it.

The project reflects a shift from interface-level execution to product-level thinking—designing not just screens, but information systems that scale with complexity and evolve with data.