Module 4

Complex App

Build a contact manager with multi-step prompting and deployment.

⏱️ Estimated time: 50 minutes

You have made it to the advanced module — congratulations! In this module, you will build a Small Business Contact Manager. This is a more complex app that uses multiple prompts, data storage, and can even be published online for others to use.

What We Will Build

A contact manager app with these features:

Add contacts with name, email, phone, company, and notes
Search contacts by name or company
Group contacts into categories (Client, Supplier, Partner, etc.)
Edit and delete contacts
Add reminders for follow-ups (e.g., “Call Corraina on Friday”)
Export contacts to a downloadable file

Step 1: Break the App into Pieces

A complex app is like a puzzle — it is easier to build piece by piece than all at once. Here is our plan:

First prompt: Build the basic contact list (add, view, delete)
Second prompt: Add search and category filters
Third prompt: Add the edit feature and detailed contact view
Fourth prompt: Add reminders and follow-ups
Fifth prompt: Add export and final polish

The multi-step strategy 💡

Building in steps is the secret to making complex apps work. Each step adds one new feature. You test it, fix any problems, and then move to the next step. This way, the AI never gets confused by too many instructions at once.

Step 2: Multi-Step Prompting

Create a new project called “Contact Manager.” Then send these prompts one at a time, waiting for each one to finish before sending the next:

Prompt 1: The Basics

“Build a contact manager web app. Create a form to add contacts with these fields: full name, email, phone number, company name, category (dropdown: Client, Supplier, Partner, Other), and a notes field. Show all contacts in a clean table with columns for name, company, category, and phone. Add a delete button for each contact.”

Prompt 2: Search and Filters

“Add a search bar at the top that filters contacts by name or company as I type. Also add category filter buttons so I can quickly see only Clients, only Suppliers, etc.”

Prompt 3: Edit and Details

“When I click on a contact name, show a detail page with all their information. Add an edit button that lets me change any field. Include a back button to return to the list.”

Prompt 4: Reminders

“Add a reminder feature. On each contact's detail page, let me set a follow-up date with a note (like ‘Call about invoice’). Show upcoming reminders on the main page in a sidebar or banner.”

Prompt 5: Export and Polish

“Add an export button that downloads all contacts as a CSV file (a file that can be opened in Excel). Also improve the overall design — add a header with the app name, use a professional color scheme, and make sure it looks good on both desktop and mobile.”

Try it with example contacts 💡

Once the basic app is ready, add a couple of test contacts so you can see it in action:

Corraina — email [email protected], category “Client”, note “Interested in the spring order”.
MarshyLockhart — email [email protected], category “Partner”, note “Handles the newsletter”.

Then set a reminder like “Call Corraina on Friday” and search for “MarshyLockhart” to test the follow-up and search features.

Step 3: Data Storage

Your app needs to remember its data. There are a few ways to do this:

Local Storage

(What we use in this course) Data is saved in your web browser. It stays there until you clear your browser data. Simple and easy — no setup needed.

Database

For real apps, data is saved on a server (a powerful computer on the internet). This means multiple people can use the app and data is safe even if your computer breaks. This requires more setup.

Google Sheets

A middle ground. You can ask Antigravity to save data to a Google Sheets spreadsheet. Easy to set up with an MCP server, and you can view your data in Google Sheets anytime.

What is a CSV file? 💡

CSV stands for “Comma-Separated Values.” It is a simple text file where each line is a row of data, and commas separate the columns. It can be opened in Excel, Google Sheets, or any spreadsheet program. Think of it as a universal format for data tables.

Step 4: Publishing Your App Online

So far, your app only runs on your computer. “Publishing” (also called “deploying”) means putting it on the internet so anyone with a link can use it.

You can ask Antigravity to help you deploy:

“Help me publish this app online so other people can access it with a web link. What are my options?”

Common deployment options include:

Netlify / Vercel

Free hosting services for web apps. Antigravity can set this up for you. You get a web address like yourapp.netlify.app.

Google Cloud Run

Google's cloud hosting. More powerful but a bit more complex to set up. Good for apps that need a database.

Firebase Hosting

Another Google option. Great for simple web apps and includes a free database.

Important ⚠️

Deploying to the internet is more advanced and may require a few extra setup steps (like creating a Netlify account). Do not worry if this feels complicated — it is completely optional. Your app works perfectly on your computer.

Step 5: Sharing With Others

Once your app is deployed, sharing is easy:

1Copy the web address (URL) that the hosting service gives you.
2Send the link to anyone via email, text message, or chat.
3They can open it in any web browser — no download needed.

Advanced Configuration

Want to build a mobile app? 💡

Antigravity builds web apps (apps that run in a browser). But you can turn a web app into a mobile app using tools like “Capacitor.” Ask Antigravity: “Help me convert this web app into an Android app.” It will guide you through the process.

Google integrations 💡

Antigravity works well with other Google services:

Firebase — For databases and user login
Google Sheets — For storing and viewing data in spreadsheets
Google Drive — For file storage
Google Cloud — For powerful hosting and advanced features

Ask the AI about any of these and it will help you set them up.

Intermediate App

Tips & Resources