Project Structure

Project Structure

Understanding the codebase organization and folder structure.

Overview

firebase-react-template/
├── public/                # Static files
├── src/                   # Source code
│   ├── assets/           # Images, icons, fonts
│   ├── components/       # Reusable components
│   ├── features/         # Redux features
│   ├── firebase/         # Firebase config
│   ├── hooks/            # Custom hooks
│   ├── layouts/          # Layout components
│   ├── pages/            # Page components
│   ├── routes/           # Route config
│   ├── slices/           # Redux slices
│   ├── store/            # Redux store
│   ├── styles/           # CSS files
│   ├── utils/            # Helper functions
│   ├── App.jsx           # Root component
│   └── main.jsx          # Entry point
├── .env.example          # Environment template
├── .firebaserc           # Firebase project config
├── .gitignore            # Git ignore rules
├── CLAUDE.md             # AI assistant guide
├── eslint.config.js      # ESLint configuration
├── firebase.json         # Firebase hosting config
├── firestore.indexes.json # Firestore indexes
├── firestore.rules       # Firestore security
├── index.html            # HTML template
├── package.json          # Dependencies
├── README.md             # Project readme
├── storage.rules         # Storage security
└── vite.config.js        # Vite configuration

Source Directories

/src/components

Reusable UI components used across the app.

Examples:

• Button.jsx - Custom button component
• Navbar.jsx - Navigation bar
• Modal.jsx - Modal dialog
• Card.jsx - Card container

Usage:

import Button from './components/Button'

<Button onClick={handleClick}>Click me</Button>

/src/pages

Page-level components for routing.

Examples:

• Home.jsx - Homepage
• Login.jsx - Login page
• Dashboard.jsx - User dashboard
• Profile.jsx - User profile

Usage:

// In routes/index.jsx
import Home from '../pages/Home'

<Route path="/" element={<Home />} />

/src/layouts

Layout wrapper components for pages.

Examples:

• MainLayout.jsx - Main app layout
• AuthLayout.jsx - Auth pages layout
• DashboardLayout.jsx - Dashboard layout

Usage:

<MainLayout>
  <Home />
</MainLayout>

/src/routes

Route configuration and protected routes.

Files:

• index.jsx - Main route configuration
• ProtectedRoute.jsx - Auth-required wrapper
• PublicRoute.jsx - Public route wrapper

/src/slices

Redux Toolkit slices for state management.

Examples:

• authSlice.js - Authentication state
• userSlice.js - User data state
• themeSlice.js - UI theme state

Structure:

import { createSlice } from '@reduxjs/toolkit'

const exampleSlice = createSlice({
  name: 'example',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 }
  }
})

/src/store

Redux store configuration.

Files:

• store.js - Configure and export store

import { configureStore } from '@reduxjs/toolkit'
import authReducer from '../slices/authSlice'

export const store = configureStore({
  reducer: {
    auth: authReducer
  }
})

/src/firebase

Firebase configuration and initialization.

Files:

• config.js - Firebase initialization

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)
export const db = getFirestore(app)

/src/hooks

Custom React hooks.

Examples:

• useAuth.js - Authentication hook
• useFirestore.js - Firestore operations
• useLocalStorage.js - Local storage hook

/src/utils

Helper functions and utilities.

Examples:

• validators.js - Form validation functions
• formatters.js - Date/number formatting
• constants.js - App constants

/src/styles

CSS files.

Files:

• index.css - Global styles
• App.css - App-specific styles

/src/assets

Static assets like images and icons.

Structure:

assets/
├── images/
├── icons/
└── fonts/

Configuration Files

vite.config.js

Vite build configuration.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

firebase.json

Firebase hosting and services configuration.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "rewrites": [...]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

firestore.rules

Firestore security rules.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId;
    }
  }
}

storage.rules

Firebase Storage security rules.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/{allPaths=**} {
      allow read, write: if request.auth.uid == userId;
    }
  }
}

.env.example

Environment variables template.

VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id

Entry Points

index.html

Main HTML template.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firebase React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

src/main.jsx

React app entry point.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles/index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

src/App.jsx

Root React component.

import './styles/App.css'

function App() {
  return (
    <div className="app">
      <h1>Firebase React Template</h1>
    </div>
  )
}

export default App

Build Output

dist/

Production build output (generated by npm run build).

dist/
├── assets/
│   ├── index-abc123.js
│   └── index-def456.css
└── index.html

This folder is deployed to Firebase Hosting.

---

Next: Firebase Configuration →