Back to Projects
Liveadmin.rankdresume.com

RankdResume Admin Panel

Full-featured admin dashboard for platform management

ReactViteMUIRechartsRailway API

Overview

The Admin Panel is a React + Vite SPA that gives the Codefliq team full visibility and control over the RankdResume platform. It talks directly to the NestJS backend over authenticated REST APIs and to the Railway API for infrastructure monitoring.

Key Features

Overview dashboard with user growth, revenue, and AI cost charts
User management with role assignment and detailed user profiles
Resume browser with AI score history per user
AI usage analytics — cost per provider, tokens consumed, cache hit rate
Multi-provider AI config — enable/disable providers, set budget caps
Subscription management with coupon creation and plan editing
Support ticket system with assignment and resolution tracking
Railway infrastructure monitor — service health, memory, CPU, estimated billing
Page analytics and lead tracking

How It Works

1

Authentication

Admin logs in with a secret token stored in localStorage. All API requests include this token as a Bearer header.

2

Data Fetching

Each page fetches data from the NestJS `/admin/*` endpoints which are protected by an admin guard middleware.

3

Infrastructure Monitoring

The Infrastructure page calls the Railway GraphQL API to fetch live service metrics, CPU, memory, and estimated monthly billing.

4

AI Cost Tracking

Every AI request is logged in the `usage_log` table with provider, tokens, and cost. Recharts visualizes this over time.

Tech Stack

Frontend

  • React 18
  • Vite 5
  • TypeScript
  • MUI 7
  • Recharts

Auth

  • admin_token (localStorage)
  • Protected routes

APIs

  • NestJS Admin REST API
  • Railway GraphQL API

Deployment

  • Vercel

Interested in building something similar?

Get in Touch