Inspiration
Preparing for standardized language exams often means juggling between static PDF test papers, separate dictionary apps, and clunky audio players. We wanted to build Fingertip Media to eliminate this friction—turning static exam papers into an interactive, all-in-one digital learning workspace where test-takers can read, listen, translate, and annotate seamlessly in one place.
What it does
- Interactive PDF & Cloud Annotation: High-performance PDF reader with text highlighting, drawing, notes, and instant multi-device cloud synchronization.
- Smart Click-to-Translate & Vocabulary: Instant single-word lookup (powered by offline ECDICT) and contextual AI sentence translation, with one-tap saving to personal vocabulary lists and native TTS pronunciation.
- Audio-Subtitle Sync Player: Synchronized bilingual listening transcripts—click any sentence in the transcript to jump playback directly.
- Unified Study Workspace: Responsive dark/light theme, study progress analytics, and secure multi-device session management.
How we built it
- Tech Stack: Built with Next.js 16 (App Router), TypeScript, Tailwind CSS, shadcn/ui, PostgreSQL (Prisma ORM), and Redis.
- AI & Services: Azure Translator & LLM APIs for contextual translations, offline dictionary indexing for sub-millisecond lookups, and PDF.js for rendering.
- Developed with Kiro: Heavily leveraged Kiro IDE's spec-driven workflow and agentic capabilities to structure specifications, scaffold full-stack components, and rapidly debug complex client-side interactions.
Challenges we ran into
- Cross-device Coordinate Mapping: Accurately mapping selection coordinates, annotations, and touch events on canvas across different zoom levels and screen sizes.
- Audio-Subtitle Synchronization: Achieving sub-second sync and smooth auto-scrolling during audio seeking across varying network conditions.
- Balancing Latency & Depth: Designing a hybrid translation pipeline that prioritizes instant local dictionary queries while delegating complex sentences to cloud AI.
Accomplishments that we're proud of
- Seamlessly fusing PDF reading, instant translation, and synced listening into an intuitive paperless study experience.
- Achieving millisecond-level responsiveness for word lookup and smooth annotation sync.
- Completing a production-ready, full-stack platform within the hackathon timeline using Kiro's agentic workflow.
What we learned
- How spec-driven development in Kiro significantly accelerates iterative architecture design while preventing regressions.
- The nuances of web audio timing APIs and custom PDF text-layer rendering optimizations.
What's next for Fingertip Media
- AI Mistake Notebook (智能错题本): Automated error classification and weak-point diagnostic reports.
- Interactive AI Speaking Coach: Real-time pronunciation scoring and oral simulation.
- Expanded Test Catalog: Supporting a broader variety of global exams and community-shared study sets.
