Inspiration

Civitas was inspired by the increasing fragmentation of news consumption, where readers are often exposed to a single outlet’s framing of events without context from alternative sources. In practice, this leads to incomplete understanding of events and reinforces existing bias rather than challenging it. The goal was to create a system that reconstructs the full narrative of a story by aggregating how it is reported across multiple publishers and allowing users to see differences directly.

What it does

Civitas is a news platform that organizes reporting around individual stories rather than individual articles. For each story, users can compare coverage from multiple outlets, view an AI-generated summary of the event, and see a structured bias indicator derived from source framing. Users can also contribute annotations, corrections, and context through a community layer. In addition, the platform surfaces citizen-submitted reports alongside traditional news sources to provide a broader information landscape.

How I built it

The frontend is built using React and Next.js with a scroll-based, slide-driven interface for the landing experience and a card-based discovery system for browsing stories. Styling is handled with SCSS using a minimalist design system centered around typography and whitespace. On the backend, I integrate the NewsAPI to aggregate articles across publishers and group them into unified story clusters. AI summarization and bias tagging are generated using a language model pipeline that processes clustered articles. Community annotations are stored and retrieved through an API layer connected to a persistent database.

Challenges I ran into

One of the main challenges was reliably clustering articles that describe the same event but use different wording, headlines, or publication contexts. Early versions over-grouped unrelated stories or failed to merge clearly connected ones. Another challenge was maintaining consistent UI behavior in the scroll-based landing page across different devices and input types, particularly trackpads and mobile gestures. I also had difficulty balancing AI-generated summaries so that they remained neutral while still capturing meaningful distinctions in framing.

Accomplishments that I'm proud of

I am proud of building a unified system that connects multiple layers of news consumption, including aggregation, comparison, AI analysis, and community contribution. The ability to see the same event across different outlets in one interface is a core achievement. I also consider the integrated design system and the smooth transition between discovery, comparison, and analysis views to be a strong execution of the original concept.

What I learned

I learned how complex news aggregation becomes when moving beyond simple article feeds into story-level grouping. I also gained experience working with AI systems for summarization and classification, particularly around controlling for neutrality and consistency. On the frontend, I learned how scroll-based interfaces and animated transitions can significantly impact usability and require careful constraint to avoid instability.

What's next for Civitas: Citizen Journalism

The next step is expanding the platform into a more active citizen journalism ecosystem. This includes improving the submission system for user-generated reports, adding verification signals for community content, and enhancing the bias visualization tools to make framing differences more explicit. I also plan to improve clustering accuracy, expand data sources beyond NewsAPI, and introduce personalization features so users can track stories based on interest while still being exposed to diverse perspectives.

Built With

• express.js
• html
• javascript
• newsapi
• ollama
• react
• scss