What is CRUD?

Almost every app you use (Instagram, WhatsApp, Shopee, even your school's attendance system) is built on four basic actions. Once you can spot them, you can build them too.

real apps do exactly this: just with a server instead of your browser

C: Create

Adding something new

New data gets saved for the first time.

Like: posting a new photo, sending a message, registering a new student.

R: Read

Viewing what exists

Existing data is shown to you, unchanged.

Like: scrolling your feed, opening a chat, checking a class list.

U: Update

Changing something that exists

Existing data is edited, not replaced entirely.

Like: editing your bio, renaming a group chat, marking someone late instead of absent.

D: Delete

Removing something

Data is taken away completely.

Like: unsending a message, deleting a post, removing a student who transferred out.

Where does the data actually live?

In a real app, data is saved on a server in a database. Today's demo saves data using your browser's own built-in storage (localStorage) instead: no server needed, but the exact same CRUD logic. What you learn here transfers directly to real databases later.

Contents

Live Demo A full Student List app: add, view, edit, and delete real records right in your browser.
ms. 02
Starter Template A guided, half-built shell for your own CRUD project: finish it with the help of AI.
ms. 03
Cheat Sheet The AI prompt template, code-to-button mapping, and fixes for common errors.
ms. 04
Minecraft CRUD Visual Example Explain CRUD with Crafting, Chests, Anvils, and Lava — with a live interactive inventory simulator!
ms. 05