{"slug": "rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot", "title": "Rebuilt a Hackathon App Into a Production Accessibility Tool With GitHub Copilot cover_image: https://her-rights.netlify.app", "summary": "A developer rebuilt HerRights, a legal rights tool for vulnerable women, from a broken 24-hour hackathon prototype into a production-ready accessibility application using GitHub Copilot. The original app suffered from 10 critical failures including zero voice input, no offline support, and volatile chat state that wiped conversations on browser refresh. The refactored version now features persistent privacy-first state storage, full Web Speech API voice input, and a CSS-based particle system that reduced CPU usage from 18% to 3% and improved frame rates from 20fps to 58fps on integrated graphics.", "body_md": "*This is a submission for the GitHub Finish-Up-A-Thon Challenge*\n\n💻 **GitHub:** [https://github.com/codeNimra/herrights-ai](https://github.com/codeNimra/herrights-ai)\n\n💻 **Devpost:** [https://devpost.com/software/herrights-vr](https://devpost.com/software/herrights-vr)\n\nI built HerRights in **24 hours** under extreme pressure for the #75HER Hackathon on International Women's Day 2026.\n\nIt \"worked.\" But it was broken in every way that actually matters.\n\nHere is what the codebase looked like before this challenge:\n\n```\n❌ Chat history wiped on every browser refresh — volatile memory only\n❌ WebGL A-Frame scene rendering behind HTML UI — visual corruption on load\n❌ Zero voice input — unusable for low-literacy or visually impaired users\n❌ Zero keyboard navigation — emergency overlay had no ESC handler\n❌ Zero ARIA roles — screen readers read nothing meaningful\n❌ No offline support — required live internet connection at all times\n❌ No country context — same generic response for USA and Pakistan\n❌ A-Frame CDN dependency — single point of failure for entire app\n❌ One JS error crashed the entire layout — zero error isolation\n❌ No progress tracking — users had no sense of what they'd explored\n```\n\nThis 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.\n\n| The Legacy Problem (Before) | The Copilot Intervention | The Production Solution (After) |\n|---|---|---|\nAcoustic / Visual Isolation: Zero accessibility for low-literacy or visually impaired users — the primary audience in developing regions |\nGuided 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. |\nVolatile 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. |\nRefactored 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. |\nWebGL 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 |\nRebuilt 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. |\nFragile 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 |\nCopilot 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. |\nZero 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 |\nCopilot 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. |\nNo 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. |\nCopilot 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. |\n\n```\nMetric                    Before          After\n─────────────────────────────────────────────────\nInitial load time         2.8 seconds     0.4 seconds\nCPU usage (idle)          18%             3%\nFrame rate (low-end)      ~20 fps         ~58 fps\nMemory usage              ~85 MB          ~22 MB\nARIA violations           6               0\nChat persistence          0%              100%\nOffline capable           No              Yes\nVoice input               No              Yes (3 browsers)\nError isolation           None            Full try-catch\nLines of Copilot-assisted code   ~0      ~340\n```\n\nThree things surprised me about using Copilot for this rebuild:\n\n**1. It caught what I didn't know I was missing.**\n\nI 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.\n\n**2. It handled the browser API compatibility matrix instantly.**\n\nWeb 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.\n\n**3. It knew when NOT to refactor.**\n\nI 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.\n\nOriginal hackathon version: A-Frame 3D scene bleeding through HTML UI, no onboarding, side panel chat, no persistence\n\n![Before: basic 3D scene with pink panels floating in space, side panel chatbot, no onboarding]\n\nRebuilt version: clean 3-step onboarding, full-screen chat, voice input, persistent state, PWA\n\n![After: dark premium UI with animated background, country selector, situation cards, full-screen chat with voice button]\n\n🔗 **Live demo:** [https://her-rights.netlify.app](https://her-rights.netlify.app)\n\n💻 **GitHub:** [https://github.com/codeNimra/herrights-ai](https://github.com/codeNimra/herrights-ai)\n\n💻 **Devpost:** [https://devpost.com/software/herrights-vr](https://devpost.com/software/herrights-vr)\n\n```\n# 1-command setup — no npm, no build step\ngit clone https://github.com/codeNimra/herrights-ai && open index.html\n```\n\nHerRights 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.\n\nNone of those women have time for a broken app.\n\nGitHub Copilot helped me close the gap between \"it works on my machine\" and \"it works for the women who need it.\"\n\nThat's the transformation. Not the colors. The engineering. 🌸⚖️\n\n*Built for the #75HER Hackathon 2026. Rebuilt for the GitHub Finish-Up-A-Thon 2026.*\n\n*Powered by GitHub Copilot.*", "url": "https://wpnews.pro/news/rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot", "canonical_source": "https://dev.to/nimra_abid_8180c39fb998b6/rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot-coverimage-1nj8", "published_at": "2026-06-04 04:58:29+00:00", "updated_at": "2026-06-04 05:12:04.169113+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "ai-products", "ai-ethics", "natural-language-processing"], "entities": ["GitHub Copilot", "HerRights", "GitHub", "Devpost", "A-Frame", "WebGL", "ARIA"], "alternates": {"html": "https://wpnews.pro/news/rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot", "markdown": "https://wpnews.pro/news/rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot.md", "text": "https://wpnews.pro/news/rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot.txt", "jsonld": "https://wpnews.pro/news/rebuilt-a-hackathon-app-into-a-production-accessibility-tool-with-github-copilot.jsonld"}}