Build With Lovable

Before you start: the account rules

The screen, mapped

When your project opens, the screen looks like this. Two panels, three things to know:

A screen map instead of a screenshot, on purpose: builder interfaces change their look every few months, but these 3 zones (chat, preview, publish) have stayed put. If the screen you see differs, find the 3 zones and you are oriented.

The build, step by step

1. Parent signs in at lovable.dev (Google sign-in or email). You get a small number of free build credits each day; that is enough for this lesson.
2. Paste your 5-block prompt from Lesson 2 into the big box and send it. If you skipped that homework, use the starter prompt below.
3. Wait about 1 to 3 minutes. Watch the right panel: the AI is writing real code and assembling your app live. Reading its progress notes teaches you what it is doing.
4. Try EVERYTHING in the preview. Tap every button. Add an item. Refresh the page. Does the data survive? Resize the window to phone width. Note what is wrong on paper; do not fix anything yet.
5. Fix one thing at a time with the fix-it pattern from Lesson 2. One message, one change, then re-test. Three good fixes beat ten rushed ones, and each message spends a credit, so make each one count.
6. Publish. Tap Publish (top right) and confirm. Lovable gives you a public link like yourapp.lovable.app.
7. Send the link to one person from your WHO. Watch them use it. Say nothing while they do. This is the TEST step of the design loop, now with a real app.

Build a web app called Study Streak for students revising for exams.

Screens:
1. Home: today's subjects as big cards, each with a Done button and a flame icon showing my current streak of study days.
2. Add Subject: a form with subject name and minutes per day.
3. Stats: total study days this month and my longest streak.

Actions: tapping Done on a card marks that subject finished for today and updates the streak. The form must not save an empty subject name.

Look: clean white background, one deep purple accent, big rounded cards, cheerful but not childish. Great on a phone.

Data: save everything so it is still there after a refresh.

Then iterate. Three example follow-ups that show the rhythm:

• "When I mark all subjects Done, I expected a celebration message, but nothing happens. Add a short congratulations banner. Change nothing else."
• "The streak flame is tiny on my phone. Make it twice as big on small screens only."
• "Add a gentle reminder line on Home: 'Small daily beats big rarely.' Keep the current design."

Free vs paid on Lovable

Prices and limits change often. Check the pricing page with your parent before paying for anything, and agree the plan together. The free tier is all this course needs.