Firebase User Dashboard

A comprehensive dashboard application that fetches user data from Firebase Authentication and displays it in a beautiful, responsive interface. Built with React frontend and Python Flask backend.

🚀 Features

• Real-time User Data: Fetches user data from Firebase Authentication
• Interactive Dashboard: View user statistics, charts, and detailed user information
• Responsive Design: Works perfectly on desktop and mobile devices
• User Management: View user profiles, authentication status, and activity
• Visual Analytics: Charts showing user verification status and registration trends
• Search & Filter: Find users quickly with search functionality
• Detailed User Profiles: Modal dialogs with comprehensive user information

🏗️ Architecture

├── backend/                 # Python Flask API
│   ├── app.py              # Main Flask application
│   ├── firebase_service.py # Firebase integration service
│   ├── requirements.txt    # Python dependencies
│   └── .env.example       # Environment variables template
│
├── frontend/               # React application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API services
│   │   └── App.js         # Main App component
│   └── package.json       # Node.js dependencies
│
└── README.md              # This file

🛠️ Prerequisites

• Node.js (v14 or higher)
• Python (v3.8 or higher)
• Firebase project with Authentication enabled
• Firebase service account key

⚙️ Setup Instructions

1. Clone and Navigate to Project

cd "c:\\Users\\Muhammed Sabith\\Desktop\\sihmvp"

2. Backend Setup

Install Python Dependencies

cd backend
python -m venv venv
venv\\Scripts\\activate  # On Windows
pip install -r requirements.txt

Configure Firebase

1. Go to Firebase Console
2. Select your project or create a new one
3. Enable Authentication and Firestore Database
4. Go to Project Settings → Service Accounts
5. Click "Generate new private key"
6. Download the JSON file and save it as service-account-key.json in the backend directory

Environment Configuration

# Copy the example environment file
copy .env.example .env

# Edit .env file with your Firebase configuration
FIREBASE_SERVICE_ACCOUNT_PATH=service-account-key.json
FIREBASE_DATABASE_URL=https://your-project-id-default-rtdb.firebaseio.com/

Start Backend Server

python app.py

The API will be available at http://localhost:5000

3. Frontend Setup

Install Node.js Dependencies

cd ../frontend
npm install

Start Frontend Development Server

npm start

The React app will be available at http://localhost:3000

🔌 API Endpoints

The backend provides the following REST API endpoints:

• GET / - Health check
• GET /api/users - Get all users from Firebase Authentication
• GET /api/users/<uid> - Get specific user by UID
• GET /api/users/documents - Get user documents from Firestore
• GET /api/stats - Get user statistics

📊 Dashboard Features

Statistics Overview

• Total registered users
• Email verification rate
• Active users count
• Recent signups (last 30 days)

User Management

• Searchable user table
• Pagination support
• User status indicators (verified, disabled, etc.)
• Detailed user profiles with authentication providers

Visual Analytics

• Pie chart showing email verification status
• Bar chart displaying registration trends
• Responsive charts that work on all devices

🔧 Configuration Options

Backend Configuration (.env)

# Firebase
FIREBASE_SERVICE_ACCOUNT_PATH=service-account-key.json
FIREBASE_DATABASE_URL=https://your-project-id-default-rtdb.firebaseio.com/

# Flask
FLASK_ENV=development
FLASK_DEBUG=True
PORT=5000

# CORS
CORS_ORIGINS=http://localhost:3000

Frontend Configuration

The frontend automatically connects to the backend API. You can configure the API URL by setting the REACT_APP_API_URL environment variable.

🚀 Production Deployment

Backend Deployment

1. Set environment variables in your production environment
2. Use a production WSGI server like Gunicorn:

   gunicorn -w 4 -b 0.0.0.0:5000 app:app

Frontend Deployment

1. Build the production bundle:

   npm run build

2. Serve the build directory using a web server like Nginx or Apache

🔐 Security Considerations

• Never commit the Firebase service account key to version control
• Use environment variables for sensitive configuration
• Implement proper CORS settings for production
• Consider implementing authentication for the dashboard itself
• Use HTTPS in production

🐛 Troubleshooting

Common Issues

1. Firebase Connection Error

   • Verify service account key file exists and path is correct
   • Check Firebase project permissions
   • Ensure Authentication is enabled in Firebase Console

2. CORS Errors

   • Verify backend CORS configuration
   • Check that frontend is running on allowed origins

3. No Users Displayed

   • Ensure users exist in Firebase Authentication
   • Check browser console for API errors
   • Verify backend is running and accessible

Debug Mode

Enable debug mode by setting environment variables:

# Backend
FLASK_DEBUG=True

# Frontend
REACT_APP_DEBUG=true

📱 Flutter App Integration

This dashboard is designed to work with users who register through your Flutter app. The dashboard will automatically display:

• Users created through Flutter app authentication
• Sign-in methods used (email, Google, phone, etc.)
• User verification status
• Activity timestamps

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Review Firebase Console for authentication setup
3. Check browser console for error messages
4. Verify all environment variables are set correctly

---

Happy Dashboard Monitoring! 🎉