An interactive educational game portal designed for autistic children, built with React and Vite. This gamified learning platform uses ABA (Applied Behavior Analysis) principles to create an engaging and supportive learning environment.
- 8 Interactive Professions: Firefighter, Doctor, Chef, Astronaut, Police Officer, Teacher, Farmer, and Builder
- Step-by-Step Learning: Each profession has 4 guided steps following ABA principles
- Token Economy System: Star rewards saved in Local Storage to track progress
- Video Modeling: Real-world videos after completing each profession
- Quiz Mode: "Guess Who?" game to test knowledge with detailed results
- Text-to-Speech (TTS): Auto-reads instructions and responds to hover interactions
- Visual Reinforcement: Animated star rewards and progress tracking
- High Contrast Design: Soft pastel colors with large, clear buttons
- Smooth Animations: Framer Motion for engaging, non-overwhelming transitions
- Train Station Theme: Beautiful animated train with destination-style carriages
- Staggered Animations: Elements appear from different directions with spring physics
- Responsive Design: Works on various screen sizes
- Neutral Quiz Feedback: No immediate right/wrong hints during quiz
- Framework: React.js (Vite)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Routing: React Router DOM
- Icons: Lucide React
- Storage: Browser Local Storage
- Clone the repository:
git clone https://github.com/Kokul24/AuSome-Journey.git
cd AuSome-Journey- Install dependencies:
npm install- Run the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
- Station Dashboard: Click on any train carriage to start a profession activity
- Job Activities: Complete 4 steps for each profession
- Instructions are read aloud automatically
- Click each step to complete it
- Earn a star after finishing all steps
- Watch a reward video
- Quiz Mode: Click "🎮 Guess Who?" button
- Answer 8 questions about professions
- View detailed results at the end
- See correct answers for missed questions
src/
├── components/
│ ├── Station.jsx # Main dashboard with train UI
│ ├── JobActivity.jsx # Individual profession activities
│ └── Quiz.jsx # Quiz game component
├── context/
│ └── StarContext.jsx # Global star state management
├── hooks/
│ └── useTTS.js # Text-to-Speech hook
├── jobsData.js # Profession data and video URLs
├── StarAnimation.css # Animation styles
├── App.jsx # Main app with routing
└── main.jsx # Entry point
- ABA-Based: Breaking tasks into manageable steps
- Visual Reinforcement: Immediate feedback through animations
- Predictable Structure: Consistent layout and interactions
- Sensory-Friendly: Soft colors, smooth transitions, optional audio
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
Created with ❤️ for inclusive education
Note: This application is designed as an educational tool and should be used as part of a comprehensive learning program under appropriate guidance.