Radium AI Dashboard

Portfolio dashboard concept for managing AI model infrastructure: deployments, model discovery, usage analytics, evaluations, datasets, audit logs, and an AI playground.

This repo is presented as a product engineering case study. It started from the Vercel AI Chat SDK foundation and was extended into a Radium-style cloud dashboard with custom navigation, model operations screens, deployment flows, analytics surfaces, loading states, and reusable dashboard components.

Case Study

Problem

AI infrastructure products often expose powerful primitives but leave users to stitch together model discovery, deployment state, usage analytics, fine-tuning, evaluations, datasets, and billing controls across fragmented surfaces.

Approach

This dashboard treats model operations as one coherent product workflow. The UI organizes high-frequency actions around a persistent sidebar, overview metrics, model cards, deployment detail views, operational tables, and playground surfaces.

Outcome

The result is a reviewable dashboard prototype that shows how a dense technical product can become easier to scan, navigate, and operate without hiding the complexity that developers and platform teams need.

Product Framing

Radium AI Dashboard explores how a technical AI infrastructure product can feel understandable to product teams, developers, and operators. The interface organizes model operations around clear workflows:

• Discover and compare hosted AI models.
• Deploy models serverlessly or on demand.
• Track token usage, latency, spending, and operational health.
• Manage fine-tuning, batch jobs, datasets, custom models, and evaluations.
• Provide a chat/playground surface for testing model behavior.

What This Shows

• Dashboard information architecture for a complex AI product.
• Front-end implementation across Next.js App Router, React, TypeScript, and shadcn-style components.
• Product UI patterns for loading states, side navigation, model cards, stats, tables, charts, forms, and settings.
• Design-to-code work: translating AI/GPU platform concepts into usable product surfaces.
• A portfolio-friendly example of product design, front-end delivery, and technical workflow modeling.

My Role

This public snapshot is framed around product design engineering work:

• Defined the dashboard information architecture and major workflow groups.
• Extended the AI chat foundation into a model operations dashboard.
• Built and refined screens for model discovery, deployments, analytics, fine-tuning, datasets, evaluations, settings, and playground workflows.
• Created reusable dashboard shell, loading-state, status, table, chart, card, and detail-view patterns.
• Prepared the repository for public portfolio review by removing private environment artifacts, documenting setup, and preserving screenshots.

Screens

• Home dashboard with product overview, usage trends, model highlights, and quick actions.
• Model library and model detail pages.
• Deployments, custom models, fine-tuning, datasets, evaluations, batch API, and audit logs.
• Chat and playground flows built on the AI SDK.

Tech Stack

• Next.js App Router
• React
• TypeScript
• Tailwind CSS
• shadcn/Radix UI primitives
• AI SDK
• Drizzle ORM
• Postgres
• Vercel Blob
• NextAuth/Auth.js
• Playwright
• Biome/Ultracite

Repository Notes

This is a public portfolio snapshot. Real production environment files are intentionally excluded. Use .env.example as the reference for required variables.

The app can run without some cloud services for UI review, but database-backed chat history, resumable streams, file storage, and authenticated AI gateway calls require configured environment variables.

pnpm build is the primary verification command for the public snapshot. pnpm lint checks the public documentation and package metadata. The inherited source tree still contains a stricter Ultracite style backlog, available through pnpm lint:source, which is intentionally not used as the public CI gate.

Local Development

pnpm install
cp .env.example .env.local
pnpm dev

Open http://localhost:3000.

Useful Commands

pnpm dev
pnpm build
pnpm lint
pnpm lint:source
pnpm test
pnpm db:migrate

Project Structure

app/(dashboard)      Dashboard routes and loading states
app/(chat)           Chat and AI playground foundation
components           Shared dashboard, chat, editor, and UI components
components/ui        Reusable primitive components
lib/ai               Model catalog and AI metadata
lib/db               Database schema, migrations, and queries
docs/assets          Portfolio screenshots
tests                Playwright fixtures and helpers

Public Release Hygiene

• Removed committed production environment files from the public snapshot.
• Removed generated TypeScript build info.
• Removed one-off metadata update scripts and placeholder files.
• Moved raw screenshots into docs/assets.
• Replaced template README content with a portfolio case study.
• Replaced secret-dependent CI workflows with a public build workflow.

Portfolio Context

This project is part of Pejman Afrakhteh's portfolio as a product designer turned front-end/product engineer. It is intended to demonstrate product thinking, dashboard design, component-based front-end implementation, and the ability to make technical workflows legible.