Tech Stack
Overview
Distats Panel is built on a modern, minimal stack that prioritizes type safety, developer experience, and local-first operation.
Core technologies
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16 | Full-stack React framework (App Router) |
| React | 19 | UI rendering |
| TypeScript | 5 | Static typing throughout the project |
| Tailwind CSS | 4 | Utility-first styling |
Authentication & Security
| Technology | Purpose |
|---|---|
Node.js crypto.scrypt | Password hashing with random salt |
| jose | JWT creation, signing, and verification |
| HTTP-only cookies | Secure JWT session storage |
| Next.js middleware | Route-level authentication enforcement |
Database
| Technology | Purpose |
|---|---|
| SQLite3 | Local user database — no cloud service required |
The database file is stored at @distats_panel/database.sqlite inside your panel directory. It is initialized automatically on first run.
UI & Animation
| Technology | Purpose |
|---|---|
| shadcn/ui | Accessible UI primitives (Sheet, Pagination, Button, etc.) |
| Radix UI | Headless component primitives |
| Framer Motion | Page transitions and count-up animations |
| iconsax-react | Icon set used throughout the dashboard |
Discord Integration
Distats Panel does not use a Discord.js bot or WebSocket connection. Instead, it uses the Discord REST API directly:
- Bot info, avatar, and username — fetched via
GET /api/v10/users/@me - Gateway latency — fetched via
GET /api/v10/gateway - Guild (server) list — fetched via
GET /api/v10/users/@me/guilds - Guild details — fetched via
GET /api/v10/guilds/:id?with_counts=true
This keeps the panel lightweight and does not require running a persistent bot process alongside the dashboard.
Because the panel reads from the Discord REST API, your bot token must be valid and the bot must already be in the servers you want to inspect.