Building “Squares” with ChatGPT: From Prompts to a Commercial-Ready App (Day 1 -3)

Vibe coding with ChatGPT (Days 1–3)

I’m not a professional web developer. In fact, I haven’t coded seriously since the mid-1990s, when I left Lockheed as an embedded systems programmer. Since then, I’ve worked in other domains, and while I kept up with reading about technology trends, I had zero practical experience with modern platforms like React, Next.js, Firebase, or Vercel.

My goal: have ChatGPT write 99%+ of the code while I provide design ideas, product concepts, and do the testing.

In just 3 days we had a working local prototype. Here’s what we achieved.

🚀 From Zero to Prototype in 3 Days

With ChatGPT guiding me step by step, we had a local working prototype in just 3 days. That included:

A functional auth flow with magic links (passwordless login).
A Manager Dashboard with accordion-based UI for Active Squares, Past Squares, Manage Contacts, and Purchase Options.
Mock data for testing without a database.
A Firestore schema drafted to handle managers, players, contacts, invites, and payouts:contentReference[oaicite:0]{index=0}.

Each time I got stuck — whether it was a linting error, a missing dependency, or “where do we put this string?” — ChatGPT provided not only code fixes but best-practice explanations about why modern apps are structured this way.

🖼️ The Accordion UI: Prompt-Driven Design

One of the most satisfying outcomes was the accordion-driven dashboard.

I suggested:

“Wouldn’t it be better if purchase options were expandable lists, so the UI can scale as we add bundles and sales?”

ChatGPT translated that into React components using Tailwind, complete with nested accordions and purchase dialogs. It wasn’t just code — it was a scalable UI design pattern that will handle future growth without rewrites.

This became a theme: I provided the vision in plain English, ChatGPT provided drop-in file replacements (like full page.tsx files), and together we iterated until it felt right:contentReference[oaicite:1]{index=1}.

📊 Database Schema: Modernizing My 1990s Mindset

Coming from embedded systems, I thought in terms of tables and rows. ChatGPT helped me modernize that thinking into Firestore’s document-oriented design.

We ended up with a schema that balances manager-centric contact lists with player-centric identity:

Managers with contact/payment IDs and their owned Squares.
Players with unique UIDs, multiple emails (primary + alternates), and payment preferences.
Squares with grid mappings, costs, payout %, and invites.
Contacts searchable by prefixes, powered by a helper script.
Invites to reconcile pending and claimed squares, even if emails change:contentReference[oaicite:2]{index=2}.

I learned how modern identity systems use UIDs as the stable key (instead of emails, which can change). ChatGPT explained trade-offs I wouldn’t have thought of on my own.

🛠️ Helpers and Developer Experience

We also built scripts to support real-world development:

Seeder scripts to populate mock data.
Backfill scripts for search indexes.
help.js — a custom CLI helper that documents all npm run scripts and explains why and when to use them:contentReference[oaicite:3]{index=3}.

This last one was a game-changer. Instead of scrolling through package.json or pasting old ChatGPT answers, I can now just run npm run help and get a living developer guide.

⚡ Dealing with Chat Memory Limits

One surprising challenge wasn’t technical at all: ChatGPT’s memory window.

As the project grew, the chat slowed down, and responses became less focused. To solve this, I worked with ChatGPT to:

Create context snapshots (summaries and even scripts like make-ai-context.mjs) to carry between chats.
Save project summaries and architecture notes as Word/Markdown files.
Restart fresh chats without losing continuity:contentReference[oaicite:4]{index=4}.

This process let me keep momentum — even when the conversation hit the AI’s limits.

💡 From Lockheed to Vercel

When I left Lockheed in the ’90s, deploying meant burning code into ROM or distributing binaries. Now, with ChatGPT walking me through, I’m deploying with a couple of clicks on Vercel.

The staging workflow we set up:

GitHub repo connected to Vercel.
.env.staging with Firebase credentials.
Firebase console configured for email-link auth and domain whitelisting.
Automatic redeploys on git push:contentReference[oaicite:5]{index=5}.

The contrast couldn’t be more stark: 3 days to a working web app with global hosting, compared to months of setup in the old world.

🏁 What We’ve Achieved So Far

✅ Mobile-friendly auth and dashboard UIs.

✅ Database schema and helpers.

✅ Mock data + seeding scripts.

✅ Deployment pipeline (GitHub → Vercel → Firebase).

✅ Developer ergonomics (help.js, husky hooks).

✅ A working prototype I can demo to real users — in under a week:contentReference[oaicite:6]{index=6}.