More Work

Digital Product Store – Admin

Admin analytics, protected routes, password resets, role-based access.

Open Admin
Role
Full-stack Developer
Timeline
3 weeks (parallel with client side)
Industry
E-commerce / Digital Goods
Team
Solo
Scope
Admin dashboards, KPIs, protected routes, auth flows
Impact
Gave operators full visibility and control over sales + downloads

TL;DR

  • Secure admin login with JWT and role-based routes
  • Dashboard with KPIs, charts, and filters
  • Password reset and recovery flows
  • Consistent design system with client side

⚡ Problem

Creators lacked visibility into sales performance, order health, and token usage. Admin operations like password resets and role-based access were missing, limiting scalability and trust.

Audience & Use Cases

Primary Audience

  • Store operators needing clear KPIs and order management
  • Small teams requiring role-based dashboards
  • Freelancers showing clients production-style admin

Key Use Cases

Monitor revenue and sales in real time

Operators log in and view KPIs like daily revenue, sales counts, and average order value through clear charts.

Review orders and drill into details

Admins search and filter orders, open detail views to see items, tokens, and invoice download links.

Reset credentials securely

Admins use forgot password flow, receiving expiring reset links with server-side token validation.

💡 Solution

An admin-only dashboard secured by JWT that exposes sales KPIs, order histories, revenue breakdowns, and token usage. Includes secure password reset flows, role-based access, and clean visual charts for operational clarity.

  • Admin login with JWT and role-based route protection
  • Forgot password & reset flow with expiring token links
  • Sales overview dashboard (revenue, AOV, daily trendline)
  • Orders list with pagination, filtering, and enrichment
  • Drill-down into orders with token & invoice context
  • Recharts visualizations for trends and KPIs
  • Responsive dark-mode UI matching client store

Requirements & Constraints

Requirements

  • Protect all admin routes with JWT + role-based middleware
  • Expose clear KPIs and sales trendlines
  • Enable password reset flows for admin accounts

Constraints

  • Keep admin UX consistent with client app theme
  • Minimal 3rd party dependencies beyond Stripe & DB
  • Use same DB schema and Drizzle ORM layer as client app

Architecture

Admin dashboard built in React, secured by JWT tokens. All analytics and orders pulled from the same Express API with admin-only middleware. Recharts visualizations layer on top of aggregated DB queries.

Data / Request Flow

  1. Admin logs in via /admin/login and receives JWT with role.
  2. JWT is sent in headers to protected endpoints.
  3. Analytics endpoints aggregate Orders and return revenue/sales metrics.
  4. Orders endpoint returns paginated list with user & token joins.
  5. Password reset issues expiring token, emailed to admin.
  6. Admin resets password securely and token is invalidated.

Domain Model

Admin
  • id
  • email
  • passwordHash
  • resetToken
  • role (admin)
  • createdAt
Analytics (derived)
  • totalRevenue
  • totalSales
  • avgOrderValue
  • salesOverTime[]

Trade-offs & Alternatives

  • Chose Recharts for fast integration over D3 (less custom, but quicker to build)
  • Implemented reset flow with Nodemailer vs. external provider (less scalable, but more control)

Roadmap

  • Multi-admin roles (viewer vs. operator)
  • Export analytics to CSV/Excel
  • Custom reporting periods
  • Audit logs for admin actions

FAQ

How is admin access controlled?

Every admin account is protected with JWT tokens and role-based middleware. Non-admins cannot hit analytics or order routes.

What analytics are available?

Revenue, sales count, average order value, and daily breakdowns are included, with plans for custom ranges.

Can admins reset their password?

Yes, via the forgot password flow. Expiring tokens are emailed and validated server-side.

How do orders stay consistent?

Stripe webhooks finalize orders; analytics and dashboards always reflect webhook-confirmed data.