Our project is an educational learning app designed to teach English through a structured roadmap, particularly targeting youth and students with learning disabilities. The app starts with the basics like alphabets and progresses to reading full sentences, breaking down the learning process into manageable levels.
Each level includes a variety of mini-games that engage multiple senses, using visual and auditory cues to help students understand and maintain their focus. When students successfully complete games, they are rewarded with coins, which they can use to buy AI-generated books that cater to their preferences. The app provides continuous audio support to help students when they get stuck, and it offers a clear roadmap for the next steps in their journey.
This innovative educational learning app is specifically designed to help youth, particularly those with learning disabilities, master the English language. It provides a comprehensive, structured roadmap starting with the basics, such as alphabets, and gradually progresses to more advanced topics like reading full sentences.
- Structured roadmap guiding students step-by-step from basic to advanced English learning.
- Multi-sensory engagement: Using both visual and auditory cues for a richer learning experience.
- Reward system: Students earn coins after completing games, which can be used to purchase personalized AI-generated books.
- Motivational audio support: Helps students who struggle, encouraging them to keep progressing.
- Visually appealing, short attention span-friendly games designed for accessibility.
We built this project using NextJS and React for both the frontend and backend. We utilized GPT-4, DALL-E 3, and Google's Web Speech API to implement AI-generated images, stories, and speech recognition functionalities. To handle user data and in-game currency, we used Prisma with SQLite as our database.
We also developed an Adobe Add-on using JavaScript, which allows users to upload avatars via React's built-in camera library, offering a smooth, intuitive experience for avatar customization.
- Download or clone the repository onto your local device.
- Open the terminal and navigate to your project directory:
bash cd my-app - Install all dependencies:
bash npm install - Start the development server:
bash npm run dev - Go to http://localhost:3000/ to view the web app in action!