Civic Discussion Bridge

A web based chat that translates, understands tones, fact checks, and promotes positive discussion and discourse.

Comment

Inspiration

I was inspired by the lack of decorum in internet interaction, even on important world topics. Confusion and lack of evidence sparks outrage, and outrage prevents anything from getting done. When discourse takes place through flat text, nuance is completely lost. Sarcasm, conviction, and frustration get mixed up, and without immediate factual grounding, conversations derail into hostility. According to Pew Research, 64% of people find online political discussions stressful and polarizing. I wanted to build a platform that directly addresses this "text penalty"—restoring empathy, fact-checking claims in real time, and helping people find common ground instead of talking past one another.

What it does

My project builds a chat room that automatically understands the tone you were using, fact checks claims, can read text out loud with proper vocal inflections, and summarize with feedback.

Tone Detection & Emotion Badges: Every message is analyzed using fast LLM inference (Groq running Qwen 3.8-27b) to surface emotional subtext (like Passionate, Inquisitive, or Constructive), preventing participants from misinterpreting enthusiasm as aggression.

Voice Input & Synthesis: Users can dictate messages with the Web Speech API and click to listen via ElevenLabs, hearing translated perspectives with natural human prosody.

Live RAG Fact-Checking: With one click, factual assertions are verified against real-time, peer-reviewed Wikipedia references, returning an impartial, localized verdict (Verified, Needs Context, or Questionable) with citation links.

Consensus Summaries: An on-demand civic mediator analyzes the entire chat history, mapping out disagreements while spotlighting shared values and areas of agreement.

How we built it

Using AI assistance I separated work into front-end html and back-end javascript, with helper files to assist AI integration and testing.

Frontend: Built with vanilla HTML5, CSS, and modern JavaScript, utilizing the native Web Speech API (webkitSpeechRecognition) for direct microphone dictation without heavy dependencies.

Backend & WebSockets: Implemented with Node.js and Express, using Socket.io for low-latency bidirectional messaging.

AI & Retrieval Pipelines: Integrated Groq's high-speed inference engine for sub-second translations and JSON-structured tone analysis, the Wikipedia Search and Summary REST API for grounded RAG verification, and ElevenLabs for dynamic voice synthesis.

Authentication & Hosting: Secured user access and persistent language preferences via Auth0, deploying the entire containerized application live on DigitalOcean App Platform with JSON-backed disk persistence so chat history survives restarts.

Challenges we ran into

API keys were a challenge to learn how to use and find resources that could succeed. Errors were common and I wanted to understand them before I tried to solve them. Gemini API threw me off track as the free credits on sign up were not usable with API keys so I had to revert back to a previous commit to maintain functions.

I also ran into tricky asynchronous states with the Web Speech API—specifically InvalidStateError when the microphone was clicked too quickly—which forced me to dive deep into event lifecycles and defensive teardowns. Learning how to properly authenticate endpoints, configure CORS and Auth0 callback URIs on production domains, and structure JSON system prompts without hallucinations was a steep but rewarding learning curve.

Accomplishments that we're proud of

I am proud of making my first ever hackathon project overall, though I am most excited about the fact that I was able to fully launch a website by myself that looks and functions like something anyone may use in their daily lives.

What we learned

How to use generative AI in a live project, how to deploy a website, how to build front-end and back-end, how to go through a proper work flow and schedule. How to use github and more complicated functions associated with it.

I learned how crucial latency is for real-time conversational tools, how to build defensive error handling around third-party APIs, and how Git branches and commits save a project when an integration doesn't go as planned. Most importantly, I saw firsthand how much empathy can be reintroduced to digital communication when you combine acoustic voice with structured mediation.

What's next for Civic Discussion Bridge

Civic Discussion Bridge can be scaled as much as any other chat or social media can: into apps, strong software, and larger servers. It can be used locally by governments to allow diplomats of differing languages to communicate with proper tone understanding and voice playback.

Beyond international diplomacy, I want to adapt this platform for local municipal hearings, city council public comment periods, and bilingual school boards. Further down the line, I plan to expand the fact-checking engine to query legislative databases like the LegiScan API and transition from text-based WebSockets into live, real-time WebRTC multilingual voice rooms.

Built With

Share this project:

Updates

Submission history