Home

Firebase React Template

Welcome to the Firebase React Template wiki! This template provides a production-ready foundation for building modern web applications with React, Firebase, and Redux.

🚀 Quick Start

# Clone the repository
git clone https://github.com/ThanuMahee12/firebase-react-template.git
cd firebase-react-template

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Start development server
npm run dev

📚 Documentation

Getting Started

• Setup Guide - Complete installation and configuration guide
• Project Structure - Understanding the codebase
• Development Workflow - Best practices and workflow

Configuration

• Firebase Configuration - Set up Firebase services (Auth, Firestore, Storage)
• Email Templates - Customize Firebase authentication emails

Deployment

• Deployment Guide - Deploy to Firebase Hosting
• GitHub Actions CI/CD - Automated deployment setup

Advanced Topics

• Firebase Limitations - Free tier quotas and optimization
• API Reference - Complete API documentation

✨ Features

• ⚡️ Vite - Lightning fast build tool with HMR
• ⚛️ React 19 - Latest React with modern hooks
• 🔥 Firebase - Authentication, Firestore, Storage, and Hosting
• 🎨 Redux Toolkit - Simplified state management
• 🧭 React Router - Client-side routing
• 🎯 React Icons - Popular icon library
• 📝 ESLint - Code quality and consistency
• 🔒 Security Rules - Pre-configured Firestore and Storage rules

🛠️ Technology Stack

Category	Technology
Frontend Framework	React 19.1.1
Build Tool	Vite (Rolldown variant)
State Management	Redux Toolkit 2.9.1
Routing	React Router DOM 7.9.4
Backend	Firebase 12.4.0
Icons	React Icons 5.5.0
Linting	ESLint 9

📦 What's Included

Firebase Services

• Authentication - Email/Password, Google Sign-in, Password reset, Email verification
• Firestore Database - NoSQL cloud database with real-time updates
• Storage - File uploads with user-specific folders
• Hosting - Fast CDN delivery with automatic SSL
• Security Rules - Pre-configured Firestore and Storage rules

Configuration Files

• firebase.json - Firebase hosting, Firestore, and Storage config
• firestore.rules - Firestore security rules with authentication checks
• storage.rules - Storage security rules with file size/type validation
• .firebaserc - Firebase project configuration
• .env.example - Environment variables template

Project Structure

src/
├── components/     # Reusable UI components
├── pages/         # Page components
├── layouts/       # Layout wrappers
├── routes/        # Route configuration
├── slices/        # Redux Toolkit slices
├── store/         # Redux store configuration
├── firebase/      # Firebase initialization and config
├── hooks/         # Custom React hooks
├── utils/         # Helper functions
└── styles/        # CSS files

Root Files:
├── firebase.json           # Firebase configuration
├── firestore.rules         # Database security rules
├── storage.rules           # Storage security rules
├── .env.example            # Environment template
└── CLAUDE.md              # AI assistant guidance

🎯 Use Cases

This template is perfect for:

• 📱 SaaS Applications
• 🛒 E-commerce Platforms
• 📊 Dashboard Applications
• 👥 Social Media Apps
• 📝 Content Management Systems
• 🎓 Educational Platforms

🔗 Quick Links

• GitHub Repository
• Firebase Console
• React Documentation
• Redux Toolkit Docs

🚦 Development Workflow

1. Setup - Follow the Setup Guide to configure Firebase
2. Develop - Use npm run dev for hot-reload development
3. Build - Run npm run build to create production build
4. Deploy - Deploy with firebase deploy or use GitHub Actions for CI/CD

📊 Free Tier Limits

Firebase Free (Spark) Plan includes:

• Firestore: 1GB storage, 50k reads/day, 20k writes/day
• Storage: 5GB storage, 1GB downloads/day
• Hosting: 10GB storage, 360MB/day bandwidth
• Authentication: Unlimited users

See Firebase Limitations for optimization strategies.

💡 Getting Help

• 📖 Start with the Setup Guide
• 🔧 Check API Reference for code examples
• 🐛 Report Issues
• 💬 Join Discussions
• 📧 Customize Email Templates for authentication

🤝 Contributing

This is an open-source template designed for community use. Contributions are welcome! See CONTRIBUTING.md for guidelines.

📄 License

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

---

Ready to build something amazing? Start with the Setup Guide →