A Developer's Log: Building a Custom Dashboard for Our Discord Bot

For anyone running a custom Discord bot, you know that managing it with text commands can get old fast. I decided to take on a full-stack project to solve this: building a custom web dashboard from the ground up to give our admins a modern, user-friendly way to control the bot. This log is a quick look at what I've been working on.

The Architecture: A Two-Part System

The project is built like a modern web application, split into two main components that work together:

The Backend (The Brains): This is a Node.js application running 24/7 on a private server (VPS). It's the heart of the operation, running the Discord bot itself and hosting a private API that the website can talk to.
The Frontend (The Face): This is the sleek, user-friendly website built with Next.js and React. It's where admins log in to manage the bot through a graphical interface, making everything much faster and easier than typing commands.

Data Storage: Moving to the Cloud

At first, the bot would forget all its settings whenever it restarted. To fix this, I integrated a professional, cloud-hosted Supabase database. This provides a reliable and permanent home for all our data, such as server-specific settings and all the custom commands created through the dashboard. It's a huge step up from the initial setup and ensures no data is ever lost.

Security-First Design

Controlling a bot requires strong security. The dashboard is protected by a multi-layered system to ensure only the right people have access.

First, an Admin Whitelist at the login screen uses Discord's official login system but cross-references the user's ID against a pre-approved list. Only recognized admins can get past the login page.

Second, all communication between the website and the backend is protected by a Secret API Key. The backend will instantly reject any request that doesn't provide this key, which prevents unauthorized access from scripts or other external sources. This key is securely stored and is never exposed to the public.

The Dashboard Features

Once an admin logs in, they have a full suite of tools at their disposal:

Server Stats: A real-time overview of key metrics like member count, bot uptime, and API latency.
Secure Moderation: A panel to search for and manage server members, with buttons to kick or ban. This panel is built with safeguards to intelligently hide other admins, the server owner, and the bot itself from the search results to prevent accidents.
Custom Command Creator: A powerful interface for creating, editing, and deleting both traditional prefix (!) and modern slash (/) commands. You can design simple text replies or build complex, good-looking embeds directly from the UI.
Settings Panel: A central hub to configure all of the bot's features, from setting a custom "Playing" status to managing the ticket system and welcome messages.

Conclusion

This project has been a fantastic journey. Building a full-stack application from scratch, solving complex backend issues, and designing a secure, user-friendly interface has been an incredible learning experience. What started as a simple tool to manage a bot has grown into a robust, professional-grade dashboard that makes running our server a breeze.