Polylingo Duolingo-Style Language Learning App Template

Learn Spanish the way you would on Duolingo, in short lessons along a path. Ten beginner lessons, from Greetings to Travel, unlock in order, each with 8 to 10 exercises across five types: picture choice, word tiles, listen and type, match pairs, and fill in the blank. A wrong answer costs one of five hearts and comes back at the end of the lesson. Hearts refill one per hour, and practice reviews past mistakes, never costs hearts, and earns one back. Lessons earn XP toward a daily goal, streaks follow each learner's own calendar day, and a weekly leaderboard shows first names and last initials, with disclosed sample learners filling empty places. Every Spanish word and sentence has normal and slow audio, recorded ahead of time with an AI voice. The server grades each answer and calculates all progress. Visitors can take the first lesson without an account and keep it when they sign up or sign in. Lessons are data files checked by tests, and one config file holds the name, colors, and mascot. Includes a landing page, a profile with 10 achievements, and settings. Built with Layerwise, React, and TanStack Start.

Use Polylingo for a beginner Spanish course for English speakers, or as the base of a more specific one, such as Spanish for travelers or restaurant staff. Choose Try a free lesson to play the first lesson without an account, then sign up to see the path, practice, leaderboard, and profile.

• A landing page, a free guest lesson at /try, and a winding path of 10 lessons that unlock in order, with 98 exercises across picture choice, word tiles, listen and type, match pairs, and fill in the blank.
• Five hearts that refill one per hour, XP, daily goals, streaks on each learner’s own calendar day, practice that reviews past mistakes, a weekly leaderboard with disclosed sample learners, and a profile with 10 achievements.
• Normal and slow audio for all 325 Spanish words and sentences, recorded ahead of time with an AI voice, plus server-side grading, tap-to-translate, and guest progress that carries over at sign-up.

The template opens as a local project you can change through the conversation or the code editor. You can inspect the source for this template version before choosing how to extend it.

1. 1
   Install Layerwise and sign in. Choose Use this template, select a team and project name in the app, then choose Copy to Layerwise. Wait for setup and the local preview to finish.
2. 2
   Start in src/brand.config.tsx, which holds the name, tagline, support email, colors, and mascot, then run pnpm brand:assets. Landing page wording is in src/routes/index.tsx. Each lesson is a file in src/content/lessons, the path order is in src/content/course.ts, and XP, hearts, goals, and leaderboard size are in src/config/game.ts. New Spanish text needs pnpm audio:generate, with OPENAI_API_KEY in .env and ffmpeg installed, and pnpm test fails on a missing clip or translation. The language setting is only a label, so teaching another language also means new lessons, a new voice direction, and a full recording. Keep lesson and exercise ids stable after launch.
3. 3
   Ask for the change in the project conversation. This prompt is a starting point; adjust it to describe your intended result.

   Add an eleventh lesson, At the Doctor, after Travel. Give it 10 exercises that use all five types and teach how to say where it hurts, ask for help, and understand simple instructions. Add every new Spanish word to its vocabulary, and use the existing doctor and hospital illustrations where they fit. Update the lesson list in src/content/course.test.ts and the lesson counts in e2e/full-journey.ts, change Course Champion to all 11 lessons, then run pnpm audio:generate and pnpm test. If OPENAI_API_KEY is missing from .env, ask me for it before recording.

• Choose Try a free lesson and miss the first question; hearts should drop from 5 to 4 and the feedback should say Not quite. When Type what you hear plays Hola, ¿cómo estás?, type hola como estas; it should pass with Correct! Watch the accents. The missed question should return under Previous mistake, and Lesson complete! should show 15 XP and 90% accuracy.
• Choose Create free account and sign up. The dashboard should show Your lesson is saved. +15 XP!, a streak of 1, 15 XP, and 4 hearts, with Greetings complete. Opening /dashboard/lesson/travel should show This lesson is still locked.
• Miss answers in Introductions until You’re out of hearts appears, choose Practice to earn a heart, and finish; you should see Practice complete! and You earned 1 heart back. Under Leaderboard, your row should show your first name, last initial, and (you), with Some learners on this board are sample profiles. below the board. Setting leaderboard.size to 0 in src/config/game.ts should remove the sample learners and the note.

Local and published apps use separate databases, so test accounts and progress stay local. Before launch, replace the placeholder support email, add your own terms and privacy pages, keep the AI voice notice, and have a Spanish speaker listen to the audio, because no person has reviewed it. The guest endpoints accept anonymous writes and have no rate limit, so add one before you expect traffic. Billing, reminder emails, streak freezes, speaking exercises, a name filter, and an admin page are not included, and the app teaches one course.

Use the local preview controls to test the affected path. When it works, publish a release and repeat the check at the live URL. For saved records or accounts, read about the separate Local and Online databases.

• How to Build a Language Learning App Like Duolingo with AIBuild a Duolingo-style language app in Layerwise with lessons as data, server grading, hearts, streaks, a weekly leaderboard, audio, and guest lessons.