A real-time HTTP request/response log monitoring dashboard built with React 19, TypeScript, Tailwind CSS, and Firebase Firestore.

• 📡 Real-time updates via Firestore onSnapshot listener
• 🔍 Filter logs by Tenant ID, Service Name, and Status (Success/Error)
• 🔎 Search by endpoint, correlation ID, IP, error message
• 📊 Stats bar showing success/error counts, rate, and avg duration
• 🗂️ Detail panel with full request/response headers, bodies, and metadata
• 📱 Mobile-first responsive design
• 🌑 Dark industrial theme with monospace fonts

npm install

Copy .env.example to .env.local and fill in your Firebase project values:

cp .env.example .env.local

Then edit .env.local with your Firebase config from the Firebase Console → Project Settings → Your Apps.

The app expects a Firestore collection named ApiLogs (or apiLogs as fallback).

Documents should match this structure (C# property names with PascalCase are supported):

Both PascalCase (Timestamp) and camelCase (timestamp) field names are supported.

Create a composite index in Firestore for efficient ordering:

• Collection: ApiLogs
• Field: Timestamp (Descending)

Or the app will prompt you with a link to create it.

npm run dev

npm run build

• React 19 - UI framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Zustand - State management
• Firebase/Firestore - Real-time database
• date-fns - Date formatting
• lucide-react - Icons
• JetBrains Mono - Monospace font