A modern, production-ready React Native template built with Expo Router, Supabase authentication, and OpenAI integration. Features a professional UI built with NativeWind and comprehensive user management.
- Complete Supabase authentication flow (sign up, sign in, sign out)
- Protected routes with Expo Router v6
- User profile management with database persistence
- Row Level Security (RLS) for secure data access
- OpenAI GPT-3.5-turbo integration via Supabase Edge Functions
- Professional AI assistant interface
- Secure API key management through environment variables
- Professional design system with NativeWind (Tailwind CSS for React Native)
- Responsive layouts for mobile and web
- Card-based design patterns
- Consistent typography and spacing
- Custom TouchableOpacity components
- Expo SDK 54 - Latest stable release
- Expo Router v6 - File-based routing with Protected Routes
- Supabase - Backend as a Service with PostgreSQL
- TypeScript - Full type safety
- NativeWind v4 - Tailwind CSS for React Native
src/
├── app/ # Expo Router pages
│ ├── (auth)/ # Authentication screens
│ │ └── index.tsx # Sign in/Sign up
│ ├── (tabs)/ # Main app tabs
│ │ ├── index.tsx # Home screen
│ │ ├── openai.tsx # AI assistant
│ │ └── account.tsx # User profile
│ ├── _layout.tsx # Root layout with auth protection
│ ├── modal.tsx # Modal demo
│ └── +not-found.tsx # 404 page
├── components/ # Reusable UI components
├── constants/ # App constants and themes
└── utils/ # Utility functions
supabase/
├── functions/openai/ # Edge Function for OpenAI integration
├── migrations/ # Database schema migrations
├── config.toml # Supabase configuration
├── .env.local # Local environment variables (not committed)
└── .env.local.example # Example environment file (committed)
# Environment Files
.env # Main environment file (not committed)
.env.example # Example main environment file (committed)
| Category | Technology |
|---|---|
| Framework | Expo SDK 54 + React Native |
| Routing | Expo Router v6 (file-based) |
| Styling | NativeWind v4 (Tailwind CSS) |
| Backend | Supabase (Auth + Database + Functions) |
| Database | PostgreSQL with Row Level Security |
| AI | OpenAI GPT-3.5-turbo |
| Language | TypeScript |
| State | React Context + Hooks |
- Node.js 18+
- Expo CLI:
npm install -g @expo/cli - Supabase CLI: Installation Guide
- OpenAI API Key: Get one here
# Clone the repository
git clone <your-repo-url>
cd gemini-expo-supabase
# Install dependencies
npm install# Start local Supabase
supabase start
# Apply database migrations
supabase db reset# Copy example environment files
cp .env.example .env
cp supabase/.env.local.example supabase/.env.localAdd your OpenAI API key to supabase/.env.local:
OPENAI_API_KEY=sk-your-actual-openai-api-key-hereThe .env file will be automatically populated with local Supabase URLs when you run supabase start.
# Start the OpenAI Edge Function
supabase functions serve openai --env-file supabase/.env.local# Start Expo development server
npm start
# Run on specific platforms
npm run ios # iOS simulator
npm run android # Android emulator
npm run web # Web browserThis project uses environment files to manage configuration:
| File | Purpose | Committed |
|---|---|---|
.env.example |
Example main environment variables | ✅ Yes |
.env |
Actual environment variables (auto-generated) | ❌ No |
supabase/.env.local.example |
Example Supabase Edge Function variables | ✅ Yes |
supabase/.env.local |
Actual Edge Function environment variables | ❌ No |
First-time setup:
# Copy example files
cp .env.example .env
cp supabase/.env.local.example supabase/.env.local
# Edit supabase/.env.local and add your OpenAI API key
OPENAI_API_KEY=sk-your-actual-openai-api-key-hereAfter running supabase start, you'll have:
- API URL:
http://127.0.0.1:54321 - Database:
postgresql://postgres:postgres@127.0.0.1:54322/postgres - Studio:
http://127.0.0.1:54323(Database management UI) - Edge Functions:
http://127.0.0.1:54321/functions/v1/openai
# View database schema
supabase db diff
# Reset database (applies all migrations)
supabase db reset
# Create new migration
supabase migration new <migration_name>
# View database in browser
open http://127.0.0.1:54323# Test the OpenAI function
curl -X POST http://127.0.0.1:54321/functions/v1/openai \
-H "Content-Type: application/json" \
-d '{"message": "Hello, AI!"}'- Welcome message with user info
- Quick action cards for navigation
- Feature overview and checklist
- Professional card-based layout
- Chat interface with OpenAI GPT-3.5-turbo
- Professional messaging UI
- Loading states and error handling
- Copy suggestions and examples
- User profile editing (username, website, full name)
- Avatar URL management
- Account information display
- Secure sign out functionality
- Email/password sign up and sign in
- Form validation and error handling
- Automatic profile creation
- Protected route navigation
- Create a new Supabase project at supabase.com
- Push your schema:
supabase db push - Deploy Edge Functions:
supabase functions deploy openai - Set production secrets:
supabase secrets set OPENAI_API_KEY=your-key
# Build for production
eas build --platform all
# Submit to app stores
eas submit --platform all- DATABASE.md - Database schema and setup
- Expo Router Docs
- Supabase Docs
- NativeWind Docs
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Expo
- Powered by Supabase
- AI by OpenAI
- Styled with NativeWind
Ready to build something amazing? 🚀 This template gives you everything you need for a modern, scalable mobile app with authentication, database, and AI features!