Skip to content

README.md

Latest commit

 

History

History
302 lines (232 loc) · 8.17 KB

README.md

File metadata and controls

302 lines (232 loc) · 8.17 KB

Fireact.dev Demo Application

This repository hosts a fully functional demonstration of the Fireact.dev application, created using the create-fireact-app CLI tool. It showcases all core functionalities and serves as a reference implementation for developers building their own SaaS applications.

Features Demonstrated

The demo application includes:

Authentication & User Management

  • ✅ User sign-up with email/password
  • ✅ User sign-in/sign-out
  • ✅ Password reset functionality
  • ✅ Email verification
  • ✅ User profile management
  • ✅ Password change

Subscription Management

  • ✅ Multiple subscription plans
  • ✅ Subscription creation with Stripe
  • ✅ Plan upgrades and downgrades
  • ✅ Subscription cancellation
  • ✅ Billing portal access

Payment Processing

  • ✅ Payment method management
  • ✅ Default payment method selection
  • ✅ Payment method removal
  • ✅ Invoice history viewing
  • ✅ Billing details updates

Team Collaboration

  • ✅ Team member invitations
  • ✅ Role-based permissions
  • ✅ User invitation acceptance/rejection
  • ✅ Team member removal
  • ✅ Subscription ownership transfer

Multi-language Support

  • ✅ Multiple language options
  • ✅ Dynamic language switching
  • ✅ Internationalized UI components

Live Demo

Visit our live demonstration at https://fireact.dev/demos/ to explore the full range of features and capabilities without setting up locally.

Running Locally

Prerequisites

  • Node.js (v18 or higher)
  • Firebase CLI: npm install -g firebase-tools
  • Stripe CLI: Installation Guide
  • Firebase project with web app configured
  • Stripe test account

Setup Steps

  1. Navigate to the demo directory:

    cd demo

  2. Install dependencies:

    # Install app dependencies
npm install

# Install functions dependencies
cd functions
npm install
cd ..

  3. Configure Firebase:

    firebase login
firebase use --add
# Select your Firebase project

  4. Update configuration files:

    Edit src/config/firebase.config.json with your Firebase project settings.

    Edit functions/src/config/stripe.config.json with your Stripe test keys.

  5. Build the application:

    npm run build
cd functions
npm run build
cd ..

  6. Start Firebase Emulators:

    firebase emulators:start

    This starts:

  7. Set up Stripe webhook (in a separate terminal):

    stripe listen --forward-to http://127.0.0.1:5001/<your-firebase-project-id>/us-central1/stripeWebhook

    Copy the webhook secret (whsec_...) and update functions/src/config/stripe.config.json, then rebuild functions.

Testing the Demo

Once running, you can test:

  1. Sign Up:

    • Create a new account
    • Verify email (check emulator UI)
    • Complete profile

  2. Create Subscription:

    • Choose a subscription plan
    • Enter test card: 4242 4242 4242 4242
    • Complete payment setup

  3. Manage Subscription:

    • View subscription details
    • Invite team members
    • Update billing details
    • Change payment methods
    • View invoices

  4. Team Features:

    • Invite users via email
    • Accept/reject invitations
    • Manage user permissions
    • Remove team members

  5. Test Scenarios:

    • Upgrade/downgrade plans
    • Cancel subscription
    • Transfer ownership
    • Change language

Project Structure

demo/
├── src/                    # React application
│   ├── components/        # UI components
│   ├── contexts/          # React contexts
│   ├── hooks/             # Custom hooks
│   ├── config/            # Configuration
│   └── i18n/              # Translations
├── functions/              # Cloud Functions
│   └── src/
│       ├── functions/     # Backend functions
│       └── config/        # Backend configuration
├── public/                 # Static assets
├── deploy/                 # Production configs (not in git)
├── cloudbuild.yaml        # CI/CD configuration
├── firebase.json          # Firebase configuration
├── firestore.rules        # Security rules
└── package.json           # Dependencies

CI/CD with Google Cloud Build

This demo includes a production-ready CI/CD pipeline using Google Cloud Build.

How It Works

  1. Trigger: Push to main branch
  2. Build: Cloud Build executes cloudbuild.yaml
  3. Configuration: Fetches production configs from Cloud Storage
  4. Deploy: Deploys to Firebase Hosting and Functions
  5. Verification: Runs post-deployment checks

Cloud Build Configuration

The cloudbuild.yaml file defines the build steps:

steps:
  # 1. Fetch production configs from Cloud Storage
  # 2. Install dependencies
  # 3. Build React application
  # 4. Build Cloud Functions
  # 5. Deploy to Firebase
  # 6. Clean up

Production Configuration

The deploy/ folder is designed for production configurations:

Files (not in repository):

  • firebase.config.json - Production Firebase settings
  • stripe.config.json - Production Stripe keys
  • plans.config.json - Production subscription plans
  • .firebaserc - Firebase project reference

Security:

  • Production configs stored in Google Cloud Storage bucket
  • Retrieved during build process
  • Never committed to version control
  • Access controlled via IAM permissions

Setting Up CI/CD

  1. Create Cloud Storage bucket:

    gsutil mb gs://your-project-configs

  2. Upload production configs:

    gsutil cp deploy/* gs://your-project-configs/

  3. Configure Cloud Build trigger:

    • Go to Google Cloud Console → Cloud Build → Triggers
    • Create trigger for your repository
    • Set branch: main
    • Set build configuration: cloudbuild.yaml

  4. Grant permissions:

    # Allow Cloud Build to access configs
gsutil iam ch serviceAccount:YOUR_PROJECT_NUMBER@cloudbuild.gserviceaccount.com:objectViewer gs://your-project-configs

Use Cases

This demo serves as:

Reference Implementation

  • See how all features work together
  • Understand component integration
  • Learn best practices

Testing Ground

  • Test user workflows
  • Verify payment processing
  • Explore subscription management

Starting Point

  • Clone and customize for your project
  • Use as template for new features
  • Reference for troubleshooting

Demo for Stakeholders

  • Show potential of Fireact.dev
  • Demonstrate SaaS capabilities
  • Present to clients or investors

Customization

To customize this demo for your own project:

  1. Branding:

    • Update logo in public/
    • Modify colors in tailwind.config.js
    • Change app name in configuration

  2. Features:

    • Add custom components in src/components/
    • Extend Cloud Functions in functions/src/functions/
    • Modify subscription plans in configuration

  3. Internationalization:

    • Add languages in src/i18n/locales/
    • Update translations for new features

  4. Deployment:

    • Update cloudbuild.yaml for your pipeline
    • Configure your own Cloud Storage bucket
    • Set up your Firebase project

Documentation

For detailed documentation:

Support

License

This demo application is open source and available under the MIT License.