The Most Powerful Discord bot Dashboard Template
MIT License
Deprecated
Please consider other alternatives. You may continuously use it but no support will be provided.
Using Typescript, Next.js 13, React 18 and Chakra ui 2.0
Video: https://youtu.be/IdMPjT5PzVk Live Demo: https://demo-bot.vercel.app
Light | Dark |
---|---|
As a template, you need to customize a few things in order to get it work
Clone the repo
git clone https://github.com/fuma_nama/discord-bot-dashboard-next.git
Install dependencies
We always prefer PNpm
NPM | PNPM |
---|---|
npm install |
pnpm install |
Customize files The file structure of this project
Path | Description |
---|---|
src/pages/* | All the pages |
src/components/* | Components |
src/api/* | API utils |
src/config/* | Common configurations |
Define Features The dashboard has built-in support for configuring features Users are able to enable/disable features and config the feature after enabling it
Customize all typings in src/config/types/custom-types.ts
CustomFeatures
is used for defining features and options, see the example for more details
Open src/config/features You can see how a feature is configured
'feature-id': {
name: 'Feature name',
description: 'Description about this feature',
icon: <Icon as={BsMusicNoteBeamed} />, //give it a cool icon
useRender: (data) => {
//render the form
},
}
The useRender
property is used to render Feature Configuration Panel
Take a look at here for examples
Configure General Information Modify src/config/common.tsx
Configure Environment variables
Those variables in .env.example are required
You can define environment variables by creating a .env
file
Setup Backend Server In order to let the dashboard connected with your discord bot, you will need a backend server You can implement it in any programming languages
Read here for a guide to develop your own server
Done!
Start the app by pnpm run dev
(depends on your package manager)
Then you should see the app started in port 3000
We are using the API Routes of Next.js to handle Authorization
Open Discord Developer Portal
Create your OAuth2 application in https://discord.com/developers/applications
In <Your Application>
-> OAuth2 -> Redirects
Add <APP_URL>/api/auth/callback
url to the redirects
For Example: http://localhost:3000/api/auth/callback
This is required for Authorization
Login -> Discord OAuth -> API Routes -> Client
/api/auth/login
)/api/auth/callback
The Discord access token can be expired or unauthorized by the user
We will require the user to login again after getting 401
error from the Discord API
The refresh token won't be used, but you are able to customize the Authorization Flow
Check src/api/bot.ts, it defined a built-in API for fetching data
You can use express.js
(Node.js), Rocket
(Rust) or any libraries/languages to develop your own server
Usually the server runs along with your discord bot (in the same program)
Moreover, you can use redis instead of connecting to the bot server directly
The client will pass their access token via the Authorization
header
Bearer MY_TOKEN_1212112
You may extend it for more functions
GET /guilds/{guild}
custom-types.ts > CustomGuildInfo
)null
if bot hasn't joined the guildGET /guilds/{guild}/features/{feature}
custom-types.ts > CustomFeatures[K]
)PATCH /guilds/{guild}/features/{feature}
config/features
)POST /guilds/{guild}/features/{feature}
DELETE /guilds/{guild}/features/{feature}
GET /guilds/{guild}/roles
GET /guilds/{guild}/channels
Feel free to ask a question by opening a issue
Love this project? Give this repo a star!