VibeBuilder - AI-Powered React Native App Builder

VibeBuilder is a complete React Native application that allows users to build other React Native apps using AI. Users can describe their app ideas in natural language, select from pre-built templates, remix existing apps, and automatically deploy them to GitHub.

Features

Core Features

• AI App Generation: Natural language input to generate complete React Native apps
• Template Gallery: Browse and customize pre-built app templates across multiple categories
• Remix Feature: Clone and customize existing templates with AI assistance
• GitHub Integration: Automatic repository creation and code deployment
• Real-time Preview: Phone mockup showing generated app interface
• App Management: Dashboard to view, edit, and manage all created apps
• Dark/Light Theme: System-aware theme with manual toggle support

Technical Features

• TypeScript: Full type safety across the entire codebase
• State Management: Zustand for efficient global state
• Secure Storage: Encrypted storage for sensitive data (tokens, credentials)
• Navigation: React Navigation v7 with native stack and bottom tabs
• Input Validation: Comprehensive validation and sanitization
• Error Handling: Robust error boundaries and user-friendly error messages
• Code Generation: Dynamic React Native/Expo code generation system
• Mock AI: Functional mock AI responses for development (integrate real AI in production)

Technology Stack

• React Native: 0.81.5
• Expo: ~52.0.0
• TypeScript: ~5.9.2
• Navigation: @react-navigation/native ^7.0
• State Management: Zustand ^5.0
• GitHub API: @octokit/rest ^22.0
• Secure Storage: expo-secure-store ^15.0
• AsyncStorage: @react-native-async-storage/async-storage ^2.2

Project Structure

VibeBuilderApp/
├── src/
│   ├── components/           # Reusable UI components
│   │   ├── common/          # Common components (Button, Card, Input, etc.)
│   │   ├── templates/       # Template-specific components
│   │   ├── apps/           # App-specific components
│   │   └── preview/        # Preview/mockup components
│   │
│   ├── screens/             # Screen components
│   │   ├── AuthScreen.tsx
│   │   ├── HomeScreen.tsx
│   │   ├── TemplatesScreen.tsx
│   │   ├── MyAppsScreen.tsx
│   │   ├── SettingsScreen.tsx
│   │   ├── AppDetailScreen.tsx
│   │   └── TemplateDetailScreen.tsx
│   │
│   ├── navigation/          # Navigation configuration
│   │   └── AppNavigator.tsx
│   │
│   ├── services/            # Service layer
│   │   ├── ai/             # AI generation service
│   │   ├── github/         # GitHub API integration
│   │   ├── storage/        # Secure storage service
│   │   └── api/            # API clients and data
│   │
│   ├── store/               # Zustand state management
│   │   ├── authStore.ts
│   │   ├── appStore.ts
│   │   └── uiStore.ts
│   │
│   ├── hooks/               # Custom React hooks
│   │   ├── useTheme.ts
│   │   └── useAppGeneration.ts
│   │
│   ├── types/               # TypeScript type definitions
│   │   └── index.ts
│   │
│   ├── constants/           # App constants
│   │   └── index.ts
│   │
│   ├── utils/               # Utility functions
│   │   ├── validation.ts
│   │   └── helpers.ts
│   │
│   └── config/              # Configuration files
│
├── assets/                  # Static assets
├── App.tsx                  # Root component
├── app.json                 # Expo configuration
├── package.json             # Dependencies
├── tsconfig.json           # TypeScript configuration
└── README.md               # This file

Getting Started

Prerequisites

• Node.js 18+ and npm
• Expo CLI: npm install -g expo-cli
• iOS Simulator (Mac only) or Android Emulator
• GitHub account (for repository integration)

Installation

1. Clone the repository:

git clone <repository-url>
cd VibeBuilderApp

2. Install dependencies:

npm install

3. Set up environment variables (create .env file):

EXPO_PUBLIC_GITHUB_ORG=your-github-org-name
EXPO_PUBLIC_GITHUB_CLIENT_ID=your-github-oauth-client-id

4. Start the development server:

npm start

5. Run on your platform:

# iOS
npm run ios

# Android
npm run android

# Web
npm run web

Usage

Creating an App

1. Navigate to Home/Create Tab: Tap the "Create" tab (✨ icon)
2. Describe Your App: Enter a detailed description of the app you want to build
3. Select Category: Choose the appropriate category (Social, E-commerce, Fitness, etc.)
4. Generate: Tap "Generate App" and wait for AI to create your app
5. View & Manage: Your new app appears in the "My Apps" tab

