Hibento Admin

Admin dashboard for the Hibento event management platform.

---

Overview

Hibento Admin is the back-office for managing the Hibento event platform, built on React Admin. It gives administrators a full interface to create and manage events, sessions, speakers, rooms, and venues — with OIDC-based authentication via Casdoor.

• 🔐 Casdoor OIDC — login redirect, silent token renewal, callback handling.
• 📅 Events — grid view with live/upcoming/past status badges, full CRUD, tabbed sessions and rooms panels.
• 🎤 Speakers — avatar display, social links, session assignments.
• 🏟️ Venues & Rooms — venue cards with Google Maps link, inline room creation modal.
• ⏱️ Sessions — live badge, speaker and room assignment with conflict detection.
• ❓ Questions — read-only Q&A per session with upvote counts.
• 📊 Dashboard — KPI stat cards and upcoming/recent event panels.
• 🎨 Dark glassmorphism theme — custom MUI theme with animated video background.
• 🔗 OpenAPI-generated SDK — two typed clients (admin write + public read) generated from the backend specs.

---

Table of Contents

• Structure
• Tech Stack
• Architecture
• Quick Start
• Environment
• OpenAPI
• Deployment

Structure

hibento-react-admin/
  src/
    components/       # Shared UI (cards, layout, forms, status badges…)
    dashboard/        # Dashboard page and stat cards
    pages/            # LoginPage, CallbackPage
    providers/        # Data provider, auth provider, resource-specific API handlers
    resources/        # React Admin resource views (events, sessions, speakers, rooms, venues)
    theme/            # MUI theme (light + dark variants)
    types/            # TypeScript domain types
    utils/            # Date helpers, external link types
    lib/              # Generated SDK clients (admin-client, client)
  docs/
    admin-spec.yaml   # Admin OpenAPI spec (source for SDK generation)
    client-spec.yaml  # Public OpenAPI spec
  config/
    openapi-ts.admin.ts
    openapi-ts.client.ts
  .env.example
  vite.config.ts
  vercel.json

Tech Stack

• UI: React 19, React Admin 5, MUI 7
• Tooling: Vite 7, TypeScript 5, ESLint 9, Prettier
• Auth: oidc-client-ts, Casdoor OIDC
• API: hey-api (SDK generation from OpenAPI specs)
• Routing: React Router 7

Architecture

flowchart LR
  user[Admin User] --> login[Casdoor OIDC\nLogin Page]
  login -->|JWT| app[React Admin App]
  app --> adminSdk[AdminSdk\nWrite operations]
  app --> publicSdk[PublicSdk\nRead operations]
  adminSdk -->|Bearer JWT| backendAdmin[Hibento API\n/admin/**]
  publicSdk --> backendPublic[Hibento API\npublic endpoints]
  backendAdmin --> db[(PostgreSQL)]
  backendPublic --> db

Loading

Quick Start

1. Install dependencies

npm install

2. Configure environment

cp .env.example .env
# Edit .env with your values

3. Start development server

npm run dev

Vite dev server runs on http://localhost:5173 by default.

4. Regenerate API clients (after backend spec changes)

npm run generate

This regenerates both the admin and public SDK clients under src/lib/.

Environment

Variable	Description
VITE_PUBLIC_API_URL	Base URL for public read endpoints
VITE_ADMIN_API_URL	Base URL for admin write endpoints
VITE_CASDOOR_SERVER_URL	Casdoor OIDC server URL
VITE_CASDOOR_CLIENT_ID	OAuth2 client ID registered in Casdoor

In production, omit VITE_ADMIN_API_URL / VITE_PUBLIC_API_URL if the API is co-hosted — the build will use relative paths automatically.

OpenAPI

SDK clients are generated from two spec files in docs/ — one for authenticated admin write operations, one for public read operations. Run npm run generate after any backend spec change to keep them in sync.

Deployment

Configured for Vercel out of the box — vercel.json handles SPA routing. Set the four environment variables from the table above in the Vercel dashboard.