/nextjsrepo

Primary LanguageTypeScriptMIT LicenseMIT

banner

Discord Bot Dashboard Template

Using Typescript, Next.js 13, 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

Video: https://youtu.be/IdMPjT5PzVk
Live Demo: https://demo-bot.vercel.app

  • Only 'Welcome message' Feature is Supported

Review (not the latest version)

Light Dark
light-mode dark-mode

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-next.git

  2. Install dependencies
    We always prefer PNpm

    NPM PNPM
    npm install pnpm install

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

  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 here for examples

  5. Configure General Information
    Modify src/config/common.tsx

  6. Configure Environment variables
    Those variables in .env.example are required
    You can define environment variables by creating a .env file

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

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

    Localization | Forms

Authorization

We are using the API Routes of Next.js to handle Authorization

Configure the Application

  1. Open Discord Developer Portal

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

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

Authorization Flow

Login -> Discord OAuth -> API Routes -> Client

  • Login (/api/auth/login)
    • Redirects user to discord oauth url
  • Open Discord OAuth url
    • User authorizes the application
    • Redirect back to /api/auth/callback
  • API Routes
    • Store the access token in http-only cookies
    • Redirect back to home page

Token Expiration

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

Backend Development

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

Official Example

Node.js (Typescript)

Authorization

The client will pass their access token via the Authorization header

Bearer MY_TOKEN_1212112

Required Routes

You may extend it for more functions

GET /guilds/{guild}

  • Get guild info (custom-types.ts > CustomGuildInfo)
  • Respond 404 or null 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)

Any issues?

Feel free to ask a question by opening a issue

Love this project? Give this repo a star!