Firebase Dashboard

A comprehensive VSCode extension for managing Firebase projects using the Firebase Admin SDK. Provides an intuitive tree view explorer and commands for Firestore, Realtime Database, Authentication, and Cloud Storage.

✨ Features

• 🚀 Multi-project support - Manage multiple Firebase projects simultaneously
• 🔥 Firestore - Browse collections and documents with real-time data
• 👤 Authentication - View user accounts and authentication details
• 📦 Cloud Storage - Explore files and folders in Firebase Storage buckets
• 💾 Realtime Database - Navigate database nodes and view data
• 🌳 Tree view explorer - Visual representation of Firebase services in VS Code
• 🎨 Modern Webview UI - Interactive data tables with search, sorting, and filtering
• 📊 Rich Data Visualization - Beautiful cards, tables, and JSON viewers
• ✅ Validation - Configuration and service account key validation
• 🔄 Auto-reload - Automatically reloads when configuration changes
• 🎯 Theme Compatible - Adapts to VS Code's light and dark themes

📋 Requirements

• Node.js (v16 or higher recommended)
• Firebase service account key JSON files for your projects
• Firebase Admin SDK access to your projects

🚀 Setup

1. Install the Extension

Install from the VS Code Marketplace or build from source.

2. Get Firebase Service Account Key

1. Go to Firebase Console
2. Select your project
3. Navigate to Project Settings → Service Accounts
4. Click Generate New Private Key
5. Save the JSON file securely in your project

3. Configure Firebase Projects

Open VS Code Settings (Ctrl+, or Cmd+,) and search for firebase-dashboard:

Method 1: Settings UI

1. Search for "Firebase Dashboard"
2. Click "Edit in settings.json" under "Firebase-dashboard: Projects"
3. Add your configuration

Method 2: Direct settings.json

Add the following to your .vscode/settings.json or user settings:

{
  "firebase-dashboard.projects": [
    {
      "name": "My Production Project",
      "projectId": "my-project-id",
      "serviceAccountKeyPath": "/absolute/path/to/serviceAccountKey.json"
    },
    {
      "name": "Development Project",
      "projectId": "dev-project-id",
      "serviceAccountKeyPath": "./relative/path/to/dev-key.json"
    }
  ],
  "firebase-dashboard.defaultProject": "My Production Project"
}

Note: You can use absolute paths or relative paths (relative to workspace folder).

4. Select a Project

1. Open the Firebase view in the Explorer sidebar
2. Click the "Select Firebase Project" button (or use Command Palette)
3. Choose your project from the dropdown

📖 Usage

Modern Webview Interface

The extension now uses modern webview panels for an enhanced user experience:

• Interactive Data Tables - Sort, filter, and search through your data
• Beautiful Card Layouts - User-friendly display for authentication users and files
• JSON Viewer - Syntax-highlighted JSON display for documents and database data
• Responsive Design - Adapts to different screen sizes and VS Code themes
• Real-time Search - Instant filtering as you type

View Firestore Data

1. Expand the Firestore node in the tree view
2. Collections are automatically loaded from your database
3. Click on a collection to expand and see documents
4. Right-click and select View Collection to see full data in an interactive table
5. Right-click on a document and select View Document for detailed JSON view

View Authentication Users

1. Click on the Authentication node
2. Select View Users from the context menu
3. User details appear in beautiful user cards with search and filtering

Browse Cloud Storage

1. Expand the Storage node
2. Files are listed from your default bucket
3. Right-click and select View Files to see file metadata in card layout

Explore Realtime Database

1. Expand the Realtime Database node
2. Navigate through database nodes
3. Right-click and select View Data to see node contents in JSON format

Refresh Data

Click the refresh icon (🔄) in the tree view title bar to reload all data.

⚙️ Extension Settings

This extension contributes the following settings:

• firebase-dashboard.projects: Array of Firebase project configurations
  • name: Display name for the project
  • projectId: Firebase project ID
  • serviceAccountKeyPath: Path to service account JSON key file
• firebase-dashboard.defaultProject: Default project name to use on startup

🔒 Security Notes

• Never commit service account keys to version control
• Add key files to .gitignore
• Store keys securely and restrict access
• Use environment-specific keys for development/production
• Service account keys have full admin access - protect them carefully

🐛 Known Issues

• Large collections are limited to first 50-100 items for performance
• Storage only shows files in root bucket (nested folder support coming soon)
• Realtime Database pagination is limited

🗺️ Roadmap

• [ ] Add document editing capabilities
• [ ] Implement search functionality
• [ ] Add export data features
• [ ] Support for Firebase Functions
• [ ] Cloud Firestore rules viewer
• [ ] Performance monitoring integration
• [ ] Webview panels for better data visualization

🤝 Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Built with Firebase Admin SDK
• Powered by VS Code Extension API

Enjoy managing your Firebase projects! 🔥