This project is a Rewrite of discord-bot-dashboard
Using typescript, vite 3, react 18 and chakra ui 2.0
- Support Light/Dark theme
- Multi languages support (i18n)
- Typescript support
- Nice UI & UX + Fast performance
- Flexiable and Customizable
- Detailed Documentation
Live Demo: https://demo-discord-dashboard.vercel.app/
- Only 'Welcome message' Feature is Supported
- The api might be down sometimes (It is using the free tier of Koyeb)
Light | Dark |
---|---|
![]() |
![]() |
As a template, you need to customize a few things in order to get it work
- Install Node.js, and a Package Manager (ex: npm or pnpm)
- Basic knowledge about React.js
- Able to read javascript/typescript
-
Clone the repo
git clone https://github.com/SonMooSans/discord-bot-dashboard-2.git
-
Install dependencies
NPM PNPM Yarn npm install
pnpm install
yarn install
-
Customize following files
- src/views/dashboard User Dashboard - Some states about the user
- src/views/home Home page - introduce your bot
- src/views/guild Guild Dashboard - The place to customize guild (ex: features, actions)
-
Define Features
The dashboard has built-in support for configuring features
Users are able to enable/disable features and config the feature after enabling itCustomize all typings in src/config/types/custom-types.ts
CustomFeatures
is used for defining features and options, see the example for more detailsOpen 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 example/MusicFeature.tsx to learn more -
Configure General Information
Modify src/config/common.tsx- Bot name & icon
- Invite url (example: https://discord.com/oauth2/authorize?client_id=1234&scope=bot)
- Guild settings
-
Configure Your API Endpoint url
You can define the API Endpoint by- Setting the
VITE_API_ENDPOINT
environment variable - Modify the default url in src/api/bot.ts (default: http://localhost:8080)
- Setting the
-
Done!
Start the app bynpm run dev
(depends on your package manager)
Then you should see the app started in port3000
We provide a built-in localizaion utils for you which is light-weight and type-safe
Create the provider
provider.ts
import { initLanguages, initI18n } from 'hooks/i18n';
import { useSettingsStore } from 'stores';
// Supported languages
export const { languages, names } = initLanguages<'en' | 'cn'>({
en: 'English',
cn: '中文',
});
// Create provider and export it
// We need to define how to get the current language
export const provider = initI18n({
getLang: () => useSettingsStore.getState().lang,
useLang: () => useSettingsStore((s) => s.lang),
});
Create the translation config (Default folder: src/config/translations)
test.ts
import { provider } from './provider'; //import the provider
import { createI18n } from 'hooks/i18n';
export const test = createI18n(provider, {
en: {
hello: 'Hello',
},
cn: {
hello: '你好',
},
});
Use it in any places
component.tsx
import {test} from 'config/translations/test'
export function YourComponent() {
const t = test.useTranslations();
return <>
<p>{t.hello}</p>
<test.T text='hello'>
</>
}
Create your OAuth2 application in https://discord.com/developers/applications
Login -> Discord OAuth -> Backend Server -> Client
- Open login url
In dev mode, it is thehttp://localhost:8080/login
Redirects user to discord oauth url - Open Discord OAuth url
- User authorizes the application
- Redirect back to backend server (http://localhost:8080/callback)
- Backend Server
- Store the access token in user cookies (You may encrypt the cooke)
- Redirect back to Frontend web app (http://localhost:3000)
- Web App updates State
You should see "Failed to login" after running the app, why?
That is because it failed to connect to backend server (Your bot)
As a frontend template, we doesn't provide an built-in Backend
Check src/api/bot.ts, it defined a built-in API for fetching data and authorization
You may extend it for more functions
GET /auth
- get access token (string)
- If not logged in, Respond null or 401 error
POST /auth/signout
- Sign out (ex: removing cookies)
GET /guilds/{guild}
- Get guild info (
custom-types.ts > CustomGuildInfo
) - Respond Null (in json) if bot hasn't joined the guild
GET /guilds/{guild}/features/{feature}
- Get Feature options (
custom-types.ts > CustomFeatures[K]
) - Respond 404 if not enabled
PATCH /guilds/{guild}/features/{feature}
- Update feature options
- With custom body (defined in
config/features
) - Respond updated feature options
POST /guilds/{guild}/features/{feature}
- Enable a feature
DELETE /guilds/{guild}/features/{feature}
- Disable a feature
GET /guilds/{guild}/roles
- Get Roles of the guild
- Responds a list of Role Object (Same as discord documentation)
GET /guilds/{guild}/channels
- Get Channels of the guild
- Responds a list of Guild Channel (Same as discord documentation)
Not recommended, but I had written the backend in different programming languages for the Live Demo
Kotlin: https://github.com/SonMooSans/discord-bot-dashboard-backend (2.0.0 branch)
Golang: https://github.com/SonMooSans/discord-bot-dashboard-backend-go
Node.js (Typescript): https://github.com/SonMooSans/discord-bot-dashboard-backend-ts
Feel free to ask a question by opening a issue
Love this project? Give this repo a star!