Skip to main content

overlevered_app

React + TypeScript + Vite application using Firebase for authentication, database, and cloud functions.

Overview​

The overlevered_app is a React application that uses:

  • Firebase for authentication
  • Firestore for database
  • Firebase Cloud Functions for backend
  • Stripe for payments

Technology Stack​

  • Framework: React 18.x
  • Language: TypeScript 5.x
  • Build Tool: Vite 5.x
  • UI Components: Radix UI
  • Styling: Tailwind CSS
  • Backend: Firebase (Auth, Firestore, Functions)
  • Payments: Stripe
  • State Management: React Query (TanStack Query)

Getting Started​

Prerequisites​

  • Node.js 18+
  • Bun (preferred) or npm
  • Firebase account and project

Setup​

  1. Install dependencies:

    bun install

  2. Configure environment: Create .env file:

    # For local development with emulators
    VITE_SERVER_URL="http://127.0.0.1:5001/flashcards-b2cb7/us-central1/api"

    # For production
    # VITE_SERVER_URL="https://us-central1-flashcards-b2cb7.cloudfunctions.net/api"

  3. Start development server:

    bun run dev

Key Commands​

Development​

  • bun run dev - Start development server
  • bun run build - Build for production
  • bun run preview - Preview production build

Code Quality​

  • bun run lint - Lint code

Environment Configuration​

The application can run in different environments:

Local Development (Default)​

  • Uses Firebase emulators for Auth, Firestore, and Functions
  • Set VITE_SERVER_URL to the local emulator URL
  • Emulator connections automatically configured when MODE === "development"

Production Environment​

  • Connects to production Firebase services
  • Set VITE_SERVER_URL to the production URL
  • Change MODE to "production" or comment out emulator connections

Hybrid Setup​

  • Local UI with production backend
  • Comment out emulator connections in src/firebase.ts
  • Set VITE_SERVER_URL to production URL

Firebase Emulator Setup​

The application uses Firebase emulators for local development:

  • Authentication: Port 9099
  • Firestore: Port 8080
  • Functions: Port 5001

Architecture​

Configuration Files​

  • src/config.ts - Firebase app configuration and server URL settings
  • src/firebase.ts - Firebase service initialization and emulator connections

Key Features​

  • User authentication
  • License management
  • Payment processing with Stripe
  • Group enrollment
  • Blog content

Documentation​