The feature image for the project Lyricfy-JP.
The feature image for the project Lyricfy-JP.
The feature image for the project Lyricfy-JP.
The feature image for the project Lyricfy-JP.

FULL-STACK WEB APP | 2026

Lyricfy-JP

A Japanese learning app that turns your Spotify library into a classroom — displaying real-time synced lyrics with furigana and English translations, letting you capture vocabulary mid-song and drill it later with flashcards.

Next.js
TypeScript
Supabase
Tailwind CSS
Spotify API
Google Gemini
Claude Code

OVERVIEW

Lyricfy JP was built around a simple idea: the best way to absorb a language is through content you actually enjoy. It connects to Spotify, pulls live lyrics from lrclib.net (with Genius as a fallback), and overlays furigana and English translations in sync with playback. Highlighted phrases are sent to Gemini for AI-generated readings, translations, and example sentences — then saved to a personal dictionary with spaced repetition flashcards for review.

IMPLEMENTATION

TECH STACK

Framework

Next.js

Language

TypeScript

Backend

Supabase

AI

Google Gemini 2.0 Flash via OpenRouter, Claude Code

Styling

Tailwind CSS

APIs

Spotify Web API, lrclib.net

Deployment

Vercel

FEATURES

Real-time lyrics synced to Spotify playback

Furigana and English translation overlay

AI-powered vocabulary capture — highlight any phrase to get readings, translations, and example sentences

Personal dictionary with search, tagging, and sort by success rate or date

Spaced repetition flashcard quizzes (JP→EN and EN→JP modes)

Library browsing without active playback

CHALLENGES & SOLUTIONS

Instruction overload degrading output quality

Learned to start with a broad direction and layer in specifics incrementally across iterations, rather than front-loading all requirements at once. Claude Code follows instructions more reliably when each prompt has a narrow, well-defined scope.

Higher-than-expected token usage

Discovered that effective AI-assisted development demands upfront planning — vague intent gets expensive fast. Mapping out features and data flow before implementation reduced wasted back-and-forth and helped stay within a limited token budget.

Knowing when to stop prompting and intervene manually

Maintained active code literacy throughout the build so that when Claude Code stalled on a bug, I could identify and fix it directly rather than burning tokens on diminishing prompts. Over-delegating without understanding the codebase creates both technical debt and token waste.

Inconsistent AI output format breaking UI parsing

Worked through the inconsistency with Claude Code iteratively — describing the format failures I was seeing and letting it propose and refine the fix. This reinforced a key pattern: when AI-generated output is unreliable, the solution is often better enforced at the code level rather than purely through tighter prompting.