Online Course Companion

Inspiration

As a lifelong learner juggling Coursera, Udemy, and edX courses, I grew frustrated with scattered progress trackers, unorganized notes, and lack of accountability. I wanted a single hub to make online learning less chaotic and more rewarding—something that spoke to the busy professionals and students I know in my community.

What it does

Online Course Companion centralizes online learning: it shows all course progress in a dashboard, syncs notes to video timestamps, connects users with study groups, and fuels motivation with learning streaks, Pomodoro timers, and achievement badges. It turns fragmented learning into a structured, collaborative journey.

How we built it

I started with wireframing in Figma to map the user flow (dashboard → notes → study groups → motivation tabs). I built the core with React and TypeScript for scalability, used MaterialUI for consistent, clean design, and CSS3 for responsive layouts (desktop/tablet/mobile). LocalStorage handles data persistence, so users don’t lose their streaks or notes.

Challenges we ran into

The biggest hurdle was designing the video-synced notes system to be intuitive—balancing simplicity with functionality took multiple iterations. I also struggled to make the Pomodoro timer seamless (avoiding lag, ensuring alerts worked across devices) and had to refine the responsive layout to look polished on mobile without cluttering content.

Accomplishments that we're proud of

Creating a cohesive, user-friendly interface that feels natural to English-speaking learners. The progress tracking dashboard and streak counter have already resonated with beta testers—one friend said it helped her finish a Udemy course she’d abandoned for months.

What we learned

I deepened my understanding of React state management and responsive design, but more importantly, I learned to prioritize user empathy: every feature (from deadline alerts to study group cards) was built around solving real pain points, not just adding functionality.

What's next for this project

I plan to add search functionality for notes/courses, integrate lightweight collaboration tools for study groups (like shared to-do lists), and explore optional integrations with popular course platforms to auto-sync progress—all while keeping the core experience simple and focused on learner success.

Built With

• css3
• html5
• materialui
• react
• typescript