From Wireframes to 40-Screen React Native App (PAHCHAAN)

Starting With the Problem, Not the Stack

For PAHCHAAN, the requirement was: “a 40-screen app with offline + online sync using Firebase”. Before writing a single line of code, I needed clarity on:

• Core user journeys
• Offline constraints
• Data model in Firestore

Step 1 — Wireframes in Figma

• Map every screen and state (loading, empty, error)
• Validate flows with the client before development
• Identify reusable patterns: list + detail, wizards, forms

Step 2 — Project Architecture

• React Native + TypeScript
• React Navigation for stacks/tabs
• Firebase Auth + Firestore
• Local cache with offline persistence

Step 3 — Implementation Rhythm

I like to ship in vertical slices:

• 1–2 screens fully done (UI + data + navigation)
• Get feedback
• Expand the pattern to similar screens

Step 4 — Offline Testing

• Force airplane mode
• Simulate flaky connections
• Resolve merge conflicts in Firestore rules + app logic

Lessons Learned

• Don’t underestimate UX flows around sync and conflict resolution
• Design your Firestore structure before you start coding screens