How I Built ListaKo in One Day Using AI and Firebase (Even Without Expert Coding Skills)

It’s been a while since I got into the zone like this, pero recently, I surprised myself. I built a working, database-powered web app in a single day. Hindi dahil I’m some coding genius far from it. I just used AI as my coding partner.

This post is a step-by-step walkthrough of how I created ListaKo, a simple but meaningful app built for sari-sari store owners in the Philippines. If you’ve ever had an idea and felt stuck dahil wala kang full dev skills, baka makatulong ’to.

The Idea: A Tech Fix for a Filipino Norm

In the Philippines, sari-sari stores are the heart of the barangay. They're not just stores they’re extensions of trust. “Pa-lista po, Ate,” is something we’ve all heard or said. It’s the informal utang system that works because of relationships.

But this system is still stuck sa notebook. Manual, prone to loss, and awkward when it comes to reminders. That’s where ListaKo comes in, an app to digitize that IOU system while keeping the human touch intact.

I wanted two key features:

1. Kind Reminders – AI-generated Taglish messages that are gentle and culturally aware
2. Loyalty Hub – Suggestions for simple rewards for suki customers

That was the vibe. And to bring that to life, I used what I now call “Vibe Coding.”

Step 1: From Idea to MVP (via Google AI Studio)

Instead of opening a blank code editor, I started inside Google AI Studio using Gemini.

But instead of asking it to write app UI or logic from scratch, I started with a master system prompt, a detailed instruction that told the AI exactly how to behave.

Here’s the actual prompt I used:

# PERSONA & CONTEXT
You are "Suki AI," an expert AI assistant designed for a Filipino financial management app. Your primary users are Filipino small business owners, like sari-sari store operators. Your purpose is to help them manage customer credit ("utang") in a way that is both effective and culturally empathetic, preserving the important "suki" (loyal customer) relationship.

You must deeply understand these Filipino cultural concepts:
- Pakikisama
- Utang na Loob
- Suki

# CORE TASKS
1. Generate Empathetic Payment Reminders
2. Identify Loyalty Program Opportunities

# INPUT FORMAT
Customer: [Name], Balance: [Amount], DueDate: [Date], DaysOverdue: [Number], History: [Brief notes]

# OUTPUT FORMAT
**Analysis:**
**Suggested Action:**
---
**SMS Template (English):**
**SMS Template (Filipino):**

(or if loyalty triggered)
---
**Loyalty Suggestion:**

I then tested it with sample scenarios like:

• A good customer slightly late (Aling Nena)
• A loyal, on-time payer (Mang Jun)
• A customer who’s very overdue (Carlo)

The AI responded with empathetic messages, adjusting tone depending on the delay and adding loyalty perks when applicable. It was like programming a moral compass.

This wasn’t just a chatbot, it was a decision engine I could connect later to my app.

Step 2: Hit the Wall – LocalStorage Isn't Enough

The MVP used localStorage to track data, good enough for testing, pero not scalable.

I asked Gemini:

“This is great, but I need to move from localStorage to a proper database so the data can be persistent and used by multiple people. What’s the best way to do this?”

Gemini suggested Firebase Firestore. I followed its instructions.

Step 3: Setting Up Firebase with AI Guidance

Here’s what happened step-by-step:

1. Downloaded Code – Exported from AI Studio, opened in VS Code
2. Opened Terminal – Navigated to folder with:

cd "Documents/Ai Studio Web Applications/listako"

3. Installed Firebase Tools

npm install -g firebase-tools

4. Created Firebase Project – Used Firebase Console, copied config snippet
5. Created services/firebase.ts – Pasted config, exported Firestore instance
6. Ran Firebase Init – Answered prompts:
   • Feature: Hosting
   • Use Existing Project: listako-app
   • Public Directory: dist
   • Single Page App: Yes
7. Created Firestore DB – Started in Test Mode

Step 4: Refactoring for Firebase

Gemini rewrote my App.tsx to replace all localStorage logic with Firestore functions.

Key changes:

• Removed localStorage.getItem() and setItem()
• Added async Firestore addDoc, getDocs, etc.
• Wrapped data loading with useEffect

Result: The app now loads and stores data in Firestore — accessible across devices.

Step 5: Deploying the App

Commands:

npm run build
firebase deploy

Deployment gave me:
✅ https://listako-app.web.app

Data written in the app showed up in Firebase in real-time.

Step 6: Adding a Custom Domain

I followed Gemini’s guide to:

• Add TXT + A records in my domain DNS settings
• Wait for verification
• Handle SSL setup warning

Smooth process. My domain is now connected.

Final Thoughts: You Can Build With Just Intent + Prompting

You don’t need to memorize frameworks. You need a vision, a good prompt, and the courage to try.

Let the AI be your backend dev, your logic designer, your reminder writer. Basta ikaw ’yung creative director.

If you want the exact prompt + resource guide I used to build the AI logic in AI Studio, subscribe here.

You might be one prompt away from your first app.

– G