Overlevered App

This is a React + TypeScript + Vite application that uses Firebase for authentication, database, and cloud functions.

Environment Setup

The application can run in different environments (local development with emulators or connected to production). Here's how to set it up:

Configuration Files

• src/config.ts: Contains the Firebase app configuration and server URL settings
• src/firebase.ts: Manages Firebase service initialization and emulator connections based on the environment

Environment Variables

Create a .env file in the app directory with the following variables:

# 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"

Running in Different Environments

1. Local Development (Default)

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

   npm run dev

2. Production Environment

   • Connects to the production Firebase services
   • Set VITE_SERVER_URL to the production URL
   • Either:
     • Change MODE to "production" in your environment
     • OR comment out the emulator connection logic in src/firebase.ts

   # Set NODE_ENV to production
   NODE_ENV=production npm run dev
   
   # Or for production build
   npm run build
   npm run preview

3. Hybrid Setup (Local UI with Production Backend)

   • Comment out the emulator connections in src/firebase.ts
   • Set VITE_SERVER_URL to the production URL
   • Run the development server

   npm run dev

Firebase Emulator Setup

The application uses Firebase emulators for local development. Make sure you have the following ports configured:

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

Development

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Build for production:

npm run build

Additional Configuration

For ESLint configuration and other development tools, see the Vite documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})