SpeakTiles

Inspiration

SpeakTiles was inspired by my brother Ali, who has cerebral palsy and is nonverbal. Growing up alongside him, I saw how limited existing communication tools were—expensive, complex, and not customizable for families. I wanted to create a solution that empowers kids like him to express their needs, emotions, and ideas in a way that’s both simple and personal.

What it does

SpeakTiles is a web-based communication app where nonverbal users can create unlimited visual “tiles” to represent words, feelings, or actions. By tapping a tile, the app converts it into speech, helping users communicate more independently with caregivers, teachers, and peers.

How we built it

We built SpeakTiles as a progressive web application (PWA) using React 18 with JSX, powered by Vite for fast development and optimized builds. The interface was styled with CSS3, using Grid, Flexbox, and animations for responsive and accessible layouts.

For speech output, we integrated the Web Speech API (SpeechSynthesisUtterance), allowing tiles to instantly convert into natural-sounding voice. User data is stored locally through browser Local Storage and managed with custom React hooks, enabling persistence without requiring a backend. Families can export/import boards as JSON files or share them via QR codes using QRCode.js and Base64 URL encoding.

We deployed through Netlify, with GitHub version control and CI/CD for auto-deployments. The app was designed as a single-page application (SPA) with offline support via service workers, making it installable on mobile or desktop like a native app. The result is a lightweight, fully client-side application that remains free, accessible, and highly customizable for families..

Challenges we ran into

One challenge was designing for accessibility—making sure the interface works for individuals with motor skill limitations. Another was balancing customization with simplicity, so families could create unlimited tiles without the app feeling overwhelming. Technical issues with cross-device compatibility and voice output also required troubleshooting.

Accomplishments that we're proud of

I’m proud that SpeakTiles directly impacts families like mine by giving nonverbal kids a voice. Building a tool that feels approachable while still offering flexibility was a big step. Even small milestones—like seeing my brother successfully use a tile to express himself—made the project deeply rewarding.

What we learned

I learned how important human-centered design is when building assistive technology. Technical skills like frontend development and API integration were key, but equally important was gathering feedback from families and understanding real-world needs.

What’s next for SpeakTiles

We plan to integrate AI so the app can learn user communication patterns, predict phrases, and adapt tile layouts for faster, more natural conversations. This will make SpeakTiles more intelligent and second to none compared to current AAC tools.

To sustain growth, we’ll adopt a freemium model: keeping the core app free while offering premium features such as AI-powered predictions, cloud syncing, and curated tile packs. We also see opportunities in school and therapy center partnerships, where bulk licensing and grant programs can support wider adoption.

Our long-term vision is to combine cutting-edge AI personalization with an accessible business model, ensuring SpeakTiles remains both impactful for families and financially sustainable as it scales.

Built With

• css
• github
• javascript
• netlify
• qrcode.js
• react
• vite