Frontend
IBW Admin Dashboard - Overview

IBW Admin Dashboard - Overview

Project Description

The IBW (In Blockchain We Trust) Admin Dashboard is a comprehensive React-based administrative interface for managing conferences, events, speakers, users, quests, and notifications. This is a frontend application built with modern React patterns and TypeScript.

Tech Stack

  • Framework: React 19.1.1 with TypeScript
  • Build Tool: Vite 7.1.2
  • Routing: React Router DOM 7.8.2
  • UI Components: Radix UI primitives with custom styling
  • Styling: Tailwind CSS 4.1.12
  • State Management: React Context API + Custom Hooks
  • Data Fetching: Custom API client with fetch
  • Icons: Tabler Icons React
  • Notifications: Sonner (toast notifications)
  • Charts: Recharts 2.15.4
  • Tables: TanStack React Table 8.21.3
  • Form Validation: Zod 4.1.5
  • File Handling: XLSX 0.18.5

Project Structure

ibw-admin/
├── src/
│   ├── app/              # Application data/config
│   ├── assets/           # Static assets (images, etc.)
│   ├── components/       # React components
│   │   ├── ui/          # Reusable UI primitives
│   │   ├── quest/       # Quest-specific components
│   │   └── users/       # User-specific components
│   ├── contexts/        # React contexts (Auth, etc.)
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions and API client
│   ├── pages/           # Page components (routes)
│   └── main.tsx         # Application entry point
├── public/              # Public static files
└── dist/               # Build output

Key Features

1. User Management

  • View and filter users
  • Search by name, username, email
  • Filter by roles, ecosystems, topics
  • Export user data

2. Conference Management

  • Create, read, update, delete conferences
  • Manage conference details (dates, venue, organizers)
  • Upload conference attendees via Excel
  • Link events to conferences

3. Event Management

  • Full CRUD operations for events
  • Import events from Luma
  • Map events to conferences
  • Manage event details (speakers, location, timing)

4. Speaker Management

  • Manage speaker profiles
  • Link speakers to conferences
  • Track speaker ratings and statistics

5. Agenda Management

  • Create and manage conference agendas
  • Organize by day, stage, and time slot
  • Link agenda items to events

6. Quest System

  • Create and manage quests (gamification)
  • Manage quest tasks
  • Handle quest submissions and approvals
  • Manage quest participants
  • Send quest reminders
  • Manage reminder templates

7. Notification System

  • Send bulk notifications via Telegram
  • Schedule notifications
  • Track notification jobs
  • Filter recipients by roles, ecosystems, topics
  • Upload user lists via Excel

Authentication

The application uses JWT token-based authentication. Tokens are stored in localStorage and automatically included in API requests. Unauthorized responses (401) trigger automatic logout and redirect to login page.

API Integration

All API calls are handled through a centralized ApiClient class located in src/lib/api.ts. The base URL is configured via environment variable VITE_BASE_URL.

Environment Variables

  • VITE_BASE_URL: Base URL for the backend API
    • Development: http://localhost:8080
    • Production: https://ibw-app-service.lemonpebble-d3abe181.southeastasia.azurecontainerapps.io

Development

# Install dependencies
npm install
 
# Start development server
npm run dev
 
# Build for production
npm run build
 
# Preview production build
npm run preview
 
# Lint code
npm run lint

Deployment

The application is built for production and deployed to Azure Container Apps. The build process sets the production API URL automatically.

Database Schema ReferenceAPI Client Documentation