A comprehensive Augmentative and Alternative Communication (AAC) app built with React Native and Expo, featuring dual-mode functionality for parents/carers and children. Echo Kids helps children with autism, ADHD, and communication challenges express themselves through an intuitive, colorful interface.
- ✅ Create, edit, and delete vocabulary boards
- ✅ Add custom icons and phrases with TTS
- ✅ Adjust grid size (2x2, 3x3, 4x4, 5x5, 6x6)
- ✅ Configure TTS voice and volume settings
- ✅ Manage favorites section
- ✅ Button modes: One-word or Sentence
- ✅ Multiple themes: Default, Colorful, Minimal
- ✅ Math-protected access control
- ✅ Simple, grid-based vocabulary boards
- ✅ Large, colorful buttons optimized for children with ASD/ADHD
- ✅ Tap-to-speak functionality with high-quality TTS
- ✅ Favorites section for quick access
- ✅ No editing capabilities (child-safe)
- ✅ Minimal navigation and clutter
- ✅ Offline functionality with iOS native TTS
- ✅ 30+ predefined daily-life vocabulary buttons
- ✅ Valid Ionicons for consistent display
- ✅ TypeScript for type safety
- ✅ Comprehensive testing and verification system
- ✅ Automated quality checks
- Node.js 18+
- npm or yarn
- Expo CLI
- iOS Simulator (for iOS testing)
# Clone the repository
git clone <repository-url>
cd AAC/AACApp
# Run automated setup
npm run dev:setupThis will:
- Install all dependencies
- Set up Git hooks
- Run initial verification
- Prepare the development environment
# Start the development server
npm start
# Run on iOS simulator
npm run ios
# Run on Android emulator
npm run android
# Run on web
npm run webThis project includes a comprehensive verification system to ensure code quality and prevent regressions.
npm run verify:quickChecks:
- ✅ File structure integrity
- ✅ Button mode logic (sentence vs one-word)
- ✅ Voice configuration (Apple TTS voices)
- ✅ TTS utility functionality
- ✅ Navigation setup
- ✅ Icon mapping (valid Ionicons)
npm run dev:verifyIncludes:
- ✅ Quick verification checks
- ✅ TypeScript compilation
- ✅ Code quality (ESLint)
- ✅ Test suite with coverage
# Show all available commands
npm run dev:workflow
# Diagnose project health
npm run dev:doctor
# Auto-fix linting issues
npm run dev:fix
# Test production build
npm run dev:build
# Clean and reinstall dependencies
npm run dev:clean
# Run pre-push checks
npm run dev:pre-push# Run all tests
npm test
# Run tests with coverage
npm run dev:test
# Run specific test file
npm test -- VocabularyGrid.test.tsx- ✅ VocabularyGrid component functionality
- ✅ TTS utility functions
- ✅ Navigation between modes
- ✅ Button mode logic (sentence vs one-word)
- ✅ Icon mapping validation
- ✅ Constants and configuration
src/
├── components/ # Reusable UI components
│ ├── VocabularyGrid.tsx
│ └── AddEditItemModal.tsx
├── screens/ # Screen components
│ ├── ModeSelectionScreen.tsx
│ ├── ParentVocabularyScreen.tsx
│ ├── ChildVocabularyScreen.tsx
│ ├── SettingsScreen.tsx
│ └── FavoritesScreen.tsx
├── utils/ # Utility functions
│ ├── tts.ts # Text-to-speech functionality
│ └── storage.ts # AsyncStorage helpers
├── types/ # TypeScript type definitions
│ └── index.ts
├── constants/ # App constants and configuration
│ └── index.ts
└── __tests__/ # Test files
├── VocabularyGrid.test.tsx
├── TTS.test.ts
├── Navigation.test.tsx
├── ButtonMode.test.tsx
├── IconMapping.test.ts
└── Constants.test.ts
- Displays vocabulary items in a configurable grid
- Handles button mode logic (sentence vs one-word)
- Manages icon display using Ionicons
- Supports both parent and child modes
- Uses Apple TTS voices for natural speech
- Supports voice selection and configuration
- Handles speech rate and volume control
- Math-protected parent access
- Quick switching between modes
- Secure child-to-parent transition
- Edit
src/constants/index.ts - Add new items to
BUTTON_TEMPLATES - Map icons in
VocabularyGrid.tsx - Run verification:
npm run verify:quick
- Choose valid Ionicons from Ionicons Library
- Update
ICON_MAPinVocabularyGrid.tsx - Add to validation list in verification scripts
- Test with
npm run verify:quick
- Update
VOICE_OPTIONSinsrc/constants/index.ts - Use Apple TTS bundle identifiers for best quality
- Test with different voices in settings
- Pre-commit hooks: Run verification before each commit
- GitHub Actions: Continuous integration on push/PR
- TypeScript: Compile-time type checking
- ESLint: Code quality and consistency
- Jest: Unit and integration testing
- Parent mode: Create/edit/delete vocabulary items
- Child mode: Tap buttons and verify TTS works
- Mode switching: Math question protection works
- Settings: Voice, grid size, theme changes work
- Button modes: Sentence vs one-word behavior
- Icons: All icons display correctly (no "?" symbols)
- Offline: App works without internet connection
Icons not displaying (showing "?")
npm run verify:quick
# Check icon mapping validationTTS voices sound robotic
npm run dev:doctor
# Verify Apple TTS configurationButton modes not working correctly
npm test -- ButtonMode.test.tsx
# Run button mode testsBuild failures
npm run dev:clean
npm run dev:setup- Run
npm run dev:doctorto diagnose issues - Check verification output:
npm run verify:quick - Review test results:
npm test - Check GitHub Actions for CI failures
# Test build
npm run dev:build
# Create iOS build
npx expo build:ios# Start with tunnel for device testing
npx expo start --tunnel
# Use Expo Go app to scan QR code- Fork the repository
- Create a feature branch
- Make your changes
- Run full verification:
npm run dev:verify - Run pre-push checks:
npm run dev:pre-push - Submit a pull request
- ✅ Always run verification before committing
- ✅ Write tests for new functionality
- ✅ Use TypeScript strictly (no
anytypes) - ✅ Follow existing code patterns
- ✅ Update documentation for new features
This project is licensed under the MIT License.
- Built with Expo
- Icons from Ionicons
- TTS powered by iOS Speech Framework
- Testing with Jest and React Native Testing Library