React Deployment Dashboard

A React component library that provides a beautiful, responsive deployment dashboard for monitoring your application deployments.

Features

• 🚀 Easy Integration: Drop-in component for any React project
• 🎨 Beautiful UI: Modern, responsive design with light/dark theme support
• 📊 Real-time Data: Live deployment status and version information
• 🔧 Customizable: Configurable API endpoints and styling
• 📱 Mobile Friendly: Responsive design that works on all devices
• 🎯 TypeScript Support: Full TypeScript support with type definitions

Installation

npm install react-deployment-dashboard

or

yarn add react-deployment-dashboard

Quick Start

1. Import the component

import { DeploymentDashboard } from 'react-deployment-dashboard';

2. Use it in your component

import React from 'react';
import { DeploymentDashboard } from 'react-deployment-dashboard';

function App() {
  return (
    <div className="App">
      <DeploymentDashboard 
        apiBaseUrl="http://localhost:9000/api"
        theme="light"
      />
    </div>
  );
}

export default App;

3. Add routing (optional)

If you want to make the dashboard accessible via a specific route:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { DeploymentDashboard } from 'react-deployment-dashboard';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<YourHomeComponent />} />
        <Route 
          path="/deployment" 
          element={
            <DeploymentDashboard 
              apiBaseUrl="http://localhost:9000/api"
              theme="light"
            />
          } 
        />
      </Routes>
    </Router>
  );
}

API Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiBaseUrl | string | ✅ | - | The base URL of your deployment API | | theme | 'light' \| 'dark' | ❌ | 'light' | Theme for the dashboard | | className | string | ❌ | '' | Additional CSS class names |

API Requirements

Your API should provide the following endpoints:

GET /deployment/projects

Returns an array of project names:

["project1", "project2", "project3"]

GET /deployment/projects/:projectName

Returns project deployment information:

{
  "projectName": "my-app",
  "frontend": {
    "version": "1.2.3",
    "commit": "abc123def456",
    "buildDate": "2023-01-15T10:30:00Z",
    "branch": "main",
    "author": "John Doe",
    "projectName": "my-app-frontend",
    "deploymentDate": "2023-01-15T11:00:00Z",
    "environment": "production",
    "siteName": "my-app.com",
    "appPool": "MyAppPool",
    "binding": "https://my-app.com"
  },
  "backend": {
    "version": "1.2.3",
    "commit": "def456abc123",
    "buildDate": "2023-01-15T10:45:00Z",
    "branch": "main",
    "author": "Jane Smith",
    "projectName": "my-app-backend",
    "deploymentDate": "2023-01-15T11:15:00Z",
    "environment": "production",
    "siteName": "api.my-app.com",
    "appPool": "MyAppApiPool",
    "binding": "https://api.my-app.com"
  }
}

Advanced Usage

Custom Styling

You can override the default styles by targeting the CSS classes:

.deployment-dashboard {
  /* Your custom styles */
}

.deployment-card {
  /* Custom card styles */
}

Using with Context/State Management

import { useContext } from 'react';
import { DeploymentDashboard } from 'react-deployment-dashboard';
import { ConfigContext } from './contexts/ConfigContext';

function DeploymentPage() {
  const { apiBaseUrl, theme } = useContext(ConfigContext);
  
  return (
    <DeploymentDashboard 
      apiBaseUrl={apiBaseUrl}
      theme={theme}
    />
  );
}

Error Handling

The component includes built-in error handling and displays user-friendly error messages when:

• API is unreachable
• Project data is unavailable
• Network errors occur

TypeScript Support

The library includes full TypeScript support with exported types:

import { 
  DeploymentDashboard, 
  DeploymentDashboardProps, 
  ProjectInfo, 
  VersionInfo 
} from 'react-deployment-dashboard';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.

Support

If you have any questions or need help integrating the dashboard, please:

1. Check the documentation
2. Look at the examples
3. Create an issue

Changelog

See CHANGELOG.md for version history and updates.