{"@context":"https://ihatereading.in/roadmap/schema/v1","type":"roadmap-chapter","roadmap":{"slug":"vibe-coding-mobile-app-development","title":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents)","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development.json"},"slug":"expo-setup-and-project-structure","title":"Expo Setup & Project Structure","url":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/expo-setup-and-project-structure","machineUrl":"https://ihatereading.in/roadmap/vibe-coding-mobile-app-development/expo-setup-and-project-structure.json","summary":{"breadcrumb":"Vibe Coding Mobile App Roadmap (Expo, Tailwind & AI Agents) → Expo Setup & Project Structure","purpose":"Create an Expo project, run it on a real phone, understand the folder layout, environment variables and the doctor/lint/typecheck loop an agent should follow.","prerequisites":["Mobile App Fundamentals for Vibe Coders"],"afterThisChapter":["UI with Tailwind (NativeWind) & Design Systems"]},"agentLens":null,"topics":[{"id":"create-the-project","slug":"create-the-project","title":"Create the project","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Run `npx create-expo-app@latest` and choose the default template, which comes with TypeScript and Expo Router."],"why":["A predictable structure and verification commands let an agent add features without scattering files or breaking builds."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Run `npx create-expo-app@latest` and choose the default template, which comes with TypeScript and Expo Router. Start the dev server with `npx expo start` and scan the QR code with Expo Go for a first look.","example":null,"mentalModel":"The project folder is a kitchen with labelled shelves: if every tool has a home, the new cook (your agent) can find and return things without asking.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Create the project and when do you use it in a mobile app?"],"practice":["Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done."],"interview":["Why use `npx expo install` instead of `npm install` for native modules?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/get-started/create-a-project/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52","/blogs/i-built-a-saas-starter-kit-so-you-dont-have-to-waste-4-weeks-on-setup"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"folder-layout","slug":"folder-layout","title":"Folder layout","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Routes live in `app/` (file-based), shared UI in `components/`, hooks and services in `lib/` or `hooks/`, static files in `assets/`."],"why":["A predictable structure and verification commands let an agent add features without scattering files or breaking builds."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Routes live in `app/` (file-based), shared UI in `components/`, hooks and services in `lib/` or `hooks/`, static files in `assets/`. A predictable layout lets the agent put new code in the right place.","example":null,"mentalModel":"The project folder is a kitchen with labelled shelves: if every tool has a home, the new cook (your agent) can find and return things without asking.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Folder layout and when do you use it in a mobile app?"],"practice":["Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done."],"interview":["Why use `npx expo install` instead of `npm install` for native modules?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/router/introduction/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52","/blogs/i-built-a-saas-starter-kit-so-you-dont-have-to-waste-4-weeks-on-setup"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"environment-variables","slug":"environment-variables","title":"Environment variables","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Variables prefixed with `EXPO_PUBLIC_` are bundled into the app and readable by anyone who downloads it."],"why":["A predictable structure and verification commands let an agent add features without scattering files or breaking builds."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Variables prefixed with `EXPO_PUBLIC_` are bundled into the app and readable by anyone who downloads it. Use them for public keys such as a Supabase anon key, never for secrets.","example":null,"mentalModel":"The project folder is a kitchen with labelled shelves: if every tool has a home, the new cook (your agent) can find and return things without asking.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Environment variables and when do you use it in a mobile app?"],"practice":["Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done."],"interview":["Why use `npx expo install` instead of `npm install` for native modules?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/guides/environment-variables/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52","/blogs/i-built-a-saas-starter-kit-so-you-dont-have-to-waste-4-weeks-on-setup"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"typescript-lint-and-doctor","slug":"typescript-lint-and-doctor","title":"TypeScript, lint and doctor","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Run `npx tsc --noEmit`, `npx expo lint` and `npx expo-doctor` after agent changes."],"why":["A predictable structure and verification commands let an agent add features without scattering files or breaking builds."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Run `npx tsc --noEmit`, `npx expo lint` and `npx expo-doctor` after agent changes. They catch type errors, style problems and mismatched dependency versions.","example":null,"mentalModel":"The project folder is a kitchen with labelled shelves: if every tool has a home, the new cook (your agent) can find and return things without asking.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is TypeScript, lint and doctor and when do you use it in a mobile app?"],"practice":["Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done."],"interview":["Why use `npx expo install` instead of `npm install` for native modules?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/guides/typescript/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52","/blogs/i-built-a-saas-starter-kit-so-you-dont-have-to-waste-4-weeks-on-setup"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"use-npx-expo-install","slug":"use-npx-expo-install","title":"Use `npx expo install`","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Install native packages with `npx expo install <pkg>` so Expo picks a version compatible with your SDK."],"why":["A predictable structure and verification commands let an agent add features without scattering files or breaking builds."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Install native packages with `npx expo install <pkg>` so Expo picks a version compatible with your SDK. Plain `npm install` can pull a version that crashes at runtime.","example":null,"mentalModel":"The project folder is a kitchen with labelled shelves: if every tool has a home, the new cook (your agent) can find and return things without asking.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Use `npx expo install` and when do you use it in a mobile app?"],"practice":["Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done."],"interview":["Why use `npx expo install` instead of `npm install` for native modules?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52","/blogs/i-built-a-saas-starter-kit-so-you-dont-have-to-waste-4-weeks-on-setup"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]},{"id":"git-from-minute-one","slug":"git-from-minute-one","title":"Git from minute one","level":"beginner","category":null,"importance":null,"difficulty":"beginner","learn":["Initialise git, ignore `.env` files and build folders, and commit after the project first runs."],"why":["A predictable structure and verification commands let an agent add features without scattering files or breaking builds."],"prerequisites":[],"nextTopics":[],"relatedTopics":[],"usedIn":[],"understand":{"summary":"Initialise git, ignore `.env` files and build folders, and commit after the project first runs. This is your first save point.","example":null,"mentalModel":"The project folder is a kitchen with labelled shelves: if every tool has a home, the new cook (your agent) can find and return things without asking.","howItWorks":null,"underTheHood":null,"misconceptions":[]},"questions":{"learning":["What is Git from minute one and when do you use it in a mobile app?"],"practice":["Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done."],"interview":["Why use `npx expo install` instead of `npm install` for native modules?"],"advanced":[],"debugging":[],"comparison":[]},"projects":{"beginner":"Create a project, add a `lib/` folder and an `AGENTS.md` that lists the four commands, then ask your agent to add a Home tab and run all four commands before reporting done.","intermediate":null,"advanced":null},"commonMistakes":[],"bestPractices":[],"debug":null,"compare":[],"resources":{"official":["https://docs.expo.dev/"],"tutorials":[],"videos":[],"websites":[],"youtube":[],"ihateReading":["/blogs/expo-new-version-sdk-52","/blogs/i-built-a-saas-starter-kit-so-you-dont-have-to-waste-4-weeks-on-setup"]},"agentLens":null,"skipIf":null,"build":null,"next":[],"prerequisite":[]}],"updatedAt":"2026-10-23T06:02:26.535Z"}