At most one email a week. Unfollow anytime with one click.
Transcript
The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.
Show transcript
Introduction
Hi, and welcome back. The project sheet and CLAUDE.md are ready. Today it's time to build. We'll build the Sunset Coffee mini cashier app with Claude Code: preparing the menu data, designing the interface, building, trying out transactions, all the way to a daily recap.
Step 1: Prepare the menu data
We start with the data, not the interface. Here's the official menu from Laras. Product one: palm sugar iced coffee in a two-hundred-fifty-milliliter cup, eighteen thousand rupiah. Second, palm sugar iced coffee, one liter, eighty-five thousand. Third, cold brew, five hundred milliliters, fifty-five thousand. Fourth, the gift hamper, one hundred fifty thousand. Each product gets a short code so it's easy to record in transactions. Raka saves that list as a CSV file, then asks Claude Code to turn it into the menu file. Notice his message: don't change any prices. Claude Code reads the CSV file first. Then it writes the menu file with four products. Claude Code asks Raka to check it once more against the official list. That's a good habit: prices are money data, so a person always checks them.
Step 2: Design the interface with an Artifact
Before building, we design the interface. Raka asks Claude to design a cashier screen: four big menu buttons, a cart, the total, cash received, change, and a save button. The design appears in the right panel. At the top are four big menu buttons. In the middle is the cart: two iced coffee cups and one cold brew, for a total of ninety-one thousand. Below that, cash received is one hundred thousand, and the change is nine thousand. Raka shows this design to Dimas, who will use the cashier every day. Dimas wants a choice of cash or QRIS before saving. Claude adds two payment method buttons. Changing a design now is far cheaper than changing a finished app. Raka saves this design as an image in the project folder. Later, Claude Code uses it as a reference, so the app looks like what Dimas already approved.
Step 3: Claude Code builds it
Now Claude Code gets to work. Raka asks it to build according to CLAUDE.md and the design, only the first three must-have features, and to plan first. Claude Code drafts a plan. Look at point three: transactions are saved in the browser's storage, so the cashier keeps working even if the shop's internet goes down. Point four: the daily recap comes after the first features are tried. Building in stages like this makes mistakes easier to find. The plan makes sense, so Raka chooses to start. Claude Code writes the cashier page to match the design. Then the cashier logic file, about one hundred twelve lines: the cart, the total, and the change. All prices are read from the menu file, as CLAUDE.md requires. Then the style file, with big buttons for a touch screen. It also runs a small server on Raka's computer so the app can be opened in a browser. The address localhost means the app runs on this computer itself, not on the internet. The cashier is ready to try. The whole process takes just a few minutes, and Raka doesn't type a single line of code. We don't need to read the code, but we do need to know each file's role. The index.html file is the screen layout: where the buttons, the cart, and the payment fields go. Think of it as the shop's floor plan. The cashier.js file is the math brain: it adds items to the cart, calculates the total and change, then saves the transaction. If something is miscounted, the problem is usually here. The style.css file controls the look: colors, button sizes, and font sizes. If the numbers are too small, this is where the fix goes. With this simple map, you can give Claude Code more precise instructions. For example: make the change amount bigger in the style file, but don't touch the math.
Step 4: Trying out transactions
Time to try it. Raka opens the localhost address in the browser. The four menu buttons appear just like the design. He taps the iced coffee cup, and the cart holds one cup for eighteen thousand. He taps it once more. The quantity becomes two, for a subtotal of thirty-six thousand. Then he taps the cold brew. The cart total becomes ninety-one thousand. Raka checks with a calculator: thirty-six thousand plus fifty-five thousand equals ninety-one thousand. Correct. Never assume the numbers in an app are right until you've checked them yourself. Raka also tries simple things that are often forgotten: reducing an item's quantity in the cart and removing an item tapped by mistake. Both work. A real cashier will tap the wrong thing often when it's busy. Now the payment. Raka enters one hundred thousand rupiah as cash received. The change appears automatically: nine thousand rupiah. Just as calculated. He chooses cash, then taps the save transaction button. The first transaction is saved, and the cart is empty again, ready for the next customer. Raka also notes one thing that feels off: the change amount is too small on screen, even though it's the number Dimas looks at most when it's busy. Notes like this become material for improvements. Notice how Raka tests: he doesn't just check whether the buttons can be clicked; he pictures Dimas during rush hour. This user's point of view is what makes testing meaningful.
Step 5: Daily recap and CSV export
The basic features work, so Raka asks for the last must-have feature: today's recap and CSV export. He also asks for the change amount to be made bigger, based on his earlier note. Claude Code adds the recap and export functions to the cashier logic file. It also makes the change amount twice as big. The exported file is named after the date and contains no customer personal data, as CLAUDE.md prohibits. Why does CSV export matter? Data in the browser's storage can be lost if the browser history is cleared. With a daily export, Laras has a backup in Google Sheets as well as material for monthly reports. Raka tries five sample transactions, then exports the CSV and opens it in Google Sheets. Transaction one: two iced coffee cups, paid in cash. Second, one liter of iced coffee, paid with QRIS. Third, the transaction we tried earlier: ninety-one thousand, cash. Fourth, one gift hamper, QRIS. Fifth, three iced coffee cups, cash. The recap row shows five transactions with a total of four hundred sixteen thousand: one hundred eighty-one thousand in cash, and two hundred thirty-five thousand by QRIS. Raka checks it against a SUM formula in Sheets, and the result matches. A recap that used to take thirty minutes now takes a single tap. But remember, this app hasn't been fully tested yet. Don't use it with real customers before the testing stage. The screens in this video are simulations, so menus and addresses on your screen may differ.
Done!
The Sunset Coffee mini cashier is running: prices from the menu file, automatic total and change, recorded payment methods, and a daily recap with CSV export. All built in stages with Claude Code. An app that runs isn't necessarily ready to use. In the next episode we test this cashier with tough scenarios and fix it until Dimas is ready to use it at the shop. See you there!
Practice exercises
Try these on your own after watching to lock in what you learned.
Create your project's main data file, such as a product list or a student list
Design one main screen with an Artifact before asking Claude Code to build it
Build only the first must-have feature, then try it with three pieces of sample data
Ask the class material
Type a question or keyword; we find the part of this episode that explains it and jump the video there.
My notes
Notes are saved with the current video time and are only visible to you.
Questions & answers
Stuck on a step? Ask here; the instructor and other learners can answer.
No questions yet.
Your instructor
Cerdas Inovasi Digital Team
Software developers, BIM & 3D engineers, and AI practitioners
53 video classes1,290 episodes
We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.
