More Work

Admin SaaS Dashboard

Centralized users, subscribers, KPIs, and charts — production feel.

Live App
Role
Frontend + API
Timeline
~1.5 weeks
Industry
SaaS
Team
Solo
Scope
Auth, CRUD, Charts
Impact
Clear visibility for ops

TL;DR

  • Centralized admin for users & subscribers
  • Searchable, filterable tables with pagination
  • KPI overview with charts
  • Secure JWT auth and protected routes

⚡ Problem

Leaders lack a unified, trustworthy view of users, subscribers, and KPIs. Data is scattered across tools, making day-to-day decisions slow and error-prone.

Audience & Use Cases

Primary Audience

  • Founders and ops teams needing a single source of truth
  • Customer success teams tracking growth and churn signals
  • Engineers wanting an extendable admin starter

Key Use Cases

Daily KPI check-in

Open the dashboard to review active users, subscriber growth, and daily trends before stand-up.

Resolve a customer issue

Search a user, view subscriber status, update details, and confirm changes are reflected across KPIs.

Demo for stakeholders

Seed realistic data and walk through users, subscribers, and charted metrics to align on priorities.

💡 Solution

A responsive admin that centralizes users/subscribers with clean CRUD flows, secure auth, searchable tables, and KPI charts — designed to feel production-ready and extensible.

  • JWT-secured login for admin access
  • Users & subscribers modules (create, update, delete)
  • Search, filters, and pagination for large lists
  • Overview dashboard with KPIs and trend charts
  • Seed scripts for quick demo data
  • Responsive dark-mode UI with accessible focus states

Requirements & Constraints

Requirements

  • Authenticate admins and protect all data operations
  • Provide fast search, filters, and pagination
  • Visualize core KPIs with clear charts
  • Be responsive and accessible in dark mode

Constraints

  • Low operational overhead (single API + DB)
  • Keep dependencies lightweight and familiar
  • Support seeding for realistic demos

Architecture

React/Vite front-end with protected routes talks to an Express API over JWT. MongoDB/Mongoose stores users/subscribers. KPI cards and charts derive from aggregate queries. Seed scripts populate realistic demo data.

Data / Request Flow

  1. Admin signs in → receives JWT and enters protected UI.
  2. Tables fetch paginated users/subscribers with filters.
  3. KPI cards compute totals and deltas from aggregates.
  4. Charts (Recharts) visualize trends over time.
  5. CRUD actions update documents and refresh derived KPIs.

Domain Model

User
  • id
  • email
  • name
  • role (admin|viewer)
  • createdAt
  • lastLogin?
Subscriber
  • id
  • userId
  • plan
  • status (active|trialing|canceled)
  • startedAt
  • canceledAt?
Metric (derived)
  • activeUsers
  • subscribers
  • MRR?
  • growth%
  • series[]

Trade-offs & Alternatives

  • MongoDB for rapid iteration; a relational model could simplify joins for complex analytics
  • Recharts chosen for speed over custom D3 flexibility

Roadmap

  • Role management (invite, suspend, reset)
  • Churn insights and cohort analysis
  • CSV/Excel export for ops
  • Audit log of admin actions
  • Multi-tenant orgs and environments

FAQ

Can this become a real production admin?

Yes. Replace seed data with your live DB and extend modules. Security, pagination, and aggregates are already in place.

Is data export supported?

Roadmap includes CSV/Excel export and audit logs for compliance.

How hard is theming?

Design tokens and Tailwind make it straightforward to align with your brand, including dark mode.