Skip to main content

​
⚡ Quickstart for Vibecoders

This guide is for developers who want to start building immediately with AI assistance. No backend setup required!
What is vibecoding? Vibecoding is building apps by describing features to AI (like Claude or Cursor) instead of manually writing boilerplate. Shipnative is optimized for this workflow with pre-built components, mock services, and AI-friendly context files.

​
🚀 Get Started (2 Minutes)

​
Step 1: Clone & Install

git clone https://github.com/shipnativeapp/shipnative.git
cd shipnative
yarn install

​
Step 2: Run the App

cd apps/app
yarn ios        # For iOS
yarn android    # For Android
That’s it! The app is now running with mock services (simulated backend).
Before Production: You MUST complete these steps:
  1. Generate Android release keystore (see README.md)
  2. Configure bundle identifiers in app.json
  3. Set up Supabase (minimum required for production)
  4. Configure certificate pinning (security)
See the README.md for production requirements.
No API keys needed! Shipnative automatically uses mock authentication, payments, analytics, and database when you don’t have API keys configured. This means you can build your entire frontend without setting up external services.

​
🎨 What You Get Out of the Box

When you open the app, you’ll see:
  • Login/Signup screens - Fully functional with mock auth
  • Home screen - Example of a main app screen
  • Settings screen - User profile and preferences
  • Subscription screen - Working paywall with mock payments
  • Dev Menu - Press Cmd+D (iOS) or Cmd+M (Android) to access developer tools

​
🤖 Start Vibecoding

Now you can start building your app with AI! Open your project in your favorite AI-powered code editor:

​
The Golden Prompt

Use this prompt to get started: 
Read the .cursorrules file and the vibe/ folder.
I want to build a [describe your app].
Start by outlining the database schema changes I need.
Example: 
Read the .cursorrules file and the vibe/ folder.
I want to build a fitness tracking app where users can log workouts,
track progress, and share achievements with friends.
Start by outlining the database schema changes I need.
The AI will:
  1. Read .cursorrules and vibe/ folder to understand your project structure
  2. Suggest database schema changes for your app
  3. Help you build features using existing components and patterns
  4. Generate code that follows Shipnative’s Unistyles styling conventions

​
💡 Example Features to Build

Here are some simple features to try with AI assistance: 
Add a profile screen where users can:
- View their profile picture and name
- Edit their bio and location
- Update their avatar by uploading a photo
Use existing components from the app.

Create a social feed screen where users can:
- See a list of posts from other users
- Like and comment on posts
- Pull to refresh for new content
Use Supabase for the database and follow the existing patterns.

Add a settings screen with:
- Toggle for push notifications
- Dark mode toggle
- Language selector
- Logout button
Use the existing SettingsScreen as a reference.

Create a dashboard screen with:
- Key metrics cards (users, revenue, etc.)
- A chart showing growth over time
- List of recent activity
Use the existing Card component and follow the grid layout patterns.

​
📁 Key Files to Know

The AI will work with these files, but here’s a quick overview:
File/FolderPurpose
apps/app/app/Your main app code
apps/app/app/screens/Screen components
apps/app/app/components/Pre-built UI components (Button, Card, TextField, etc.)
apps/app/app/navigators/React Navigation setup
apps/app/app/stores/Global state with Zustand (auth, subscriptions)
apps/app/app/services/External services (Supabase, RevenueCat, PostHog)
apps/app/app/theme/Unistyles theme configuration
apps/app/vibe/App-specific AI context (CONTEXT.md, TECH_STACK.md, STYLE_GUIDE.md)
vibe/ (root)Project-wide context (SERVICES.md, MOCK_SERVICES.md)
.cursorrulesRules for AI to follow when generating code
Don’t worry about memorizing this! The AI assistant will read these files automatically when you use the golden prompt. There are TWO vibe folders - one for app-specific context and one for project-wide infrastructure.

​
🧪 Testing Your Changes

As you build features:
  1. Hot reload - Changes appear instantly (if it stops working, shake your device and select “Reload”)
  2. Dev Menu - Press Cmd+D (iOS) or Cmd+M (Android) to:
    • View component showroom
    • Toggle between logged out / free user / pro user
    • Switch between light/dark mode
    • See service status (which services are mocked)
  3. Mock Auth Playground - Use the dev menu to quickly test different user states without logging in/out

​
✅ Next Steps

Understand Mock Services

Learn how mock auth, payments, and analytics work

Explore Components

See all available pre-built UI components

Configure Real Services

When you’re ready to deploy, set up real API keys

Deploy Your App

Ship your app to the App Store and Google Play

​
🆘 Common Questions

Only when you’re ready to test with real data or deploy. You can build 90% of your app with mock services. Add real API keys when:
  • Testing end-to-end flows before launch
  • Deploying to TestFlight/Google Play Beta
  • Going live in production
Yes! Mock services are in apps/app/app/services/mocks/. You can edit them to return custom data, add more users, create test scenarios, etc.
Make sure to include “Read the .cursorrules and vibe/ folder” in your prompt. If the AI still doesn’t follow patterns, try:
  • Pointing to an existing file: “Use apps/app/app/screens/HomeScreen.tsx as a reference”
  • Being more specific: “Use Unistyles for styling, not StyleSheet.create”
  • Asking it to refactor: “This doesn’t follow the patterns. Please refactor using Unistyles.”
Open the Dev Menu (Cmd+D on iOS, Cmd+M on Android) and check “Service Status”. You’ll see which services are using mocks.
Pro tip: Start with small features to get comfortable with the workflow. Once you understand how AI uses the existing patterns, you can tackle more complex features with confidence!