Open any project.
Open any project on your computer, or add one straight from GitHub with a link, private repos included. Every file and folder gets a short line in plain English, so the layout makes sense before you open anything.
Read it side by side.
Open a file and the explanation lines up with the code, part by part. Hover a card and its lines light up. Highlight any lines to ask about them.
Set how plain, and how long.
Plain is written for someone who has never coded. Technical is for developers who want the why. Short or detailed, your call, and you can change it anytime.
Learn the words as you go.
Programming terms are underlined. Hover for a plain definition, and mark the ones you know so they stop getting in your way. Your dictionary grows with you.
Ask how anything works.
"How does logging in work?" idecode searches the actual code, follows the trail across files, and answers with links that open the exact lines.
Take the guided tour.
A guide walks you through the real code, stop by stop. Everything dims except the lines that matter while it explains what they do and how they connect. Ask questions mid-tour.
See what it's made of.
Languages, frameworks and where it runs, at a glance. Every tool is a dictionary word, so you can find out what Next.js or Supabase actually does here.
▤ Project
checkout-app
acme/checkout-app· from GitHub
184files
21klines of code
Next.jsmain framework
TypeScript 71%JavaScript 17%CSS 8%
⌕Ask how anything in checkout-app works…→
1import { NextResponse } from "next/server";
2import { createClient } from "@/lib/supabase";
3
The tools it needslines 1-2
Brings in Next.js's way of sending a reply and the connection to the user database.
4export async function POST(req: Request) {
5 const { email, password } = await req.json();
6 if (!email || !password)
7 return NextResponse.json({ error: "Missing fields" }, { status: 400 });
Checking what was sentlines 4-7
Runs when someone submits the login form. If the email or password is empty, it stops right away and says what's missing.
8 const db = await createClient();
9 const { error } = await db.auth.signInWithPassword({ email, password });
10 if (error) return NextResponse.json({ error: "Wrong email or password" }, { status: 401 });
11 return NextResponse.json({ ok: true });
12}
Signing you inlines 8-12
Asks the database whether the email and password match. A wrong guess gets a polite no; a match signs you in.
✎ Ask about lines 5-6
⚙ Explanations
How plain
PlainBalancedTechnical
No coding background assumed
How long
ShortMediumDetailed
5 const { email, password } = await req.json();
6 if (!email || !password)
7 return NextResponse.json({ error: "Missing fields" }, { status: 400 });
Checking what was sentlines 5-7
This part is like a doorman. If someone forgets their email or password, it stops them at the door and tells them what's missing.
8 const db = await createClient();
9 const { error } = await db.auth.signInWithPassword({ email, password });
Signing you inlines 8-9
It calls the database's sign-in check, an async function, and waits for the answer before replying to the browser.
📖 async function
A step that takes a moment, like asking a database something, so the code waits for the answer instead of guessing.
✓ I know this wordWords used in this file
async functionI know this
JSONKnown
status codeI know this
⌕→
✦ Question
How does logging in work?
⌕Searching for "login|signIn"
▤Reading src/app/login/page.tsx
▤Reading src/app/api/login/route.ts
▤Reading middleware.ts
The login page sends your email and password to ▤ route.ts 4-12, which checks them with the database.
After that, ▤ middleware.ts 3-9 lets you through to your account pages on every visit.
Want to see it in the code?A short guided walkthrough, stop by stop.
⚑ Walk me through this1import { NextResponse } from "next/server";
2
3export function middleware(req) {
4 const session = req.cookies.get("session");
5 const isPrivate = req.nextUrl.pathname.startsWith("/account");
6 if (isPrivate && !session)
7 return NextResponse.redirect(new URL("/login", req.url));
8 return NextResponse.next();
9}
⚑ Keeping pages private?×
Every visit passes here first
▤ middleware.ts · lines 3-4
Before any page loads, this runs and reads your sign-in cookie, the little note your browser keeps after you log in.
‹1/3Next ›
≋ Stack
TypeScript71%
JavaScript17%
CSS8%
SQL4%
Built with
Next.jsReactSupabasePrismaStripeTailwind CSS
Runs on
VercelGitHub Actions
⚑ Guided tour
How checkout-app works, from login to receipt
9 stops · 3 chapters
▶ Start the tour