🛍️ Create Shopify App Template

Create a new Shopify React Native app with Firebase integration, modern UI components, and secure configuration management in seconds.

🚀 Quick Start

npx create-shopifybased-app-template my-shopify-app
cd my-shopify-app
# Follow the setup instructions displayed after creation

✨ What You Get

This package creates a complete Shopify React Native application with:

🛒 Complete Shopify Integration

• Storefront API for product catalog and cart management
• Admin API for order and customer management
• Secure authentication and session handling
• WebView integration for seamless checkout

🔥 Firebase Services

• Push notifications and cloud messaging
• Crashlytics for error tracking
• Analytics and performance monitoring
• Secure environment-based configuration

🎨 Modern UI Framework

• 100+ pre-built React Native components
• Multiple themes (light, dark, custom)
• Responsive design for all screen sizes
• Accessibility-compliant components

📱 Mobile-First Architecture

• React Native with Expo for cross-platform development
• Native performance with JavaScript flexibility
• Hot reloading for fast development
• Production-ready build configuration

🔐 Security & Best Practices

• Environment variable management
• Secure credential handling
• Automated configuration scripts
• Industry-standard security measures

📱 Included Screens & Features

• Authentication - Login, signup, password recovery
• Home - Featured products, banners, categories
• Product Details - Images, variants, add to cart
• Shopping Cart - Item management, checkout
• User Profile - Orders, addresses, settings
• Search - Product search with filters
• Notifications - Push notification management

🛠️ Usage

Interactive Mode

npx create-shopifybased-app-template
# You'll be prompted for a project name

Direct Mode

npx create-shopifybased-app-template my-shopify-app

What Happens Next

1. Project Creation - Creates a new directory with your project name
2. File Copying - Copies all template files to your project
3. Dependency Installation - Automatically runs npm install
4. Environment Setup - Creates .env file from template
5. Success Guide - Shows detailed next steps

⚙️ Post-Creation Setup

After creating your project, you'll need to:

1. Configure Environment Variables

Edit the .env file with your actual credentials:

# Shopify Configuration
EXPO_PUBLIC_STOREFRONT_ACCESS_TOKEN = your_actual_token
EXPO_PUBLIC_ADMIN_ACCESS_TOKEN = your_actual_token
EXPO_PUBLIC_STOREFRONT_API_URL = https://your-shop.myshopify.com/api/2025-01/graphql.json
# ... other variables

2. Add Firebase Configuration Files

• android/app/google-services.json (Android)
• ios/GoogleService-Info.plist (iOS)

3. Generate Firebase Config

npm run generate-firebase-config

4. Start Development

npm run android  # or npm run ios

🔧 Configuration

Shopify Setup

1. Create a Shopify Partner Account
2. Create a New App in your partner dashboard
3. Configure API Permissions:
   • read_products, write_products
   • read_orders, write_orders
   • read_customers, write_customers
4. Get API Credentials from your app settings

Firebase Setup

1. Create a Firebase Project
2. Add Android/iOS Apps to your project
3. Download Configuration Files:
   • google-services.json (Android)
   • GoogleService-Info.plist (iOS)
4. Enable Services:
   • Cloud Messaging
   • Crashlytics
   • Analytics

📦 Package Structure

my-app/
├── app/                    # Main application code
│   ├── components/         # Reusable UI components
│   ├── screens/           # App screens and pages
│   ├── api/              # Shopify API integration
│   ├── config/           # Configuration files
│   ├── constants/        # App constants and themes
│   ├── services/         # Firebase and other services
│   └── utils/            # Utility functions
├── assets/               # Images, fonts, icons
├── patches/              # Dependency patches
├── scripts/              # Build and setup scripts
├── .env                  # Environment variables (create this)
├── env.example           # Environment template
└── package.json          # Dependencies and scripts

🔐 Security

This template follows security best practices:

• ✅ No sensitive data in package
• ✅ Environment-based configuration
• ✅ Template-based setup
• ✅ Automated config generation
• ✅ Secure credential management

🎨 Customization

Themes

Edit app/constants/theme.tsx to customize colors, fonts, and styles.

Components

All components are in app/components/ with multiple style variants.

Screens

Modify screens in app/screens/ to match your app's requirements.

📱 Platform Support

• Android - Full support with native modules
• iOS - Full support with native modules
• Web - Limited support (Shopify WebView features)

🚀 Deployment

Android

eas build --platform android

iOS

eas build --platform ios

📚 Documentation

• Shopify API Documentation
• Firebase Documentation
• React Native Documentation

🤝 Contributing

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

📄 License

MIT License - see LICENSE file for details

🆘 Support

• Issues: Create an issue on GitHub
• Documentation: Check the docs folder
• Security: Report security issues privately

🔄 Updates

Keep your template updated:

npm update create-shopifybased-app-template

Built with ❤️ for the Shopify and React Native communities