OLearn

• 

  Hero section

Inspiration

My grandfather recently learned how to use a smartphone with my help, and it was incredible to see how this simple technology opened up a whole new world for him. He can now stay connected with family, explore the internet safely, and avoid scams that target seniors. This experience inspired me to create OLearn - a platform that makes digital literacy accessible to everyone, especially older adults who want to navigate the digital world confidently and safely.

What it does

OLearn is an interactive learning platform designed to teach digital literacy through structured learning paths. The app features: Interactive Learning Paths: Step-by-step lessons covering smartphone basics, internet safety, and digital navigation Progress Tracking: Users can track their completion status and scores across different lessons Accessibility Features: Text-to-speech functionality and chatbot assistance to help users who may need additional support Gamified Learning: Quiz-based assessments and interactive elements to make learning engaging Responsive Design: Works seamlessly across devices with a modern, glass-morphism UI How we built it

OLearn is built with modern web technologies:

Frontend: React with TypeScript for type safety and better development experience Styling: Tailwind CSS with custom glass-morphism components for a modern, accessible design State Management: React Context API for managing user authentication and progress tracking Database: Supabase for user data and lesson progress storage UI Components: Custom component library with shadcn/ui for consistent, accessible interfaces Audio Integration: Text-to-speech functionality to support different learning styles Routing: React Router for seamless navigation between lessons and paths

Challenges we ran into

User Experience for Seniors: Designing an interface that's intuitive for users who may not be familiar with modern web applications Progress Synchronization: Ensuring lesson progress is saved reliably while maintaining a smooth user experience Accessibility: Implementing features like text-to-speech and chatbot assistance that actually help rather than complicate the experience Content Structure: Creating lesson content that's comprehensive yet not overwhelming for beginners Accomplishments that we're proud of Intuitive Interface: Created a beautiful, glass-morphism design that's both modern and approachable Comprehensive Learning System: Built a complete lesson management system with progress tracking and scoring Accessibility Focus: Implemented text-to-speech and chatbot assistance to support different learning needs Responsive Design: Ensured the platform works seamlessly across all devices Real Impact: Designed a solution that can genuinely help people like my grandfather navigate the digital world safely

What we learned

User-Centered Design: The importance of designing for actual users rather than assumed technical proficiency Progressive Enhancement: How to build features that enhance the experience without being essential to core functionality Accessibility in Practice: Implementing features like text-to-speech and chatbot assistance that truly help users State Management: Effective use of React Context for managing complex application state Modern Web Development: Leveraging TypeScript, Tailwind CSS, and modern React patterns for a robust application

What's next for OLearn

Expanded Content: Add more learning paths covering topics like social media safety, online banking, and video calling Community Features: Allow users to share progress and support each other in their learning journey Personalization: Adaptive learning paths based on user progress and identified areas of difficulty Mobile App: Develop native mobile applications for iOS and Android Multilingual Support: Expand to support multiple languages to reach more users globally Advanced Analytics: Provide detailed insights into learning patterns to improve content effectiveness Integration Partnerships: Collaborate with senior centers and community organizations to reach more users

Built With

• react
• supabase
• tailwind
• typescript