# ODS Dashboard Frontend and Backend Technologies: Complete Stack Breakdown

> Discover the ODS dashboard's full tech stack. Explore the React 18 frontend with Vite and Tailwind CSS, plus the Python FastAPI backend powered by Uvicorn for AI deployment.

- Repository: [Osmantic/ODS](https://github.com/Osmantic/ODS)
- Tags: architecture
- Published: 2026-08-30

---

**The ODS dashboard utilizes a React 18 frontend built with Vite and Tailwind CSS paired with a Python FastAPI backend running on Uvicorn, enabling a modern, responsive interface for AI deployment management.**

The ODS (Open-Source AI Deployment Stack) dashboard provides a browser-based control plane for managing AI models, GPU resources, and system extensions. Understanding the complete technology stack behind both the frontend user interface and backend API services—as implemented in the [Osmantic/ODS](https://github.com/Osmantic/ODS) repository—helps developers customize deployments and troubleshoot integration issues.

## Frontend Architecture: React 18 and Modern Tooling

The **frontend** layer lives under `ods/extensions/services/dashboard/` and delivers a single-page application using contemporary React patterns.

### Core Framework and Build Pipeline

**React 18** powers the component architecture, rendered via **React-DOM 18**. The build pipeline relies on **Vite 7** for rapid development and optimized production bundles. **React-Router-DOM 6** handles client-side navigation, while **ESLint 9** enforces code quality and **Vitest 4** runs unit and integration tests.

### Styling and User Experience

The interface uses **Tailwind CSS 3** for utility-first styling, ensuring responsive layouts without custom CSS proliferation. Iconography comes from **Lucide-React**, markdown rendering via **React-Markdown**, and complex animations leverage **GSAP**.

## Backend Architecture: FastAPI and Python 3

The **backend** service resides in `ods/extensions/services/dashboard-api/` and exposes HTTP endpoints that power the dashboard UI.

### API Framework and Server

**FastAPI** provides the REST API framework, utilizing Python type hints and **Pydantic** for request/response validation. **Uvicorn** serves as the ASGI server handling asynchronous request processing. **HTTPX** manages async HTTP client calls to external services, while **PyYAML** parses deployment manifests.

### Configuration and Utilities

Environment management uses **Python-Dotenv**, and GPU detection logic integrates with the FastAPI dependency injection system. The backend handles model management, authentication, and extension coordination through modular routers defined in `ods/extensions/services/dashboard-api/routers/`.

## Frontend-Backend Communication

The two layers communicate over HTTP, with the frontend making fetch requests to localhost endpoints served by the FastAPI backend.

### API Integration Example

The frontend calls `/api/system/status` to retrieve GPU and model information. In `ods/extensions/services/dashboard/src/components/`, components use standard fetch patterns to consume these endpoints:

```typescript
import { useEffect, useState } from "react";

export default function SystemStatus() {
  const [status, setStatus] = useState(null);

  useEffect(() => {
    fetch("/api/system/status")
      .then((r) => r.json())
      .then(setStatus)
      .catch(() => setStatus({ error: "Unable to load status" }));
  }, []);

  if (!status) return <div>Loading…</div>;
  if (status.error) return <div>{status.error}</div>;

  return (
    <div className="p-4 bg-gray-100 rounded">
      <h2 className="text-xl font-bold">System Status</h2>
      <p>GPU: {status.gpu?.name ?? "none"}</p>
      <p>Models loaded: {status.models?.length ?? 0}</p>
    </div>
  );
}

```

The corresponding backend route in [`ods/extensions/services/dashboard-api/routers/usage.py`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard-api/routers/usage.py) defines the endpoint using FastAPI's declarative syntax:

```python
from fastapi import APIRouter
from pydantic import BaseModel
from typing import List, Optional

router = APIRouter()


class GPUInfo(BaseModel):
    name: str
    memory_total: int
    memory_used: int


class SystemStatus(BaseModel):
    gpu: Optional[GPUInfo] = None
    models: List[str] = []


@router.get("/system/status", response_model=SystemStatus)
async def get_system_status() -> SystemStatus:
    # (real implementation pulls from ODS config & Docker compose)

    return SystemStatus(
        gpu=GPUInfo(name="NVIDIA RTX 4090", memory_total=24576, memory_used=1234),
        models=["llama-7b", "stable-diffusion-v1.5"],
    )

```

## Key Source Files and Directory Structure

Understanding the repository layout clarifies where specific technologies are implemented:

- **[`ods/extensions/services/dashboard/package.json`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard/package.json)** – Declares React 18, Vite 7, Tailwind CSS 3, and testing dependencies.
- **[`ods/extensions/services/dashboard/vite.config.js`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard/vite.config.js)** – Configures the Vite build system for React module resolution.
- **[`ods/extensions/services/dashboard/src/App.jsx`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard/src/App.jsx)** – Root React component initializing routing and global layout.
- **[`ods/extensions/services/dashboard/src/components/Sidebar.jsx`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard/src/components/Sidebar.jsx)** – Navigation component demonstrating Tailwind CSS implementation.
- **[`ods/extensions/services/dashboard-api/main.py`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard-api/main.py)** – Entry point starting the Uvicorn server and mounting FastAPI routers.
- **[`ods/extensions/services/dashboard-api/routers/usage.py`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard-api/routers/usage.py)** – Contains system-wide endpoints including the `/api/system/status` route.
- **[`ods/extensions/services/dashboard-api/settings.py`](https://github.com/Osmantic/ODS/blob/main/ods/extensions/services/dashboard-api/settings.py)** – Centralized Pydantic-based configuration for environment variables and paths.

## Summary

- **React 18 + Vite 7** power the frontend build system in `ods/extensions/services/dashboard/`, utilizing Tailwind CSS 3 for styling.
- **FastAPI + Uvicorn** drive the backend API in `ods/extensions/services/dashboard-api/`, with Pydantic handling data validation.
- The frontend communicates with the backend via standard HTTP fetch requests to REST endpoints exposed by FastAPI routers.
- Key configuration and routing logic reside in specific files like [`main.py`](https://github.com/Osmantic/ODS/blob/main/main.py), [`App.jsx`](https://github.com/Osmantic/ODS/blob/main/App.jsx), and [`routers/usage.py`](https://github.com/Osmantic/ODS/blob/main/routers/usage.py), following a clear directory separation between frontend and backend concerns.

## Frequently Asked Questions

### What frontend framework does the ODS dashboard use?

The ODS dashboard uses **React 18** as its primary frontend framework, bundled with **Vite 7** for development and production builds. This combination provides fast hot-module replacement and optimized bundle sizes for the single-page application.

### Which Python technologies power the ODS dashboard backend?

The backend relies on **FastAPI** for the web framework, **Pydantic** for data validation, and **Uvicorn** as the ASGI server. **HTTPX** handles asynchronous HTTP requests, while **PyYAML** parses configuration manifests.

### How do the frontend and backend communicate?

The React frontend makes standard HTTP fetch requests to the FastAPI backend endpoints, typically served on localhost. The backend exposes REST routes—such as `/api/system/status`—that return JSON data consumed by React components.

### Where are the dashboard source files located in the repository?

Frontend source code resides in `ods/extensions/services/dashboard/`, containing React components and Vite configuration. Backend source code lives in `ods/extensions/services/dashboard-api/`, containing FastAPI routers, Pydantic models, and server initialization logic.