mLearn

The Accessible Learning Platform for Undeserved Communities

Comment

Inspiration

mLearn was inspired by the global challenge of education inequity. Over 263 million children and adults lack access to quality education due to barriers like poor internet connectivity, disabilities, or language differences (UNESCO). I wanted to create a solution that empowers underserved communities by providing free, accessible, and offline education.

What it does

mLearn is a web-based e-learning platform designed for underserved communities and people with disabilities. It offers:

  • Offline Access: Courses are accessible without internet using Progressive Web App (PWA) technology, ideal for rural or low-connectivity areas.
  • Accessibility Features: Text-to-speech and keyboard navigation ensure inclusivity for visually impaired or motor-disabled users, meeting WCAG 2.1 standards.
  • Multilingual Support: Users can toggle between English and Spanish, breaking language barriers.
  • Interactive Learning: Two sample courses include text content and quizzes to engage learners. The platform’s clean, responsive UI makes education accessible on any device, empowering users to learn anytime, anywhere.

How I built it

mLearn was built in four days using modern web technologies:

  • Frontend: React for a dynamic, responsive UI, styled with Tailwind CSS for a clean, mobile-friendly design.
  • Offline Support: Workbox and Service Workers cache course content, enabling offline access.
    Accessibility: Web Speech API powers text-to-speech, with ARIA labels and keyboard navigation for WCAG compliance.
  • Multilingual: Static JSON files provide English and Spanish translations, with a toggle for seamless switching.
  • Quiz System: JavaScript and localStorage manage interactive quizzes and results.

Challenges I ran into

  • Service Worker Complexity: Caching assets for offline use was tricky. I used Workbox’s prebuilt strategies to simplify implementation.
  • Accessibility Testing: Ensuring screen reader compatibility required multiple iterations. Testing with NVDA helped refine ARIA labels and keyboard navigation.
  • Scope Management: I initially wanted more languages and courses but scaled back to two languages and two courses due to time constraints.
  • Multilingual support: Implementing seamless multilingual support was tough, as I kept changing the layout, meaning I had to keep changing the JSON files.

Accomplishments that I'm proud of

  • Functional Offline Mode: mLearn works seamlessly without internet, a critical feature for underserved areas.
  • Accessible Design: Text-to-speech and keyboard navigation make the platform inclusive, a rare feature in e-learning sites.
  • Polished UI: The UI is clean, responsive, and mobile-friendly.
  • Social Impact: mLearn addresses a real-world problem with potential to empower millions, aligning with the UN's 4th SDG.

What we learned

  • PWA Development: Mastered Service Workers and Workbox for offline functionality, a new skill that enhances web app accessibility.
  • Accessibility Best Practices: Learned to implement WCAG standards, including ARIA labels and Web Speech API, to support diverse users.
  • Demo Crafting: Producing a concise, impactful demo video honed my ability to communicate technical and social value effectively.

What's next for mLearn

  • Expand Content: Add more courses and interactive elements like videos and gamified challenges.
  • Enhance Multilingual Support: Integrate dynamic translation for broader language coverage.
  • Advanced Accessibility: Include sign language videos and braille-compatible outputs for greater inclusivity.
  • Community Features: Add forums or peer support to foster learner engagement.

Built With

Share this project:

Updates