Build with AI · Wunmi's AI Starting Point

What is vibe coding?

People often use “vibe coding” to mean building software by describing what they want to an AI tool and iterating on its code. You may write less code yourself, but you still need to decide what should happen and test it.

A frontend is the part people see and interact with. A backend runs server-side work, such as securely checking permissions. A database stores organised information. A small calculator can work entirely in the browser without the latter two.

A visual prototype can look convincing while buttons do nothing or data disappears. A working application must perform its promised actions, handle errors and protect information appropriately.

Choose a first project you can finish

Personal landing page: practise headings, navigation and real links.
Simple quiz: check answers and explain why they are correct.
Calculator: turn inputs into a result you can verify by hand.
To-do list: add, mark and remove items; state whether they survive a reload.
Habit tracker: record a day and show a clear summary without implying medical advice.

Choose one main job. For this walkthrough, we will make a cost-per-item calculator for a fictional craft seller. It will not accept payments, store customer data or set a selling price.

Plan the calculator before building

Question: If materials cost ₦1,200 and packaging costs ₦300 for five items, what is the cost per item?

Rule: (materials + packaging) ÷ number of items. In this example, ₦1,500 ÷ 5 = ₦300.

One page with three labelled fields and a Calculate button.
Allow zero costs, but reject missing or negative costs.
Quantity must be a whole number greater than zero.
Show the result with two decimal places and explain that it is cost, not selling price.
Support keyboard use and phone screens. Do not save or send inputs.

These are requirements: specific behaviours you can check. A nice colour palette is not a substitute for them.

Give the builder a clear brief

Open a new project in an AI-assisted builder you can access, such as Replit, or work with code in a local editor. Check its usage and publishing settings first.
Paste the brief below. Ask for a preview and an explanation of what was built.
Compare the preview with the requirements. Do not enter private data, connect services or publish as part of this first exercise.
Request one fix at a time. Save a working version before making larger changes.

Our tested example is below so you can learn even without a builder account. Your tool’s generated version may differ.

Build a small cost calculator

Build a single-page cost-per-item calculator. Inputs: materials cost in naira, packaging cost in naira, quantity. Formula: (materials + packaging) / quantity. Require non-negative costs up to ₦1 billion each and a whole quantity from 1 to 1,000,000. Reject blank, negative and invalid inputs with a useful message. Show two decimal places. Explain this is cost, not selling price. Use labelled fields, keyboard-accessible controls and a responsive layout. Run in the browser only; no storage, accounts, external scripts, analytics, backend or payments. Do not deploy. Explain how to preview and test it.

Try the worked project

A real browser-only cost calculator. It uses your numbers, not AI. Nothing is saved or sent.

Test normal inputs and awkward ones

Use the working calculator above or your own preview. A passing happy-path test is only the beginning.

Inputs	Expected behaviour
1,200 + 300; quantity 5	₦300.00 per item
0 + 0; quantity 1	₦0.00, not an error
100 + 0; quantity 3	₦33.33 after rounding
Quantity 0 or 2.5	Explain the whole-number requirement; no calculation
Negative or blank cost	Ask for a valid cost

Report a specific bug

The calculator accepts quantity 0 and displays an invalid result. Expected: show a clear error and do not calculate. Please fix this without changing the layout or valid-input behaviour. Then test quantity 0, quantity 5 and a blank quantity, and explain the results.

Check your resultThe three normal calculations match the expected values.Invalid fields produce a helpful error rather than Infinity or a misleading number.I can reach every field and button with Tab and calculate with Enter.At phone width I can read the result without horizontal scrolling.Reloading does not imply that inputs were saved.

For your own review. These ticks are not saved or graded.

What happens after the prototype?

A domain is a name people use to find a site. Hosting serves its files or application. Deployment is putting a particular version on that hosting service. A local preview is not a public deployment.

Before publishing a real project, test links, forms and errors. A form needs an actual submission destination and clear privacy information; a button saying “sent” does not deliver an email. A data-connected application needs permission checks on the server, not just hidden buttons.

Do not put API keys or passwords into browser code. Review dependencies, permissions and generated code, with experienced help when needed. AI-generated software is not automatically secure or ready for production. This lesson does not publish anything for you.

Go from a demo to a useful project

A common mistake is adding logins, payments and dashboards before the core calculation works. Another is accepting the builder’s “fixed” message without repeating the failing test.

Good next projects include a small business website with confirmed opening hours, a multi-page portfolio with real work, a workflow dashboard using sample data, or a basic data-connected application after learning access control. Treat each new data connection as a separate design and security decision.

Go FurtherOptional challenge. Come back whenever you’re ready.

Add a labour-cost input to your own version. Update the formula and explain why it changes. Re-run every earlier test, then test labour = 0 and labour = 500. For materials 1,200, packaging 300, labour 500 and quantity 5, the new result should be ₦400. Do not change the example on this page; use it as your comparison baseline.