Part 2: The 7-Day Launch Roadmap

npx create-expo-app@latest my-app
cd my-app
npx expo install expo-router

CONVEX_URL=https://xxxxx.convex.co
CONVEX_AUTH_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

import { ConvexReactClient } from 'convex/react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const convex = createClient(
  process.env.CONVEX_URL!,
  process.env.CONVEX_AUTH_TOKEN!,
  {
    auth: {
      storage: AsyncStorage,
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: false,
    },
  }
);

export const colors = {
  light: {
    primary: '#7C3AED',
    background: '#FFFFFF',
    surface: '#F9FAFB',
    text: '#111827',
    textSecondary: '#6B7280',
    border: '#E5E7EB',
    error: '#EF4444',
    success: '#22C55E',
  },
  dark: {
    primary: '#A78BFA',
    background: '#111827',
    surface: '#1F2937',
    text: '#F9FAFB',
    textSecondary: '#9CA3AF',
    border: '#374151',
    error: '#F87171',
    success: '#4ADE80',
  },
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'outline';
  loading?: boolean;
  disabled?: boolean;
}

export function Button({
  title,
  onPress,
  variant = 'primary',
  loading,
  disabled
}: ButtonProps) {
  return (
    <TouchableOpacity
      style={[styles.base, styles[variant], disabled && styles.disabled]}
      onPress={onPress}
      disabled={disabled || loading}
    >
      {loading ? (
        <ActivityIndicator color="#fff" />
      ) : (
        <Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
      )}
    </TouchableOpacity>
  );
}

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { convex } from '@/lib/convex';

interface AuthState {
  user: User | null;
  session: Session | null;
  isLoading: boolean;
  signIn: (email: string, password: string) => Promise<void>;
  signUp: (email: string, password: string) => Promise<void>;
  signOut: () => Promise<void>;
  initialize: () => Promise<void>;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      session: null,
      isLoading: true,

      initialize: async () => {
        const { data: { session } } = await convex.auth.getSession();
        set({
          session,
          user: session?.user ?? null,
          isLoading: false,
        });

        convex.auth.onAuthStateChange((_event, session) => {
          set({ session, user: session?.user ?? null });
        });
      },

      signIn: async (email, password) => {
        const { error } = await convex.auth.signInWithPassword({
          email,
          password,
        });
        if (error) throw error;
      },

      signUp: async (email, password) => {
        const { error } = await convex.auth.signUp({
          email,
          password,
        });
        if (error) throw error;
      },

      signOut: async () => {
        await convex.auth.signOut();
        set({ user: null, session: null });
      },
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

-- Example: AI generations table
CREATE TABLE generations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id),
  prompt TEXT NOT NULL,
  result_url TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Enable document-level access control
ALTER TABLE generations ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own data"
ON generations FOR SELECT
USING (auth.uid() = user_id);

npx expo install react-native-purchases

import { useState, useEffect } from 'react';
import { View, Text, Alert, ScrollView } from 'react-native';
import Purchases, { PurchasesPackage } from 'react-native-purchases';
import { router } from 'expo-router';
import { Button } from '@/components/ui/Button';

export default function PaywallScreen() {
  const [packages, setPackages] = useState<PurchasesPackage[]>([]);
  const [selectedPackage, setSelectedPackage] = useState<PurchasesPackage | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadOfferings();
  }, []);

  const loadOfferings = async () => {
    const offerings = await Purchases.getOfferings();
    if (offerings.current?.availablePackages) {
      setPackages(offerings.current.availablePackages);
      const yearly = offerings.current.availablePackages.find(
        p => p.packageType === 'ANNUAL'
      );
      setSelectedPackage(yearly || offerings.current.availablePackages[0]);
    }
  };

  const handlePurchase = async () => {
    if (!selectedPackage) return;
    try {
      setLoading(true);
      const { customerInfo } = await Purchases.purchasePackage(selectedPackage);
      if (customerInfo.entitlements.active['pro']) {
        Alert.alert('Success!', 'Welcome to Pro!');
        router.back();
      }
    } catch (error) {
      if (!error.userCancelled) {
        Alert.alert('Error', error.message);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <ScrollView>
      <Text>Upgrade to Pro</Text>
      {/* Package selection UI */}
      <Button
        title={`Subscribe ${selectedPackage?.product.priceString || ''}`}
        onPress={handlePurchase}
        loading={loading}
      />
    </ScrollView>
  );
}

# Install EAS CLI
npm install -g eas-cli

# Configure
eas build:configure

# Build for both platforms
eas build --platform all --profile production

# Submit to stores
eas submit --platform ios
eas submit --platform android