main

fireact.dev

A comprehensive open-source framework for building production-ready SaaS applications with Firebase, React, TypeScript, and Stripe integration.

Overview

fireact.dev provides a complete foundation for building modern SaaS applications. It combines industry-standard technologies and best practices to help developers launch their SaaS products faster and more efficiently.

Demo

Visit our demos page to explore live demonstrations of both the Core and SaaS versions, showcasing the full range of features and capabilities.

Features

Features

• Authentication & User Management
  • Complete authentication system (sign-up, sign-in, password reset)
  • User profile management
  • Role-based access control
  • Team member invitations and permissions
• Subscription Management
  • Multiple subscription plans support
  • Stripe integration for payment processing
  • Billing portal and invoice management
  • Payment method management
  • Subscription upgrades and downgrades

AI-Assisted Development (Claude Code)

• Built-in Claude Code skill for post-installation customization
• Natural language commands to add pages, components, navigation, Cloud Functions, and more
• 8 customization playbooks with step-by-step guidance
• Invoke with /fireact-builder or let it auto-detect your project

Developer Experience

• TypeScript for better code quality
• TailwindCSS for responsive design
• Firebase emulator support for local development
• Comprehensive documentation
• Modular architecture

Project Structure

The repository is organized into several key directories:

• source/: This directory contains the complete, combined source code for the Fireact.dev project, including both the React frontend application and Firebase Cloud Functions backend code. It follows a monorepo structure with packages/app for the React app and packages/functions for the Cloud Functions.
• create-fireact-app/: Contains the CLI tool used to scaffold new Fireact applications.
• website/: The main marketing website for fireact.dev, built with Hugo.
• docs/: The documentation website for fireact.dev, built with Hugo.
• demo/: Contains the demo application.

Getting Started

To create a new Fireact application, use the create-fireact-app CLI tool. This tool will guide you through the setup process, including Firebase and Stripe configurations.

1. Install the CLI (if you haven't already):

   npm install -g create-fireact-app
   

2. Create a new project:

   create-fireact-app <your-project-name>
   

   Replace <your-project-name> with the desired name for your new application.

3. Follow the prompts: The CLI will guide you through selecting your Firebase project and configuring Stripe.

4. After creation: Navigate into your new project directory:

   cd <your-project-name>
   

   Then, build the application and functions, and start the emulators:

   npm run build && cd functions && npm run build && cd ..
   firebase emulators:start
   

   For Stripe webhook testing, in a separate terminal:

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

   Remember to update functions/src/config/stripe.config.json with the new webhook endpoint secret and rebuild functions (cd functions && npm run build) if the webhook secret changes.

Tech Stack

• Frontend: React, TypeScript, TailwindCSS
• Backend: Firebase (Authentication, Firestore, Cloud Functions)
• Payment Processing: Stripe
• Development Tools: Vite, ESLint, PostCSS

Deployment

Preparing for Production

Before deploying to production:

1. Update Configuration Files:

   • Replace emulator settings with production Firebase config
   • Use production Stripe API keys
   • Set emulators.enabled to false in firebase.config.json

2. Build for Production:

   cd <your-project-name>
   npm run build
   cd functions
   npm run build
   cd ..
   

3. Test Production Build Locally:

   firebase emulators:start --only hosting
   

Deploying to Firebase

Initial Deployment:

# Deploy everything
firebase deploy

# Or deploy specific services
firebase deploy --only hosting        # React app
firebase deploy --only functions      # Cloud Functions
firebase deploy --only firestore      # Security rules & indexes

Subsequent Deployments:

# Deploy only what changed
firebase deploy --only hosting,functions

Environment-Specific Deployments

Using Multiple Firebase Projects:

# Set up aliases
firebase use --add

# Deploy to staging
firebase use staging
firebase deploy

# Deploy to production
firebase use production
firebase deploy

CI/CD with GitHub Actions

Create .github/workflows/deploy.yml:

name: Deploy to Firebase

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: |
          npm install
          cd functions && npm install

      - name: Build
        run: |
          npm run build
          cd functions && npm run build

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Get Firebase token:

firebase login:ci
# Save the token as GitHub secret: FIREBASE_TOKEN

CI/CD with Google Cloud Build

See demo/README.md for detailed Cloud Build setup with secure configuration management.

Post-Deployment

Verify Deployment:

1. Check hosting URL: https://your-project.web.app
2. Test authentication flow
3. Verify Cloud Functions
4. Check Firestore connectivity
5. Test Stripe webhooks

Set Up Production Webhook:

# Add webhook endpoint in Stripe Dashboard
https://us-central1-your-project.cloudfunctions.net/stripeWebhook

# Use production webhook secret in stripe.config.json

Monitor:

• Firebase Console → Functions logs
• Firebase Console → Analytics
• Stripe Dashboard → Webhooks
• Error tracking (recommended: Sentry, LogRocket)

For detailed deployment guides, see:

• Firebase Deployment Docs
• Architecture Documentation
• Demo CI/CD Setup

Documentation

Visit fireact.dev for comprehensive documentation, including:

• Getting Started Guide
• Architecture Overview
• Component Documentation
• API Reference
• Custom Development Guide
• AI-Assisted Development with Claude Code
• Troubleshooting Guide

Contributing

We welcome contributions! Please read our Contributing Guidelines before submitting pull requests.

Key contribution areas:

• Bug fixes and improvements
• New features and components
• Documentation enhancements
• Example applications
• Test coverage

Community & Support

• Website: fireact.dev
• Documentation: docs.fireact.dev
• GitHub Discussions: Ask a question or get help getting started — start here if you're not sure it's a bug
• GitHub Issues: Report a confirmed bug or request a feature
• Demo Application: Live Demo

License

This project is open source and available under the MIT License.