🚀 AppPop

A modern, feature-rich React template powered by Material UI and Supabase for building production-ready web and native mobile applications with blazing-fast development speed.

✨ Features

📱 Cross-Platform

• Build for Web, iOS, and Android from single codebase
• Native device features with Capacitor
• Progressive Web App (PWA) support
• Automated builds with Ionic Cloud

🎨 Rich UI Components

• Stories interface (Instagram-style)
• Interactive Timeline view
• Dark mode support
• Responsive navigation (desktop/mobile)
• Profile management
• Custom theme builder

🔐 Authentication & Authorization

• Secure Supabase authentication with multiple providers
• Row Level Security (RLS) policies
• Protected routes and middleware
• Email verification flow
• Profile management

🎨 Theme System

• Customizable themes with light/dark mode
• 8+ pre-built color schemes
• CSS-in-JS styling with Emotion
• Responsive layout system
• Custom font schemes

📊 Analytics & Monitoring

• Google Analytics 4 integration
• Google Tag Manager setup
• Sentry error tracking
• Microsoft Clarity heatmaps
• Cookie consent management

🛠️ Development Tools

• TypeScript for type safety
• Vite for blazing fast builds
• ESLint & Prettier configuration
• Testing setup with Playwright
• CI/CD with Ionic Cloud

🚦 Quick Start

The fastest way to get started is using the bootstrapCLI:

npm install -g @apppop/bootstrap
cd my-app
create-apppop-app

📱 Native App Development

Build and run native apps:

cd my-app
# iOS Setup
npm run cap add ios
npm run cap open ios

# Android Setup
npm run cap add android
npm run cap open android

# Build and sync
npm run build
npm run cap sync

For detailed setup instructions, check out our Setup Guide.

📚 Documentation

• 🔧 Setup Guide - Complete setup instructions
• 🎯 Development Guide - Development workflow
• 🎨 Theme System - Theme customization
• 📦 Components - Available components
• 📊 Analytics Setup - Analytics integration
• 🔒 Authentication Guide - Auth configuration

🏗️ Project Structure

├── src/
│   ├── components/     # Reusable components
│   ├── contexts/      # React contexts
│   ├── hooks/        # Custom hooks
│   ├── pages/        # Page components
│   ├── theme/        # Theme configuration
│   ├── types/        # TypeScript types
│   ├── utils/        # Utility functions
│   ├── App.tsx       # Main app component
│   └── index.tsx     # Entry point
├── docs/            # Documentation
├── playwright/      # E2E tests
├── ios/            # iOS native project
├── android/        # Android native project
└── public/         # Static assets

🧪 Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Mobile
npm run cap sync     # Sync native projects
npm run cap open ios # Open iOS project
npm run cap run android # Run on Android

# Testing
npm run test         # Run unit tests
npm run test:e2e     # Run E2E tests
npm run lint         # Run linter

🔮 Upcoming Features

• 📱 Full native app build and release guide
• 💳 Payment integrations
  • Stripe
  • Atoa
• 📊 Crashlytics integration
• 🗄️ Backend integrations
  • Airtable
  • NocoDB
• 📦 More pre-built components
• 📱 Enhanced native features

🤝 Contributing

Contributions are welcome!

📝 License

This project is licensed under the MIT License

🙏 Acknowledgments

• React
• Material-UI
• Supabase
• Capacitor
• Vite
• TypeScript

🔗 Links

• Website
• Documentation
• GitHub
• npm package

---