Using Templates

1. Browse Templates: Navigate to the "Templates" tab (📱 icon)
2. Filter by Category: Use category filters to find specific app types
3. View Details: Tap any template to see features, screenshots, and details
4. Quick Use: Tap "Use This Template" to create an exact copy
5. Customize: Tap "Customize Template" to add your own modifications

Remixing Apps

1. Select a Template: Choose any template from the gallery
2. Customize: Add a description of how you want to modify it
3. Create: AI generates a customized version based on your input
4. Deploy: Optionally push to GitHub (if connected)

GitHub Integration

1. Navigate to Settings: Tap the Settings tab (⚙️ icon)
2. Connect GitHub: Tap "Connect" under Integrations
3. Authorize: Complete GitHub OAuth flow
4. Auto-Deploy: All future apps will automatically create repos and commit code

Configuration

GitHub Organization Setup

1. Create a GitHub organization for storing generated apps
2. Create a GitHub OAuth app:
   • Go to GitHub Settings > Developer Settings > OAuth Apps
   • Set Authorization callback URL to your app's redirect URI
   • Copy Client ID to environment variables

Customizing Templates

Edit /src/services/api/templateData.ts to add or modify templates:

{
  id: 'template-custom-1',
  name: 'My Custom Template',
  description: 'Description of the template',
  category: 'productivity',
  tags: ['custom', 'productivity'],
  thumbnail: 'https://...',
  features: ['Feature 1', 'Feature 2'],
  // ... more configuration
}

Architecture

State Management

The app uses Zustand for state management with three main stores:

• authStore: User authentication and session management
• appStore: Generated apps and templates
• uiStore: UI state (theme, toasts, modals)

Security

• Secure Storage: All sensitive data (tokens, credentials) stored with expo-secure-store
• Input Validation: All user inputs validated and sanitized
• GitHub Tokens: Encrypted storage, never exposed in logs
• Type Safety: Strict TypeScript for compile-time safety

AI Integration

The current implementation includes a mock AI service in /src/services/ai/aiService.ts. To integrate a real AI:

1. Replace mock responses with actual API calls
2. Implement proper prompt engineering
3. Add rate limiting and error handling
4. Update generateApp() and enhanceApp() methods

Example integration:

async generateApp(request: AIGenerationRequest): Promise<AIGenerationResponse> {
  const response = await fetch('YOUR_AI_API_ENDPOINT', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });

  return response.json();
}

Development

Available Scripts

# Start development server
npm start

# Run on iOS
npm run ios

# Run on Android
npm run android

# Run on web
npm run web

# Type checking
npm run type-check

# Linting
npm run lint

# Format code
npm run format

Adding New Features

1. Create types in /src/types/index.ts
2. Add service layer in /src/services/
3. Create components in /src/components/
4. Build screens in /src/screens/
5. Update navigation in /src/navigation/
6. Add to store if needed in /src/store/

Code Style

• Use TypeScript strict mode
• Follow ESLint configuration
• Use Prettier for formatting
• Write self-documenting code
• Add JSDoc comments for complex functions

Testing

Manual Testing Checklist

• User can register and login
• User can generate an app from a prompt
• User can browse templates
• User can remix a template
• User can view app details
• User can delete apps
• GitHub integration works
• Theme toggle works
• App persists data after restart

Future Testing

Add automated tests using:

• Jest for unit tests
• React Native Testing Library for component tests
• Detox for E2E tests

Deployment

Building for Production

1. Configure EAS Build:

npm install -g eas-cli
eas build:configure

2. Build iOS:

eas build --platform ios

3. Build Android:

eas build --platform android

4. Submit to stores:

eas submit --platform ios
eas submit --platform android

Known Limitations

• Mock AI responses (integrate real AI for production)
• GitHub OAuth requires backend callback handler
• Template gallery uses placeholder images
• No offline mode for app generation
• Limited error recovery in GitHub operations

Future Enhancements

• Real AI integration (OpenAI, Claude, etc.)
• Backend API for user management
• Real-time collaboration
• App preview in WebView
• Export to Expo Snack
• Template marketplace
• Version control for apps
• Analytics dashboard
• Push notifications
• In-app purchases

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Write tests
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and questions:

• GitHub Issues: [Create an issue]
• Documentation: See this README
• Email: support@vibebuilder.app

Acknowledgments

• Built with React Native and Expo
• UI inspired by modern design systems
• Icons from Unicode emoji set
• Placeholder images from placeholder.com

---

Made with ❤️ by the VibeBuilder team