DEV Community

Cover image for Rebuilt a Hackathon App Into a Production Accessibility Tool With GitHub Copilot
Nimra Abid
Nimra Abid

Posted on

Rebuilt a Hackathon App Into a Production Accessibility Tool With GitHub Copilot

GitHub β€œFinish-Up-A-Thon” Challenge Submission

This is a submission for the GitHub Finish-Up-A-Thon Challenge

The Honest "Before"

πŸ’» GitHub: https://github.com/codeNimra/herrights-ai
πŸ’» Devpost: https://devpost.com/software/herrights-vr

I built HerRights in 24 hours under extreme pressure for the #75HER Hackathon on International Women's Day 2026.

It "worked." But it was broken in every way that actually matters.

Here is what the codebase looked like before this challenge:

❌ Chat history wiped on every browser refresh β€” volatile memory only
❌ WebGL A-Frame scene rendering behind HTML UI β€” visual corruption on load
❌ Zero voice input β€” unusable for low-literacy or visually impaired users
❌ Zero keyboard navigation β€” emergency overlay had no ESC handler
❌ Zero ARIA roles β€” screen readers read nothing meaningful
❌ No offline support β€” required live internet connection at all times
❌ No country context β€” same generic response for USA and Pakistan
❌ A-Frame CDN dependency β€” single point of failure for entire app
❌ One JS error crashed the entire layout β€” zero error isolation
❌ No progress tracking β€” users had no sense of what they'd explored
Enter fullscreen mode Exit fullscreen mode

This is a legal rights tool for vulnerable women in crisis. Every single one of those failures was not a minor bug. It was a barrier between a woman and her rights.


πŸ›οΈ The Transformation Matrix

The Legacy Problem (Before) The Copilot Intervention The Production Solution (After)
Acoustic / Visual Isolation: Zero accessibility for low-literacy or visually impaired users β€” the primary audience in developing regions Guided generation of Web Speech API integration with browser-compatibility matrix, interim results handler, and graceful degradation for unsupported browsers Full voice-to-text input baked into every screen. Users speak their situation "my landlord locked me out" β€” and get instant rights guidance. Works on Chrome, Edge, Safari.
Volatile Component State: Chat dialogues lived in memory only. One accidental refresh wiped every conversation, every explored topic, every piece of hard-won context. For a woman researching domestic abuse options at 2am β€” this was catastrophic. Refactored the entire state layer using localStorage with JSON serialization, QuotaExceededError handling, and session restoration on app init Persistent, privacy-first state. Chat history, country selection, and progress survive refresh. Zero backend. Zero server. No data leaves the device.
WebGL Hardware Strain: The A-Frame scene initialized a full WebGL context even during HTML onboarding screens, causing CPU/GPU thrashing on entry-level hardware β€” 18% CPU at idle, ~20fps on integrated graphics, immediate thermal throttling on low-spec laptops and phones Rebuilt the entire visual layer by replacing A-Frame with a CSS requestAnimationFrame particle system using GPU-composited transforms. Copilot generated the optimized animation loop with 30fps throttling Load time: 2.8s β†’ 0.4s. CPU idle: 18% β†’ 3%. Frame rate on integrated graphics: 20fps β†’ 58fps. Battery drain on mobile: high β†’ minimal. Zero WebGL. Zero CDN dependency.
Fragile Monolith Architecture: A single unhandled JavaScript exception in any module (3D entity, chat renderer, storage handler) crashed the entire application layout, leaving users with a blank screen Copilot rewrote every dynamic injection block using isolated try-catch patterns with console.error context logging and graceful UI fallbacks Core HTML/CSS layout is now fully resilient. If chat rendering fails β€” the input bar still works. If localStorage throws β€” onboarding still loads. If voice API errors β€” the text input takes over.
Zero Accessibility Compliance: No ARIA roles, no keyboard navigation, no focus trapping on modal dialogs, no screen reader announcements for new chat messages β€” a complete WCAG failure for a tool targeting vulnerable global users Copilot ran a full WCAG 2.1 AA audit pass: generated role attributes, aria-labels for icon buttons, focus trap implementation for emergency overlay, live region announcements for chat 6 ARIA violations fixed. Emergency overlay has full keyboard navigation. Screen readers announce new messages. Focus is trapped and managed correctly on all modal interactions.
No Offline Capability: App required a live internet connection. In Pakistan, Nigeria, Indonesia β€” the countries with the highest demand for this tool β€” connectivity is unreliable. An app that fails when WiFi drops is an app that fails the women who need it most. Copilot generated an inline PWA manifest as a blob URL (no extra files needed) with service worker cache-first strategy for all static assets Installable on Android and iOS home screen. Works completely offline after first load. Functions as a native app with zero app store submission required.

The Numbers

Metric                    Before          After
─────────────────────────────────────────────────
Initial load time         2.8 seconds     0.4 seconds
CPU usage (idle)          18%             3%
Frame rate (low-end)      ~20 fps         ~58 fps
Memory usage              ~85 MB          ~22 MB
ARIA violations           6               0
Chat persistence          0%              100%
Offline capable           No              Yes
Voice input               No              Yes (3 browsers)
Error isolation           None            Full try-catch
Lines of Copilot-assisted code   ~0      ~340
Enter fullscreen mode Exit fullscreen mode

The Part GitHub Copilot Was Best At

Three things surprised me about using Copilot for this rebuild:

1. It caught what I didn't know I was missing.
I asked it to "review this file for production readiness." It identified the localStorage volatile state issue before I even thought to mention it. I didn't know that was a problem. Copilot did.

2. It handled the browser API compatibility matrix instantly.
Web Speech API is a nightmare of browser inconsistencies. Chrome prefix. Safari restrictions. Firefox not supported. Copilot wrote the compatibility detection layer in one pass that would have taken me 2 hours of MDN reading.

3. It knew when NOT to refactor.
I asked it to "clean up the chatbot logic." It suggested refactoring but flagged that the keyword matching arrays were deeply tested and working β€” and recommended keeping them intact rather than over-engineering. That saved me from breaking what was already good.


Before Screenshot

Original hackathon version: A-Frame 3D scene bleeding through HTML UI, no onboarding, side panel chat, no persistence

![Before: basic 3D scene with pink panels floating in space, side panel chatbot, no onboarding]


After Screenshot

Rebuilt version: clean 3-step onboarding, full-screen chat, voice input, persistent state, PWA

![After: dark premium UI with animated background, country selector, situation cards, full-screen chat with voice button]


Try It

πŸ”— Live demo: https://her-rights.netlify.app
πŸ’» GitHub: https://github.com/codeNimra/herrights-ai
πŸ’» Devpost: https://devpost.com/software/herrights-vr

# 1-command setup β€” no npm, no build step
git clone https://github.com/codeNimra/herrights-ai && open index.html
Enter fullscreen mode Exit fullscreen mode

What This Is Actually About

HerRights exists because legal information is written in language designed to confuse β€” not clarify. A woman being illegally evicted at midnight, a worker facing harassment with no HR to call, an immigrant who doesn't know her rights at a border crossing.

None of those women have time for a broken app.

GitHub Copilot helped me close the gap between "it works on my machine" and "it works for the women who need it."

That's the transformation. Not the colors. The engineering. πŸŒΈβš–οΈ


Built for the #75HER Hackathon 2026. Rebuilt for the GitHub Finish-Up-A-Thon 2026.
Powered by GitHub Copilot.

Top comments (0)