Skip to content

README.md

Latest commit

 

History

History
234 lines (173 loc) · 7.42 KB

README.md

File metadata and controls

234 lines (173 loc) · 7.42 KB

🔥 Firebase React Template

License: MIT React Firebase Vite

A production-ready React + Vite template with Firebase integration, Redux state management, and automated deployment. Perfect for building modern web applications quickly.

✨ Features

  • ⚡️ Vite - Lightning-fast build tool with HMR
  • ⚛️ React 19 - Latest React with modern hooks
  • 🔥 Firebase Ready - Pre-configured for Auth, 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
  • 🚀 GitHub Actions - Automated CI/CD deployment
  • 📚 Comprehensive Docs - Complete wiki documentation

📋 Prerequisites

  • Node.js 18+ and npm/yarn
  • Firebase account
  • Git

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/ThanuMahee12/firebase-react-template.git
cd firebase-react-template

2. Install Dependencies

npm install
# or
yarn install

3. Configure Environment Variables

# Copy the example env file
cp .env.example .env

# Add your Firebase credentials to .env

Get your Firebase config from Firebase Console → Project Settings → General → Your apps

4. Update Firebase Project ID

Edit .firebaserc:

{
  "projects": {
    "default": "your-firebase-project-id"
  }
}

5. Start Development Server

npm run dev

Visit http://localhost:5173

📚 Documentation

Complete documentation available in the Wiki:

🛠️ Tech Stack

Category Technology Version
Frontend Framework React 19.1.1
Build Tool Vite (Rolldown) 7.1.14
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.36.0

📁 Project Structure

firebase-react-template/
├── public/                   # Static files
├── src/
│   ├── assets/              # Images, icons, fonts
│   ├── components/          # Reusable React components
│   ├── pages/               # Page components
│   ├── layouts/             # Layout wrappers
│   ├── routes/              # Route configuration
│   ├── slices/              # Redux Toolkit slices
│   ├── store/               # Redux store
│   ├── firebase/            # Firebase config
│   │   └── config.js        # Firebase initialization
│   ├── hooks/               # Custom React hooks
│   ├── utils/               # Helper functions
│   ├── styles/              # CSS files
│   ├── App.jsx              # Root component
│   └── main.jsx             # Entry point
├── .env.example             # Environment variables template
├── .firebaserc              # Firebase project config
├── firebase.json            # Firebase hosting config
├── firestore.rules          # Firestore security rules
├── storage.rules            # Storage security rules
├── vite.config.js           # Vite configuration
└── CLAUDE.md                # AI assistant guidance

🔥 Firebase Services Included

Authentication

  • Email/Password authentication
  • Google Sign-in
  • Password reset
  • Email verification

Firestore Database

  • NoSQL cloud database
  • Real-time updates
  • Security rules configured

Storage

  • File uploads
  • User-specific folders
  • Security rules configured

Hosting

  • Fast CDN delivery
  • Automatic SSL
  • Custom domain support

📜 Available Scripts

# Development
npm run dev              # Start dev server
npm run build            # Build for production
npm run preview          # Preview production build
npm run lint             # Run ESLint

# Firebase
firebase login           # Login to Firebase
firebase deploy          # Deploy everything
firebase deploy --only hosting     # Deploy hosting only
firebase deploy --only firestore   # Deploy Firestore rules

🚀 Deployment

Deploy to Firebase Hosting

# Build the app
npm run build

# Deploy to Firebase
firebase deploy

Your app will be live at https://your-project-id.web.app

Automated Deployment with GitHub Actions

Set up automated deployments on every push:

  1. Follow the GitHub Actions guide
  2. Add Firebase secrets to GitHub
  3. Push to main branch
  4. Automatic deployment!

🎯 Use Cases

Perfect for building:

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

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

🐛 Issues

Found a bug? Please open an issue.

💬 Discussions

Have questions? Join the discussions.

Built with ❤️ for the developer community

Documentation • Report Bug • Request Feature