🚀 Try it yourself: https://asset-manager-ags12.replit.app/
Say it is an accessibility-first assistive technology platform designed to facilitate action-verb learning for neurodivergent pediatric populations (specifically children ages 3–7 on the Autism Spectrum). While traditional speech therapy frequently relies on static, paper-based core vocabulary boards to facilitate communication, these physical boards are inherently silent and cannot model speech in real time. This leaves a significant developmental gap for non-verbal or minimally verbal learners who require immediate acoustic feedback to map sounds to actions. Say it bridges this gap by introducing isolated, high-fidelity audio reinforcement directly tied to visual action verbs.
Furthermore, unlike commercial educational software that relies on high-stimulus gamification—featuring loud acoustic feedback, flashing celebrations, and heavy visual transitions that often induce sensory overload, processing fatigue, or distraction—Say it pairs clinical acoustic modeling with a predictable, low-sensory design to ensure the child can focus entirely on speech acquisition.
- Understanding Core Words: In Augmentative and Alternative Communication (AAC), "core words" represent the high-frequency vocabulary terms that make up roughly 80% of everyday human speech. Unlike "fringe words" (which are highly specific nouns like dinosaur or apple), core words are versatile building blocks — primarily high-utility verbs, pronouns, and directives — that can be combined to express a massive range of immediate needs, intents, and requests.
- Selection Criteria for the Board: The specific action-verbs populated on this board were clinically selected based on high-frequency operational utility for early childhood environments. Rather than overwhelming a child with vast vocabulary matrices, the selection is strictly isolated to immediate, high-impact motor and sensory verbs (such as go, stop, want, and help) that empower the child to immediately direct their physical surroundings.
- Addressing ASD and the 3–7 Age Range: Children ages 3–7 on the Autism Spectrum are in a critical developmental window for functional language acquisition. Early childhood communication challenges in ASD are frequently compounded by difficulties processing abstract linguistic concepts and managing motor-planning transitions. By coupling high-utility core verbs with clear, unchanging visual icons and instant audio, the system minimizes abstract processing and lowers the cognitive barrier to communication.
- Meeting Clinical Needs: Minimally verbal or non-verbal learners require immediate sensory reinforcement to forge neurological pathways between an intention, a symbol, and an acoustic sound model. Static paper boards fail to provide this immediate loop, forcing an adult interpreter to manually speak the word, which introduces variable delays and shifting vocal inflections. This platform standardizes the audio model with zero latency, reinforcing independent functional communication while remaining entirely free of sensory-fatiguing digital clutter.
Say.it.Demo.Video.mp4
- Eliminating Scope Creep: The platform strictly isolates the core functional MVP (discrete action trials) to maximize target learning outcomes, ensuring a highly targeted user experience.
- Architectural Scalability: The codebase is designed as a compliance-first, highly reproducible template for future clinical modules, demonstrating a rigid adherence to developmental milestones and non-punitive logic loops.
- MedTech Accessibility: By focusing on a zero-overhead, client-side deployment model, the project directly addresses an underserved vertical in assistive technology without requiring heavy enterprise infrastructure.
- Anxiety-Reducing Interface: The UI uses flat, predictable layout hierarchies and muted, low-saturation color palettes to regulate a child's sensory baseline and prevent overstimulation.
- Motor-Coordination Support: Interactive tap targets implement aggressive, transparent padding hitboxes to accommodate variable fine-motor precision in pediatric populations.
- Interface Dependability: Core structural elements are statically anchored to eliminate unexpected layout updates or fluid shifting, maintaining absolute visual consistency and user trust.
- Production-Grade Infrastructure: Utilizing Vite, React, and TypeScript guarantees strict component-level type safety, modular scaling, and high runtime efficiency.
- Absolute Patient Privacy: Session states are entirely ephemeral, living strictly inside local React memory hooks to completely isolate clinical interaction metrics from external cloud tracking or databases.
- Sub-10ms Execution: Removing remote network overhead fulfills the vital clinical requirement of near-instant acoustic feedback loops, matching the real-time speed of verbal communication.
Since Say it is designed as a clinical assistive tool for pediatric populations, data privacy is treated as a core architectural constraint rather than an afterthought.
- Zero-Backend Footprint: The application does not transmit data to external servers, cloud databases, or third-party analytics platforms. 100% of user data remains within the local sandboxed browser environment.
- Ephemeral Session Memory: Patient interaction metrics, current trials, and session progress exist purely within temporary React memory states. Closing the browser tab or refreshing the page immediately purges all operational data.
- Compliance by Design: By entirely eliminating the collection, storage, and transmission of Personally Identifiable Information (PII) or Protected Health Information (PHI), the application circumvents traditional cloud security vulnerabilities, offering an inherently safe digital environment for clinics and families.
The layout and responsive viewports for Say it have been custom-engineered to fully optimize execution across the following targeted digital profiles:
- Compact Mobile Viewports (iPhone SE, Pixel 10): Engineered with localized component scaling and enhanced tap target clearance to maximize interaction precision on smaller consumer screens.
- Standard & Premium Smartphones (iPhone 17 / 17 Pro, Pixel 10 Pro, Samsung Galaxy S25 / S25+): Optimized for standard mobile aspect ratios, ensuring zero layout fragmentation and maintaining a highly structured visual grid.
- Max-Scale Mobile Displays (iPhone Pro Max, Pixel 10 Pro XL, Samsung Galaxy S25 Ultra): Outfitted with enlarged interaction hitboxes to prevent accidental motor-control slips on expansive handheld screen configurations.
- Clinical & Tabletop Tablet Viewports (iPad Air / Multi-touch Tablets): Configured for both landscape and portrait configurations to perfectly support tabletop speech-language pathology (SLP) environments and active clinical therapy sessions.
- Full-Size & 16:9 Desktop Monitors (Chrome / Safari / Firefox >= 1200px width): Implements fluid layout scaling with strictly bounded component maximum widths to preserve clean whitespace distribution and prevent sensory-fatiguing visual stretching.
- Framework Architecture: React 18+ paired with TypeScript (
.tsx) for strict component-level type safety and predictable data structures. - Markup Foundation: Semantic HTML5 to build an accessible, screen-reader-friendly Document Object Model (DOM) tree.
- Sensory Layout Styling: Native CSS3 stylesheets engineered for static, hardware-accelerated layouts to entirely eliminate computation layout shifts.
- Build System & Environment: Vite Pipeline for automated production bundling and rapid, low-overhead local compilation.
- Component Governance:
components.jsonconfiguration matrices to manage modular interface scaling. - State Management: Ephemeral React State Arrays (restricting all session interaction metrics to temporary client-side browser memory for complete patient privacy).
- Documentation Architecture: Extended Markdown (
.md) to structurally formalize cross-functional product specifications, governance matrices, and UX blueprints directly within the repository. - Workspace Engine: Replit Cloud Containers for continuous cloud-based development, environment sandboxing, and testing configuration tracking.
- Version Control & Asset Hosting: GitHub Ecosystem for unified source management, Git version history tracking, and native multi-media asset delivery.
You do not need to install any software, run terminal commands, or create an account to use this tool.
- Click the live application link: https://asset-manager-ags12.replit.app/
- The application will immediately load the main workspace canvas in your browser.
- Tap or click the visual action cards to trigger the corresponding speech audio loops.
- To reset or end a session, simply close the browser tab.
To run a local development environment on your machine, follow these steps:
Prerequisites: Ensure you have Node.js (v18+) and pnpm installed.
- Clone the repository:
git clone [https://github.com/rs2303dev/Say_it.git](https://github.com/rs2303dev/Say_it.git) cd Say_it - Install dependencies:
pnpm install
- Start the local development server:
pnpm dev
- Build for production:
pnpm build
This repository maintains a clean, production-ready frontend configuration. All core application components and configurations live out of the root layout for optimized deployment:
Say_it/
├── public/ # Global static assets (app icons, manifest files)
├── src/ # Core application source directory
│ ├── assets/ # High-fidelity speech audio files and UI vector graphics
│ ├── components/ # Reusable React UI primitives (Canvas, ActionCard)
│ ├── App.tsx # Main layout wrapper and DOM entry coordinator
│ ├── main.tsx # Application bootstrapping script
│ └── index.css # Hardware-accelerated, shift-free CSS rules
├── index.html # Main frontend entry point and semantic DOM structure
├── package.json # Explicit framework and build tool dependencies
├── vite.config.ts # Production optimization configuration for the Vite bundler
├── tsconfig.json # TypeScript type-checking instruction manual
└── components.json # Architectural UI component governance matrix
Say it runs entirely as a client-side single-page application (SPA), isolating the entire application lifecycle directly within the end-user's web browser viewport.
+-------------------------------------------------------------+
| USER VIEWPORT |
| [HTML5 Semantic DOM] <---> [React Virtual DOM Engine] |
+-------------------------------------------------------------+
|
v
+-------------------------------------------------------------+
| CLIENT-SIDE ENGINE |
| [TypeScript Type Layer] [Ephemeral React State Array] |
| Ensures properties match Manages active trials locally |
+-------------------------------------------------------------+
|
┌───────────────────────┴───────────────────────┐
▼ ▼
+-------------------------+ +-------------------------+
| STATIC CSS LAYOUT | | AUDIO PLAYBACK CONTEXT|
| Zero layout shifts for | | Instantly fires clear, |
| predictable UI trust | | isolated vocal models |
+-------------------------+ +-------------------------+
- Discrete Trial Execution: Provides clear, un-cluttered visual modules to execute targeted action-verb speech trials.
- Instant Acoustic Feedback: Bridges the historical gap of silent paper core boards by supplying immediate vocal modeling upon user touch inputs.
- Neurodivergent-Agnostic Design: Intentionally eliminates high-stimulus visual feedback loop triggers (flashing banner patterns, jarring point-counters) to cultivate an open, low-anxiety workspace.
- Aggressive Click Debouncing: Mitigates accidental motor-control inputs by rejecting rapid double-taps, preventing rapid state confusion for pediatric users.
The repository contains the following comprehensive cross-functional deliverables out-of-the-box:
Production-Ready Application Engine:Complete type-safe React/TypeScript codebase optimized via a modern Vite setup.product-spec.md: A comprehensive product specification bridging business goals, execution milestones, and underlying clinical speech pathology frameworks.ux-teardown.md: A UX design blueprint analyzing the app's sensory architecture, color theory selections, and motor-control interaction choices.governance-matrix.md: A cross-functional project alignment matrix detailing explicit component ownership and strict accessibility verification guardrails.architecture.md: An in-depth engineering breakdown focused on state isolation, local privacy protection, and zero-latency technical configurations.