Intermediate App
Build a personal expense tracker with categories and data storage.
Now that you have built your first app, let us build something more useful. In this module, you will create a Personal Expense Tracker that helps you keep track of your spending.
What We Will Build
A personal expense tracker that can:
- Add expenses with a name, amount, and category
- Show a list of all expenses
- Sort expenses by category (like Food, Transport, Entertainment)
- Show total spending and spending per category
- Delete expenses
Step 1: Plan Before You Prompt
Before you start typing prompts, it helps to write down what you want. This is called the “describe it first” technique. Think about:
A main page showing all expenses + a form to add new ones.
Expense name, amount (in dollars), category, and date.
Add, view, filter by category, and delete expenses.
The describe-it-first technique 💡
Writing down your plan before prompting gives much better results. The AI understands a clear, complete description better than vague instructions. Spend 5 minutes planning to save 30 minutes of back-and-forth.
Step 2: Write Your Main Prompt
Create a new project called “Expense Tracker” (follow the same steps from Module 2). Then type this prompt:
Type this in the Agent Manager:
“Build a personal expense tracker web app. It should have: - A form to add new expenses with fields for: expense name, amount in dollars, category (dropdown with options: Food, Transport, Entertainment, Shopping, Bills, Other), and date. - A list showing all expenses sorted by date (newest first). - A summary at the top showing total spending and spending per category. - A delete button next to each expense. - A filter to show only expenses from a specific category. Use a clean, modern design with a white background.”
Step 3: Add Features with Follow-Up Prompts
After the initial app is built, you can add more features one at a time. This is called “iterating.” Try these follow-up prompts:
One feature at a time 💡
It is better to add features one by one rather than asking for everything at once. This way, you can test each feature before moving on. If something breaks, it is easier to find and fix the problem.
Step 4: Connecting to External Services (Optional)
If you want your expense data to sync with Google Sheets or save to the cloud, you can use MCP servers (the plug-ins we mentioned in Module 1).
For example, you could ask:
Important ⚠️
Connecting to external services requires setting up MCP servers, which can be a bit more technical. This is completely optional for this course. Your app works perfectly fine without it — data is saved locally on your computer.
Step 5: Test Your App
Testing means checking that everything works correctly. Go through this checklist:
- 1Add at least 5 expenses with different categories — do they all appear in the list?
- 2Click the category filter — does it show only the right expenses?
- 3Check the total — does the math add up correctly?
- 4Delete an expense — does it disappear and does the total update?
- 5Close the app and reopen it — are your expenses still there?
Testing is important 💡
Even professional developers test their apps carefully. Always try to “break” your app on purpose — type very long names, enter zero as an amount, or add many items quickly. This helps you find problems early.
Using Skills and Extensions
What are Antigravity Skills? 💡
Skills are ready-made packages that teach the AI how to do specific tasks. They are like recipe cards — instead of explaining every detail each time, a skill file gives the AI a set of instructions it can follow.
For example, there might be a skill for “building charts” or “connecting to databases.” The AI loads the right skill automatically based on what you ask for.
You do not need to create or manage skills yourself as a beginner. Just know that they work behind the scenes to make the AI smarter.