GOBBB

Interactive language-learning platform with audio lessons, quiz systems, personalized progress tracking, subscription management, and an admin content panel.

year: 2024
role: Frontend Developer
duration: 5 months
live: —

> stack
  next.js · tailwind css · redux

$cat summary.md

An interactive language-learning app. Lessons combine audio with quiz checkpoints. Users get personalized progress tracking; the company can author new content via a custom admin panel. Built on Next.js for SEO on the public marketing pages, Redux for the global learner state.

$ls features/

01Audio lesson player with chapter scrubbing and resume
02Quiz system with multiple question types (MCQ, fill-blank, audio-match)
03Personalized progress tracking and streaks
04Subscription management (Stripe)
05Admin content authoring: lessons, quizzes, audio uploads
06SEO-optimised marketing pages via Next.js SSG

$cat challenges.md

#01Resume audio across devices and sessions

A learner stops mid-lesson on mobile, opens later on desktop, expects to resume the exact spot. Local state isn't enough.

#02Quizzes mixed inside audio timelines

Quiz checkpoints had to pause the audio at the right moment, present the question, then resume — without losing the audio buffer or position.

#03Content authoring without engineering

The team wanted to publish lessons without my involvement. Admin panel had to handle audio upload, transcription, and quiz authoring in one flow.

$cat approach.md

→ 01Server-synced playback position

Position checkpoints every 10s to the server, plus on tab-blur. On resume, the server's last known position wins. Local IndexedDB is a fallback for offline use.

→ 02Audio timeline events

The lesson schema embeds quiz checkpoints as timestamped events. The audio player emits events crossing those timestamps; the UI pauses + renders the quiz overlay.

→ 03Drag-and-drop authoring

Admin panel composes lessons from blocks. Drag audio file → block. Drag quiz card → block. The result is a single JSON document the player consumes verbatim.

$git log --oneline

3e5a1f0chore: Next.js + Redux scaffold
b27c84dfeat: audio player + chapter scrubbing
c8e91a2feat: quiz system w/ timeline events
fa1d735feat: progress + streaks + sync
5b9c248feat: admin content authoring
deliveredmilestone: handover

$cat outcomes.md

✓Lessons publish without engineer involvement
✓Audio resumes precisely across devices
✓Conversion-friendly SEO marketing pages

$ls ../

← prev

SBM/04

Ring Builder/01

pritesh@portfolio: ~/case/gobbb$