This project has been deprecated, please use discord-bot-dashboard-next instead
Github Repository

Mordern Discord Bot

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-bot.vercel.app/

• Only 'Welcome message' Feature is Supported
• The api might be down sometimes (It is using the free tier of Koyeb)

Review (might not the latest version)

Light	Dark

Getting Started

As a template, you need to customize a few things in order to get it work

Before that

• Install Node.js, and a Package Manager (ex: npm or pnpm)

Required Skills

• Basic knowledge about React.js
• Able to read javascript/typescript

Set up

1. Clone the repo
   git clone https://github.com/SonMooSans/discord-bot-dashboard-2.git

2. Install dependencies

   NPM	PNPM	Yarn
   npm install	pnpm install	yarn install

3. 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)

4. 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 example/MusicFeature.tsx to learn more

5. 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

6. 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)

7. Done!
   Start the app by npm run dev (depends on your package manager)
   Then you should see the app started in port 3000

Localization

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'>
  </>
}

Authorization

Create your OAuth2 application in https://discord.com/developers/applications

Login -> Discord OAuth -> Backend Server -> Client

• Open login url
  In dev mode, it is the http://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

Backend Development

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

Required Routes

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)

Example Backend used for Demo?

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

Any issues?

Feel free to ask a question by opening a issue

Love this project? Give this repo a star!