From Bolt.new to Production: How I built a React Native app using Copilot and MCP.

#tooling #showdev #reactnative #ai

When my son was born, my life changed completely. Like any new parent, we needed a way to track sleep, feeding, and diapers. There are a million apps for this, but I wanted something ours. Private, simple, and tailored exactly to what my wife and I needed.

But more than that, I made a challenge to myself: Can I build a full-stack mobile app solo, using all these new AI tools?

I decided to "vibe code" it. No big team, no over-engineering—just me, AI, and a goal.

Here is the story of how I built Zaspa.

The "Magic" Start

I’m a developer, not a designer. Usually, this is where I get stuck. But this time, I leaned heavily on AI.

I started with Bolt.new to generate the initial MVP. It was honestly mind-blowing. It didn't just give me code; it generated the entire design system and the initial screens. I had a working visual prototype almost instantly.

For the splash screens and icons, I didn't hire anyone. I ran Flux (an image generation model) locally on my machine and used ChatGPT to refine the prompts. The result was professional-looking assets for $0.

My wife and I sat down with a simple piece of paper. We listed exactly what features we needed. No Jira, no backlog—just a list on the kitchen table.

The Stack & The Workflow

I went with a stack I could control fully (self-hosted):

Mobile: React Native (Expo)
Backend: Fastify + MongoDB
Web (Landing + Admin): React + Vite
Repo: GitHub

I started coding exclusively with Cursor. It was great... until it wasn't. I burned through my fast tokens incredibly quickly. So, I switched to VS Code + GitHub Copilot. And honestly? It surprised me.

Copilot is powerful, but it can write messy code if you let it. I realized I needed to "manage" it like a junior dev.

Context became king. I created a .github/copilot-instructions.md file to describe the project structure and enforce rules like DRY and SOLID principles. I also added specific Frontend Instructions to enforce component structure (e.g., "Always use SCSS modules for layout and sx prop for dynamic styles").

Custom "Chat Modes" (Prompts)

Instead of typing the same requirements every time, I created reusable prompts that act as "modes" for the AI. I keep these stored in my MCP tool to call them instantly:

Refactoring Mode: "Scan for duplication. Extract logic to custom hooks. Ensure design consistency. DO NOT change functionality."
Frontend Mode: "You are a Senior React Native Dev. Use functional components, strict TypeScript, and our specific folder structure."
Testing Mode: "Write unit tests for this component using Jest. Cover edge cases first."

(I wrote a detailed guide on this workflow here).

This simple system saved me from the "spaghetti code" that AI often generates after a few hours of coding.

Where it got real (The Roadblocks)

It wasn't all smooth sailing. I hit two major walls.

The Firebase Nightmare
I wanted push notifications and analytics, so I reached for the standard: Firebase. Big mistake. Integrating Firebase with React Native was a dependency hell. Version conflicts everywhere. I spent days fighting build errors instead of coding.

So I ditched it. I switched to Expo Push Services which just works. For analytics, I wrote my own lightweight JS logic to send simple events (install, screen view) to my Fastify backend. I built a custom Admin Dashboard to show daily/weekly stats. Now I own my data, and the app is lighter.

Localization Hell
My wife and I speak different languages. We understand each other, but for the app, multi-language support was non-negotiable.

At first, I just hardcoded JSON files. But as I refactored the code (thanks to my "Refactoring Mode"), the localization files became a mess. Huge JSON files, hundreds of "orphan" keys for buttons I deleted weeks ago, and duplicates like button.save, common.save, actions.save.

I was spending more time managing en.json than playing with my son.

The Fix (and how I accidentally built a startup)
I couldn't find a tool that worked inside my IDE properly, so I built one. I created goman.live, an MCP server that integrates directly with Cursor/Copilot.

Instead of editing JSON, I just tell the AI: "Add a translation for this button."
The agent:

Checks if the key exists (deduplication).
Adds translations for all languages automatically.
Audits the files for unused keys.

It started as a script for Zaspa, but it worked so well I released it. It turned a headache into a background task.

Launch & Reality

I didn't do a big Product Hunt launch. I just wrote a few posts on Reddit and shared it in local Telegram channels for parents.

Currently, we have about 20-30 organic installs per month. But most importantly, it's used daily by my family.

Building Zaspa proved to me that one person can build a complex, full-stack product if they use AI correctly. But you can't trust AI blindly—you need to guide it with context and strict rules. And don't over-engineer early; sometimes a custom solution is faster than fighting with a massive library like Firebase.