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

About this journey

I’m a former embedded coder who left Lockheed in the mid-1990s and haven’t seriously coded since. Beyond reading about today’s platforms, I came into this project knowing nothing about React, Next.js, Firebase, Vercel, or modern web app infrastructure. My goal is to have ChatGPT handle 99% of the coding while I guide the design, test the app, and provide feedback. What you’re reading is a day-by-day journal of building “Squares” — a commercial-ready sports squares app — with AI as my development partner.

Day 6: Wrestling with Vercel Deployments and Resetting to a Clean Build

If Days 4–5 were about code quality and TypeScript discipline, Day 6 was about facing the realities of deployment. The goal was simple: get a successful build running in Vercel and make sure the app could be accessed in a browser. The reality? A full day of chasing build errors, learning how Vercel interprets commits, and finally rolling back to a known good state.

Key Focus Areas

Stripe build errors: Vercel repeatedly failed with Module not found: Can't resolve 'stripe' despite the dependency being present. We experimented with postinstall checks, dynamic imports, and package.json cleanup. In the end, these fixes were less important than realizing we had drifted into a messy state with too many half-fixes.
Error boundaries: Along the way, new errors cropped up around Next.js error pages (/404, /500) involving hooks like useContext. Some of these were introduced while debugging Stripe, highlighting how easy it is to destabilize an otherwise clean build.
Git strategy: The breakthrough came from stepping back and treating Git as a safety net. I created “rescue” branches, inspected commit history, and eventually rolled main back to a known clean build commit (dddc1ae). Using GitHub Desktop’s Force Push Origin, I reset remote main to the working state and re-aligned Vercel with that baseline.
Vercel settings: Verified build settings (npm ci for install, next build for build, Node 22.x) and used Clear build cache to avoid stale state. The preview deployment of the clean commit built flawlessly and was promoted to production.

Workflow Lessons

Today was less about code and more about process:

Keep commits clean and frequent. If I had checkpointed before diving into Stripe debugging, rolling back would have been even easier.
Understand how Vercel ties deployments to Git commits. “Redeploy” builds the same commit; if that commit is bad, only a reset or new commit will fix it.
Use force push with care. It’s not something you do lightly, but when you know exactly which commit is good, it’s the fastest way to reset the project’s source of truth.

Reflections from Day 6

This was a frustrating but ultimately empowering day. The Stripe build errors consumed hours, but the real win was learning to manage Git branches, commits, and force pushes in a way that gave me back control. By evening, I had the app cleanly deployed on Vercel and accessible in a browser — a milestone worth celebrating.

More importantly, I realized this: not every problem is solved by more code. Sometimes the smartest move is to stop, roll back, and protect the integrity of the project. That’s a lesson both in software engineering and in working with AI partners.

✅ Next steps: With the clean build now live on Vercel, the focus shifts to testing access from a web browser and validating end-to-end flows (auth, Firebase, Stripe stubs). Once stable, I’ll circle back to payments and subscriptions with a fresh perspective.