From Idea to App Store in 3 Days
From Idea to App Store in 3 Days
How I built Friends Vibe — a friendship closeness tracker — using AI-powered development across Google Anti Gravity, Gemini, and Claude Code. No traditional dev cycle. No months of sprints. Three days, start to finish.
The Short Version
Friends Vibe is a friendship closeness tracker that decays your connection score by 1.11% per day — reaching zero if you don't reach out within 90 days. I took it from a rough idea to a fully submitted App Store app using AI tools end-to-end: Google Anti Gravity for product thinking and PRD development, Gemini for mock screen design, and Claude Code for the entire engineering pipeline — code generation, testing, debugging, and deployment.
The app is now live on iOS via the Apple App Store — built in just 3 days.
The Spark: Why Friendships Need a Metric
We all have people we mean to call. People we think about on a Tuesday morning but never quite get around to reaching out to. Before you know it, months pass and the connection quietly fades. I wanted to build something that made this invisible decay visible — a live vibrancy score that drops every single day you don't reach out, and snaps back the moment you do.
The idea was simple: 100% if you talked today, 0% if 90 days have passed. A linear decay of 1.11% per day. Brutal, honest, and designed to make you actually pick up the phone.
What wasn't simple was turning this idea into a real product. Traditionally, that means weeks of wireframing, sprint planning, code reviews, QA cycles, and deployment headaches. Instead, I ran the entire pipeline through AI — from product thinking to App Store submission — across three tools, each doing what they do best.
The Power of Context Windows
The core insight behind this entire build is that modern AI context windows have become large enough to hold an entire product's worth of thinking. Not just a single code file or a prompt-response pair — but the full arc from concept to PRD to mocks to code to deployment.
Each tool I used maintained a persistent context that accumulated knowledge across iterations. When I refined the PRD, the AI remembered the earlier version and understood why I was changing it. When I flagged gaps in the mocks, it knew the original design intent. When the EAS build failed, it had the full history of every configuration decision that led to that point.
This isn't just "asking AI for help." It's pair-building an entire product inside a conversation — where the conversation is the development environment.
Phase 1: Product Thinking with Google Anti Gravity
The first phase happened entirely inside Google Anti Gravity. Anti Gravity became my product manager, my design partner, and my first critic.
PRD Development Through Iteration
I started with a rough description of what I wanted — a friend tracker with a decay mechanic. Anti Gravity helped me shape that into a proper Product Requirements Document. But the critical part wasn't the first draft. It was the iteration loop:
The PRD went through multiple rounds of review and refinement inside Anti Gravity's context window. Each pass tightened the scope, clarified edge cases, and challenged assumptions. "What happens when vibrancy hits zero? Does the friend disappear or just fade?" "Should the decay be linear or exponential?" "Is 90 days the right window, or should it be configurable?"
By the end of this phase, I had a battle-tested PRD with clear data models, a defined vibrancy formula, and a feature list prioritised into sprints.
Sprint Planning
The work was broken down into discrete sprints within the PRD — each sprint scoped to a logical unit of functionality. This meant that when the code generation phase started, there was a clear, ordered backlog to work through rather than an amorphous "build the app" instruction.
Key takeaway: AI isn't just a code generator. Used upstream — in the product thinking phase — it's a surprisingly effective sparring partner for scope definition, edge case discovery, and requirement refinement. The quality of the code later is directly proportional to the quality of the PRD.
Phase 2: Mock Screens with Gemini
With the PRD locked, the next step was visual design. Gemini generated the mock screens — the dashboard layout, the friend detail view, the interaction logging modals, and the analytics page.
The mocks went through their own approval cycle. Each screen was reviewed against the PRD, and discrepancies were caught and corrected before any code was written. The dashboard mock established the three-column grid with gradient friend cards and a search bar. The friend detail mock introduced the semicircle gauge vibrancy meter (a dial, not a circular arc — a deliberate design choice that gave the app its distinctive character). The interaction log mock defined the four touchpoint types: Texted, Called, Met Up, Other.
These mocks became the source of truth for the next phase. When gaps appeared between the mocks and the generated code, they were caught and resolved systematically — which brings us to the build.
Phase 3: Code Generation with Claude Code
This is where the heaviest lifting happened. Claude Code took the PRD and mock screens and turned them into working software — first as a React web app, then as a full React Native iOS app.
Web App: Closing the Gaps
The initial web app scaffold existed from an earlier session. Claude Code analysed the mocks against the existing codebase and identified six key gaps — missing sidebar navigation, no search bar, basic interaction logging, wrong gauge style, no card colour gradients, and no social media links. It then systematically closed every gap, building new components and modifying existing ones until the web app matched the mocks exactly.
Log Interaction Modal
Replaced the basic text input with a rich modal featuring interaction type buttons, star closeness rating, date picker, and notes textarea.
Sidebar + Search
Added a left sidebar with icon navigation and a live search bar that filters friends by name in real time.
GaugeMeter + Card Gradients
Replaced the circular arc with a semicircle dial gauge. Added unique colour themes per friend card based on ID hash.
Analytics Page
Full analytics dashboard with vibrancy rankings, star distribution charts, and a "Needs Attention" section for friends going cold.
Testing with AI Agents
The generated code wasn't just shipped blindly. Testing agents within Anti Gravity were used to verify the functionality — checking component behaviour, validating the vibrancy decay logic, and catching edge cases. The build was verified to compile cleanly after each change, and integration testing happened within the same conversational context.
The QuickLog Brainstorm
One of the most interesting moments in the build was a genuine design brainstorm — not just code generation. The existing "Log Touchpoint" button on each friend card was too blunt: one tap, no context, always today's date. Five design options were proposed and evaluated — from a simple modal reuse to an inline card expansion. We settled on Option C: a lightweight 2-step mini modal that asks how you connected (Texted / Called / Met Up / Other), then optionally lets you add a date and a short note.
Mock screens were generated, reviewed, and approved before any code was written — the same PRD-first discipline applied to a micro-feature.
Phase 4: Going Native with Expo + React Native
The web app worked. But a friendship tracker lives on your phone, not in a browser tab. The decision was made to port the entire app to React Native using Expo — the recommended path for the best native feel and a clean App Store submission pipeline.
Claude Code rewrote the UI layer entirely — every JSX component became React Native StyleSheet, every CSS property became a native equivalent. But the business logic transferred cleanly: the vibrancy calculation, the data model, the interaction logging, and the storage patterns all remained the same. AsyncStorage replaced localStorage. Haptic feedback was added to every key interaction. Linking.openURL made social buttons open WhatsApp, LinkedIn, email, and phone natively.
The native app was running on an iPhone 14 via Expo Go within the same day.
SDK version alignment was the biggest friction point. Expo Go on the App Store was SDK 54, but the project scaffolded on SDK 55. Then downgraded to SDK 52. Then upgraded back to 54. Three version changes to find the match. This is the kind of yak-shaving that AI handles well — it's tedious, it's well-documented, and it requires patience, not creativity.
Phase 5: App Store Submission
The final phase was the most bureaucratic — and arguably where AI assistance was most valuable, because it involved navigating a maze of Apple's requirements, credentials, and configurations.
The credentials alone involved four different authentication methods before one worked. This is exactly the kind of problem where having an AI that remembers every failed attempt and can instantly suggest the next approach saves hours of frustrated Googling.
What I Learned
Each AI Tool Has a Sweet Spot
Google Anti Gravity excelled at upstream product thinking — PRD creation, requirement refinement, sprint planning, and testing. It's a thinking tool, not a building tool. Gemini handled visual design and mock generation. Claude Code was the engineering workhorse — code generation, debugging, deployment configuration, and the entire App Store submission pipeline.
Using all three in sequence — product thinking → visual design → engineering — meant each tool operated in its zone of strength. No single tool could have done the whole thing well.
Context Windows Are the New IDE
The most profound shift isn't code generation. It's that the context window became the development environment. The PRD, the mocks, the codebase, the build errors, the Apple configuration — all lived inside a continuous conversation. There was no context-switching between tools, no copying error messages into Stack Overflow, no searching documentation. The AI held the full state of the project and reasoned about it end-to-end.
The Hard Parts Are Still Hard
AI didn't eliminate friction — it relocated it. The vibrancy calculation was trivial. The UI components were fast. But Apple's credential system, Expo SDK version alignment, and peer dependency conflicts consumed significant time. These are integration problems at the seams between systems, and they require patience and systematic debugging — which AI handles well, but they're still slow.
Ship Fast, Fix Later Is Now Ship Fast, Fix Now
When a build fails and the AI can read the error, understand the cause, generate the fix, and re-trigger the build in 30 seconds, the cost of failure drops to near zero. This changes the calculus entirely. You don't need to be cautious — you can be aggressive, try things, and recover instantly.
The Stack
Web: React + Vite, localStorage, CSS with glassmorphic dark theme (Outfit font, CSS variables)
Native: React Native + Expo SDK 54, expo-router v6, AsyncStorage, react-native-svg, Haptics, Linking
AI Pipeline: Google Anti Gravity (PRD + testing) → Gemini (mocks) → Claude Code (engineering + deployment)
Repos: Web App · Native App
What's Next
The app is live on the App Store. The next features on the roadmap are push notifications (reminding you when friends are going cold), iOS Contacts integration (import friends from your phone), iCloud sync (data across devices), and a home screen widget showing your top friends' vibrancy scores.
But honestly? The most interesting thing isn't the app — it's the workflow. Building a product end-to-end inside AI context windows, from concept to App Store, changes how I think about what a solo developer can ship. The ceiling just got a lot higher.
Comments
Post a Comment