TalkBoard began as a simple idea: make expressive communication tools accessible, fast, and adaptable for people who rely on augmentative and alternative communication (AAC). I wanted a single, modern web app that combined a fast symbol grid, personalized learning, caregiver workflows, collaboration, and robust analytics — all while remaining lightweight and offline-capable.

Inspiration I was inspired by real-world AAC needs — caregivers, therapists, and users who told me existing tools were either too rigid or fragmented. I wanted to build something that felt like a single, extendable toolkit: easy to use in the moment, but powerful enough for clinicians and researchers.

What I learned Designing for accessibility at scale requires early architectural choices: clear types, small focused components, and testable stores. Combining non-headless Playwright recording with a deterministic UI allowed me to produce reproducible demo artifacts (video + screenshots). Performance trade-offs (bundle size vs. dev ergonomics) mattered; I tuned builds and inspected chunks to keep core bundles reasonable. A couple of measurable outcomes:

Source lines:

L

52,128 L=52,128 Modules built: 259 Unit tests: 386 386 × 100

%

100 % 386 386 ​ ×100%=100% passing How I built it I iterated feature-by-feature:

Built typed services and small stores (Zustand) first, then composed UI components around those stores. Implemented end-to-end flows (symbol selection → sentence bar → output) and added adaptive-learning hooks that adjust practice content based on interaction. Added CI-ready tests and Playwright scripts to record a 3‑minute walkthrough and capture proof screenshots automatically. Quick run example: npm install npm run dev

open http://localhost:5177/ (dev server)

Challenges Balancing a large feature set with a maintainable component surface area required frequent refactors. Ensuring deterministic Playwright captures across environments took several adjustments (fixed viewports, wait timings). Keeping bundle sizes below warning thresholds required splitting and deferring heavy modules. Built with

Language & Frameworks: TypeScript, React 19, Vite Styling: Tailwind CSS State: Zustand (with persistence) Testing: Vitest + React Testing Library; Playwright (non-headless) for E2E and demo recording Tooling: tsx for TypeScript scripts, ffmpeg (optional for video post-processing) Features & Libraries: React Router, Lucide icons, custom Service Worker (PWA), charting libs for visualization Platform: Client-side web (progressive web app) — offline-capable, installable

Built With

• charting-libs-for-visualization-platform:-client-side-web-(progressive-web-app)-?-offline-capable
• custom-service-worker-(pwa)
• ffmpeg-(optional-for-video-post-processing)-features-&-libraries:-react-router
• language-&-frameworks:-typescript
• lucide-icons
• react-19
• vite-styling:-tailwind-css-state:-zustand-(with-persistence)-testing:-vitest-+-react-testing-library;-playwright-(non-headless)-for-e2e-and-demo-recording-tooling:-tsx-for-typescript-scripts