Ten education apps you can open right now, each torn down stack by stack. Study how it's built, then build your own version. From a single HTML file to a full Next.js app with AI.
Every project on this page follows one teaching loop. We pull a real, deployed app apart, name the tools it's built with, point you at the live version so you can poke at it, and then hand you a brief to build your own. You learn the stack by rebuilding something that already exists, not by staring at a blank file.
Most of these apps are built from the same small set of tools. Learn this stack once and it carries across every project. The simplest apps use only the first layer; the most advanced use all four. Full deep-dive on the stack →
Three apps on this page are just these three files — no framework, no build step, no server. It's the right place to start: you can read every line, and it runs by opening the file. Master this before reaching for anything heavier.
When an app needs many pages, shared components, accounts, or a database, a framework keeps it organized. We default to Next.js (built on React). Simpler interactive apps can use plain React on its own.
Vercel turns a git push into a live URL in seconds and runs your server code (API routes). Reach for Railway when you need something Vercel won't run — a background worker, a queue, a always-on server. Static apps just need any host. Vercel vs Railway →
The apps with "generate" buttons call a large language model from a server route. We default to Anthropic's Claude (Sonnet for most work, Haiku for cheap high-volume calls). The pattern is the same whichever provider you choose: take user input, call the model, validate what comes back, show it.
Note for instructors: a few sample apps below were originally wired to a different model provider. The lesson teaches the Claude pattern; swapping providers is a one-function change, so use them as-is and point out where the model call lives.
A reference app shows you what's possible. Cursor — an AI code editor — is the fastest way to go from idea to a deployed app: you describe what you want and it writes and edits the code alongside you. New builders get 50% off their first month through our link.
Ordered easiest to hardest. The first four need no build step at all; the last five are full Next.js apps. Pick the rung that matches your class.
New to this? Set up Cursor first → — it'll write the first version with you.
Free, open-source spelling practice with audio and spaced repetition.
How it's built: No framework and no server — one set of HTML, CSS, and JavaScript files. Word lists live in a JavaScript array. The browser's built-in speech/audio API reads each word aloud, and a little scheduling logic decides which words to bring back. It's the whole app in plain sight, which is exactly why it's the first lesson.
Make a vocabulary or spelling trainer in a single HTML file. Keep your words in an array, use the browser's speech API to say each one, check the typed answer, and keep a running score. No framework allowed.
Educational crossword puzzles across science, history, and math.
How it's built: Another no-framework app. Each puzzle is just data — a list of words, clues, and grid positions. JavaScript reads that data, draws the grid, and checks answers as you type. The lesson here is data modeling: get the shape of the puzzle data right and the rendering falls out of it.
Build a quiz or word-search on a subject you know well. Define the questions as a data array first, then write the JavaScript that renders them and grades the answers. Add one puzzle, then prove a second one works without touching the rendering code.
Plan a 36-week year of hands-on experiments from the materials you have.
How it's built: Still no server — but smarter logic. You check off the materials you own, and the app instantly shows which experiments you can run and which are one item away. That "what unlocks now?" behaviour is client-side state: the page reacts to your choices in real time without ever reloading.
Build a "what can I make?" planner: a checklist of things you have (ingredients, parts, art supplies) and logic that reveals which projects unlock as you tick boxes. The interesting part is the matching rule — write it so adding a new project needs no code changes.
K–12 math practice with lessons, walkthroughs, and unlimited problems — works offline.
How it's built: Plain JavaScript again, but with two new tricks. It's a PWA (Progressive Web App), so it can install to a phone's home screen and run offline. And it saves your streak and stats in LocalStorage — the browser's built-in memory — so progress survives a refresh with no accounts and no database.
Build a flashcard or times-tables app that remembers your progress. Save the streak and score to LocalStorage, then add a web-app manifest and a service worker so it installs and works with the wi-fi off.
Gamified math practice — solve problems to crack codes and unlock rewards.
How it's built: The first step up to a framework. Math Code Breaker Game is a React app: the screen is broken into components (the problem, the answer pad, the score), and the game's state flows between them. There's no database — all the logic lives in the browser — so it's the cleanest way to learn React's "state drives the UI" idea before adding a backend. Hosted on Vercel.
Rebuild a small math game in React. Make separate components for the problem, the input, and the scoreboard, and keep the score in the parent so every component stays in sync. Deploy it to Vercel with one push.
A free K–12 curriculum — 2,250 days of lessons with an AI tutor on every page.
How it's built: The flagship full-stack example. Next.js handles the many pages (units, days, dashboards); Supabase is the database that stores curriculum and progress; and an AI tutor on each page answers questions about the current lesson. This is where the front end, a real database, and AI all meet — the shape most ambitious apps end up taking.
Build a mini curriculum browser in Next.js: a list of lessons pulled from a database, a page for each lesson, and a "mark complete" button that saves. Stretch goal: add a tutor box that asks Claude about the lesson the student is currently reading.
Free AI tools that turn a subject and grade into a standards-aligned lesson plan.
How it's built: The simplest possible AI app, and the best one to learn the core pattern on. A teacher fills in a short form, a server route sends that to a language model, and the finished lesson plan comes back to the page. No accounts, no database — just form in, model out. Every AI feature you'll ever build starts from this exact loop.
Build a one-prompt generator: a form with a couple of fields, a Next.js API route that calls Claude with those values, and a clean result the user can copy. Keep your API key on the server — never in the browser.
Generates curriculum-grade modules — skill maps, lessons, and mastery checks.
How it's built: A step past EduConnect. Instead of free-form text, Rostrum asks the model for structured output — a skill map, sequenced lessons, and a quiz — then validates that structure and renders each part on its own. It saves modules to a Postgres database and charges with Stripe credits. The lesson: getting clean, reliable JSON out of an LLM is a skill of its own.
Make the model return structured data, not a paragraph: ask Claude for a topic broken into a list of skills plus a 3-question quiz, as JSON. Validate the shape, and if it's malformed, ask again. Render each piece as its own section.
AI-assisted writing for kids' and YA books — write, publish, and share, classroom-safe.
How it's built: Adds the two things real products need: accounts and sharing. A user signs in (with a passkey, no password), the AI drafts a story, they edit it, and publishing gives it a public URL anyone can read. Content is moderated before it goes live. This is the jump from "a tool" to "a place users come back to."
Add accounts and sharing to an AI generator: let a signed-in user create a short story, save it to their account, and publish it at a public link. Decide what's private and what's shared — and add a moderation check before anything goes live.
Adaptive test prep (SHSAT, SSAT, ISEE) with spaced repetition and a parent dashboard.
How it's built: The most complete app on the list. On top of the full Next.js + Supabase stack it adds two hard pieces: payments (a free tier and paid plans via Stripe) and an adaptive engine that picks the next question based on how the student is doing and schedules reviews with spaced repetition. It shows what a finished, sellable product actually contains.
Add a paywall to a quiz app: free users get a short sample, paying users unlock full-length tests through Stripe Checkout. Stretch goal: make it adaptive — pick each next question from the student's weakest area instead of at random.
Clone one of our open-source starter repos, run it, and make it yours. Each is beginner-safe — minimal dependencies, no API keys — and ships with a Terms of Service, Privacy Policy, and input sanitization already built in. New to this? Each one now has a step-by-step "Build it yourself" walkthrough that takes you from clone to deployed.
New to GitHub? On any repo, click "Use this template" (or Code → Download ZIP) to get your own copy.
Short, practical reads from this site — set up your tools and ship your first app fast.
Open the live sample, see how it behaves, then rebuild it your way. New builders: let Cursor write the first version with you — 50% off your first month through our link.
About these samples: all ten are independently built, deployed apps featured on vibeshare.site and emergetech.online. They're shown here as reference material — study them, don't copy their code.