---
title: Tech Stack
type: conceptual
summary: An overview of every technology used in Distats Panel and why it was chosen.
related:
  - /docs/getting-started
  - /docs/features
---

# Tech Stack



Overview [#overview]

Distats Panel is built on a modern, minimal stack that prioritizes type safety, developer experience, and local-first operation.

Core technologies [#core-technologies]

| Technology                                    | Version | Purpose                                 |
| --------------------------------------------- | ------- | --------------------------------------- |
| [Next.js](https://nextjs.org/)                | 16      | Full-stack React framework (App Router) |
| [React](https://react.dev/)                   | 19      | UI rendering                            |
| [TypeScript](https://www.typescriptlang.org/) | 5       | Static typing throughout the project    |
| [Tailwind CSS](https://tailwindcss.com/)      | 4       | Utility-first styling                   |

Authentication & Security [#authentication--security]

| Technology                            | Purpose                                 |
| ------------------------------------- | --------------------------------------- |
| Node.js `crypto.scrypt`               | Password hashing with random salt       |
| [jose](https://github.com/panva/jose) | JWT creation, signing, and verification |
| HTTP-only cookies                     | Secure JWT session storage              |
| Next.js middleware                    | Route-level authentication enforcement  |

Database [#database]

| Technology                                          | Purpose                                         |
| --------------------------------------------------- | ----------------------------------------------- |
| [SQLite3](https://github.com/TryGhost/node-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 [#ui--animation]

| Technology                                        | Purpose                                                    |
| ------------------------------------------------- | ---------------------------------------------------------- |
| [shadcn/ui](https://ui.shadcn.com/)               | Accessible UI primitives (Sheet, Pagination, Button, etc.) |
| [Radix UI](https://www.radix-ui.com/)             | Headless component primitives                              |
| [Framer Motion](https://motion.dev/)              | Page transitions and count-up animations                   |
| [iconsax-react](https://iconsax-react.pages.dev/) | Icon set used throughout the dashboard                     |

Discord Integration [#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.

<Callout emoji="💡">
  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.
</Callout>