𝗠𝘂𝗵𝗮𝗺𝗺𝗮𝗱 𝗜𝗺𝗿𝗮𝗻

event-concierge-hq

Admin Dashboard Brief Event Concierge Platform

0
0
0
TypeScript
public
View on GitHubWebsite

Event Concierge HQ

A polished, desktop-first admin dashboard for managing event attendees, groups, activities, and communications — built with modern React, Tailwind CSS, and shadcn/ui.

Project Description

Event Concierge HQ is a comprehensive event management admin platform designed to streamline the coordination of attendees, groups, activities, and messaging for high-profile events. The platform empowers event administrators with intuitive CRUD operations, real-time metrics, bulk actions, and data export capabilities — all wrapped in a refined, responsive UI with an elegant Emerald Prestige design system.

Goals

  • Provide event organizers with a centralized dashboard to manage attendee registrations, group assignments, and event activities.
  • Enable efficient communication workflows (email & WhatsApp) from a single interface.
  • Deliver a premium, polished UI that works seamlessly on desktop and mobile devices.

Solution

  • Built a full-featured admin dashboard with 7 core modules: Dashboard, Users, Groups, Activities, Messages, Administrators, and Import/Export.
  • Implemented complete mock-data-driven CRUD with search, filtering, bulk assign, CSV export, and notification management.
  • Designed with a custom Emerald Prestige theme — deep emerald greens, warm ivory backgrounds, and gold accents — using Space Grotesk & DM Sans typography.

Impact

  • Reduced admin overhead through bulk actions, smart filters, and one-click exports.
  • Delivered a responsive, accessibility-friendly interface usable across devices.
  • Architected with clean, API-ready patterns for easy future backend integration.

Screenshots

Login Dashboard
Login Dashboard
Users Management Activities
Users Activities

Features

  • Authentication — Secure login with password visibility toggle, session persistence, and profile-aware navigation.
  • Dashboard Overview — Real-time metrics cards, group distribution, communication preferences, and recent activity feed.
  • Users Module — Full CRUD, search by name/email, filter by group/status, bulk assign, contact via email/WhatsApp, and CSV export.
  • Groups Module — Create, edit, and delete attendee groups with member count tracking.
  • Activities Module — Manage event activities with category badges, capacity tracking, and edit capabilities.
  • Messages Module — Compose and track communications sent to attendees.
  • Administrators Module — Manage admin accounts with role assignments.
  • Import / Export — Upload data via CSV/Excel templates and download structured exports.
  • Notifications — In-app notification center with mark-read, delete, and clear-all actions.
  • Responsive Design — Mobile-friendly layout with collapsible sidebar and adaptive tables.
  • Profile Page — View and edit admin profile details.

Tech Stack

Skill Usage
React 18 UI library with hooks and context for state management
TypeScript Type-safe development across the entire codebase
Vite Fast development build tool and bundler
Tailwind CSS Utility-first styling with custom design tokens
shadcn/ui Accessible, composable UI components (Dialog, Table, Card, etc.)
React Router v6 Client-side routing with query parameter support
TanStack Query Data fetching and caching patterns
Lucide React Consistent, crisp iconography
Recharts Data visualization for dashboard metrics
date-fns Date formatting and manipulation
Zod + React Hook Form Form validation and handling

Getting Started

Prerequisites

  • Node.js (v18 or later)
  • npm or bun

Installation

# Clone the repository
git clone <YOUR_GIT_URL>

# Navigate to the project directory
cd <YOUR_PROJECT_NAME>

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:5173.

Default Login Credentials

  • Email: admin@example.com
  • Password: Admin@2026

Project Structure

src/
├── components/          # Reusable UI components (shadcn/ui + custom)
│   └── layout/          # AdminLayout, AdminSidebar, AdminHeader
├── contexts/            # AuthContext, NotificationsContext
├── hooks/               # Custom hooks (useToast, usePointerEventsFix, useMobile)
├── lib/                 # Utilities (csv export, helpers)
├── pages/               # Route-level pages
│   ├── Login.tsx
│   ├── Dashboard.tsx
│   ├── Users.tsx
│   ├── Groups.tsx
│   ├── Activities.tsx
│   ├── Messages.tsx
│   ├── Administrators.tsx
│   ├── ImportExport.tsx
│   ├── Profile.tsx
│   └── NotFound.tsx
├── index.css            # Global styles & design tokens
└── App.tsx              # Root router & providers

Design System

  • Theme: Emerald Prestige — deep emerald primary, warm ivory background, gold accents.
  • Typography: Space Grotesk (display/headings), DM Sans (body/UI text).
  • Color Tokens: Fully CSS-variable-driven via :root for easy theming.
  • Border Radius: 0.75rem standard, 0.5rem for inputs.
  • Shadows: Elevation system with shadow-card and shadow-elevated.

Future Enhancements

  • Supabase / Lovable Cloud integration for real database persistence.
  • Role-based access control (RBAC) with server-side validation.
  • Email & WhatsApp API integration for live message sending.
  • Activity scheduling with calendar drag-and-drop.
  • Analytics charts and attendee engagement metrics.

License

This project is built with Lovable and is open for customization and extension.

Built with modern web technologies.

v0.3.3[beta]