Inspiration
Our team was inspired by the global challenge of unequal access to STEM education, particularly in AI and coding. With over 60% of students worldwide lacking quality STEM resources—and many existing platforms being inaccessible to beginners or users with disabilities—we saw a pressing need for change. We wanted to create a platform that democratizes AI education, empowering diverse learners, regardless of background, technical skill, or ability, to gain critical skills for solving real-world problems like healthcare innovation or climate change. The Beyond the Code: Human-Centered Tech hackathon’s focus on inclusive, user-centered solutions motivated us to build AccessAI, a tool that fosters creativity and inclusion in tech education.
What it does
AccessAI is a web-based platform that makes AI and coding education accessible, intuitive, and engaging. It features an AI-powered chatbot that guides users through personalized coding lessons in languages like JavaScript, Python, and Solidity. With speech-to-text (STT) and text-to-speech (TTS) capabilities via the Web Speech API, users can interact using voice, making it inclusive for visually impaired or motor-impaired learners. The platform offers structured learning paths with gamified challenges, a progress bar, and a leaderboard to keep users motivated. A sidebar allows toggling settings like code mode, emotion detection, or dark theme, and users can collaborate on projects stored in MongoDB. AccessAI bridges the STEM education gap by empowering learners to master AI and apply it to real-world challenges.
How we built it
We built AccessAI using a modern tech stack tailored for scalability and user experience. The frontend is developed with React and styled using Tailwind CSS, ensuring a responsive and intuitive design across devices. The backend is powered by Node.js and Express, with MongoDB as the database for storing user projects and progress. We integrated the Google Generative AI API to enable the AI-powered chatbot, which provides personalized coding guidance. The Web Speech API was used for STT and TTS features, enhancing accessibility. We hosted the platform on Vercel at access-ai-iota.vercel.app. Our development process involved collaborative coding via GitHub, iterative UI/UX design, and rigorous testing to ensure accessibility and functionality.
Challenges we ran into
One major challenge was implementing the speech-to-text and text-to-speech features, as browser compatibility issues with the Web Speech API caused inconsistencies across devices. We also faced viewport distortion issues after dynamic content updates (e.g., AI responses), which required extensive CSS debugging to ensure a stable, responsive layout. Integrating the Google Generative AI API with our chatbot while maintaining low latency was tricky, especially under hackathon time constraints. Additionally, balancing accessibility features—like voice interaction and dismissible error alerts—with an engaging gamified experience stretched our design and development skills. Despite these hurdles, we iterated quickly, leveraging team collaboration to troubleshoot and refine our solution.
Accomplishments that we're proud of
We’re proud to have built a fully functional platform that prioritizes accessibility and inclusion, aligning with the hackathon’s human-centered focus. Implementing STT and TTS features to support users with disabilities was a significant achievement, as was creating a responsive, gamified learning experience with features like the progress bar and leaderboard. Our successful integration of the Google Generative AI API to deliver personalized coding guidance was a technical win. Finally, we’re thrilled that AccessAI empowers diverse learners to engage with AI education, fostering creativity and problem-solving for real-world impact.
What we learned
This project taught us the importance of user-centered design, especially for accessibility. We gained hands-on experience with the Web Speech API and Google Generative AI API, deepening our understanding of integrating AI into educational tools. We also learned advanced CSS techniques for responsive design, particularly in handling dynamic content without breaking layouts. Collaborating under tight deadlines improved our teamwork and time management skills, while debugging cross-browser issues enhanced our problem-solving abilities. Most importantly, we learned how to balance technical innovation with empathy for diverse user needs, ensuring inclusivity in tech.
What's next for AccessAI
We’re excited to scale AccessAI into a comprehensive AI education platform. Next steps include adding more coding languages and advanced AI topics, such as machine learning basics, to the learning paths. We plan to enhance accessibility by supporting additional languages for STT/TTS and integrating sign language recognition for deaf users. Improving the AI chatbot’s emotional intelligence to better detect and respond to user frustration is another goal. We also aim to introduce multiplayer coding challenges for real-time collaboration and expand our gamification system with rewards like badges or certifications. With user feedback, we’ll continue refining AccessAI to empower more learners worldwide to tackle global challenges through AI.
Log in or sign up for Devpost to join the conversation.