The Void — Admin Dashboard

A fullstack admin dashboard for The Void fashion e-commerce brand. Built with NestJS, Supabase, and Astro — featuring real-time data management, JWT authentication, and a dark editorial UI.

Live Demo: https://the-void-dashboard-ui.vercel.app
Backend API: https://the-void-dashboard.onrender.com

---

Features

• Authentication — JWT-based login with protected routes and session management
• Products — Full CRUD with modal forms, animated table rows, and confirmation dialogs
• Orders — Real-time status updates (Pending, Completed, Cancelled) with color-coded badges
• Inventory — Stock tracking with customizable low-stock alerts per product
• Overview — KPI dashboard showing total revenue, orders, active listings, and low stock count
• Animations — GSAP-powered entrance animations on all pages

---

Tech Stack

Backend

• NestJS — Modular Node.js framework
• Supabase — PostgreSQL database + REST API
• JWT — Authentication with bcrypt password hashing
• TypeScript — Full type safety

Frontend

• Astro — Static site generation with server-side data fetching
• TailwindCSS v4 — Utility-first styling
• GSAP — Professional animations
• TypeScript — Full type safety

Infrastructure

• Vercel — Frontend deployment
• Render — Backend deployment
• GitHub — Version control (separate repos for frontend and backend)

---

Architecture

the-void-dashboard/          # NestJS Backend
├── src/
│   ├── auth/                # JWT authentication
│   ├── products/            # Products CRUD
│   ├── orders/              # Orders management
│   ├── inventory/           # Inventory tracking
│   └── supabase/            # Database client

the-void-dashboard-ui/       # Astro Frontend
├── src/
│   ├── layouts/             # DashboardLayout with auth guard
│   ├── pages/               # Overview, Products, Orders, Inventory, Login
│   └── styles/              # Global CSS with design tokens

---

Database Schema

products     — id, name, description, price, category, image_url, created_at
inventory    — id, product_id, stock, low_stock_alert, updated_at
orders       — id, customer_name, customer_email, total, status, created_at
order_items  — id, order_id, product_id, quantity, price
users        — id, email, password, role, created_at

---

API Endpoints

POST   /auth/register
POST   /auth/login

GET    /products
POST   /products
PATCH  /products/:id
DELETE /products/:id

GET    /orders
POST   /orders
PATCH  /orders/:id/status

GET    /inventory
GET    /inventory/low-stock
PATCH  /inventory/:productId

---

Local Development

Backend

git clone https://github.com/KeymelGaston/the-void-dashboard
cd the-void-dashboard
npm install

Create a .env file:

SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_anon_key
JWT_SECRET=your_jwt_secret

npm run start:dev
# API running at http://localhost:3000

Frontend

git clone https://github.com/KeymelGaston/the-void-dashboard-ui
cd the-void-dashboard-ui
npm install

Create a .env file:

PUBLIC_API_URL=http://localhost:3000

npm run dev
# Dashboard running at http://localhost:4321

---

Roadmap

• Role-based access control (admin, manager, staff)
• Staff management page
• Sales analytics with charts
• Product image upload
• Order creation from dashboard

---

Related Projects

• The Void — E-commerce Store — The storefront this dashboard manages
• Luminary Studio — Photography agency landing page

---

Built by Keymel Gaston