Case study · Learning Progress Tracker
Progressyx
A learning tracker for online courses spread across different sites. Paste a course link, add or import its lessons, tick them off as you go, and press Resume to land exactly where you stopped, even mid-video, with streaks and missions to keep you showing up.
- Role
- Full-stack Developer
- Year
- 2026
- Type
- Web app
- Status
- Ongoing
Ongoing project. It runs locally while I finish it, so there's no live site yet.
01 — overview
I'm usually taking a few online courses at once, and they all live on different sites: a playlist on YouTube, a course on Cisco Networking Academy, another on freeCodeCamp. Progressyx puts every course in one dashboard. You paste a course link and it reads the title, cover and site name, then you import or add the lessons, tick them off as you go, and press Resume to land on the right lesson, even at the same second of a video. Streaks, daily and weekly missions and milestones keep me coming back every day.
02 — the problem
I kept forgetting which lesson I was on and where I stopped in a video. Each site tracks progress its own way, if at all, so there was no single place to see what I'm learning, how far along I am, or whether I studied today.
03 — goals
- Keep every course in one place, whichever site it's on
- Never lose my place in a course or a video
- Count only real study time, not just videos left open
- Make showing up every day feel rewarding
04 — approach
I built it on Next.js with TypeScript, using Firebase Authentication and Firestore on the free plan. Every page, Server Action and API route checks the signed-in session on the server, and all data lives under the owner's account, so changing an ID in a URL can't reach anyone else's data. Progress, streak and mission rules live in one module with their own tests. When you paste a course link, the server reads the page's public details, and YouTube links go through the YouTube Data API to import playlist lessons and video lengths.
05 — stack
- Next.jsApp Router pages, Server Actions and API routes for sessions, link lookups and playback
- TypeScriptTyped data models, progress rules and validation
- Tailwind CSSStyling, with Radix UI for dialogs, menus and form controls
- Firebase AuthEmail and password sign-in, sign-up and password reset
- Cloud FirestoreCourses, lessons, progress, study sessions and daily activity per user
- ZodValidates every form and Server Action input
- YouTube APIEmbedded player that saves your place, plus playlist and video length imports
- VitestTests for progress, streaks, missions, link detection and the security rules
06 — key features
Add a course from any site
Paste a link and Progressyx reads the title, description, cover image and site name the page shares publicly.
Lesson imports
YouTube videos and playlists import their lessons, order and lengths. For other sites, paste the syllabus as a plain list to create sections and lessons in seconds.
Resume
Picks the lesson you last opened or the next unfinished one, and the built-in YouTube player picks up at the same second.
Progress you control
Tick off lessons one at a time or a whole section at once. Watching a video to the end never marks it complete; you decide.
Streaks and missions
A study streak with a 7-day strip, daily missions (reach your goal, finish a lesson, show up), weekly missions and 12 milestones to unlock.
Finish-by dates
Set a target date and see the days left, with overdue warnings.
Learning history
Every study session from the player or logged by hand, grouped by day in your own time zone.
Course library
Grid and list views with search, source and status filters, sorting, and archive or reopen for each course.
07 — challenges & solutions
Counting real study time
- Problem
- Leaving a video open, or editing data from the browser, could inflate study time and streaks.
- Solution
- Only time actually spent playing in the player, or time you log yourself, counts. The player sends heartbeats and the server caps every update by the real time that has passed. Firestore rules never let the browser write study time or streaks directly.
Reading course links safely
- Problem
- Fetching any URL a user pastes from the server could be used to reach private or local network addresses.
- Solution
- Course links are fetched on the server with checks that block private and local addresses, plus size limits and timeouts. It never signs in to other sites or gets around paywalls.
Streaks across time zones
- Problem
- Counting days in the server's time zone would break a streak for someone studying late at night.
- Solution
- Streaks and missions are counted in each user's own time zone, and a streak only breaks once a whole day passes with nothing studied or finished.
08 — outcomes
- The full flow works end to end: add a course, import or add lessons, study, resume and finish, with streaks and missions updating along the way.
- Layouts that work on phones and computers.
- Tests cover the progress rules, streaks and missions, link detection, validation and the Firestore security rules.
09 — what I learned
- Small rules like what counts as a study day or 100% shape how fair an app feels
- Server-side fetching of user links needs the same care as any other input
- Building something I use every day is the fastest way to find what's missing
10 — what I'd improve next
- Deploy it so I can use it from any device
- Track progress on more course sites automatically