Dashboard for managing rally discord bot built using vuejs

Rally Discord Bot Dashboard

Dashboard for managing rally discord bot built using vuejs, a tour of the UI is available in the getting started guide. This app is ready to be deployed on netlify. On deploy it is required to set the CLIENT_ID and BOT_API enviroment variables.

  • CLIENT_ID – app client ID obtained from discord
  • BOT_API – base url for the bot API, more info here on setting up the bot and API

Also add the following redirect URIs to your app on discord BASE_URL/ and BASE_URL/dashboard/home.

DEMO

If self hosting is not your thing you can start using the dashboard right away on the official site by visiting https://rallybot.app

Screenshot

TODO

Setup

  • Project
  • Components
  • Router
  • Store
  • I18n
  • Fetch API utils

Implement

  • Discord API intergration
  • Rally API intergration
  • Rally role bot API intergration(bot setup, commands, set role mapping, get role mappings etc)
  • Feature request form
  • Notification system
  • SSO
  • Tests

Development

Clone the repo

git clone https://github.com/Ju99ernaut/rally-discordbot-dashboard

Navigate into the repo

cd rally-discordbot-dashboard

Install dependencies

npm install

Start dev server

npm run serve

Production Build

npm run build

Lint files

npm run lint

Configuration

Add BASE_URL/ and BASE_URL/dashboard/home to your discord app’s redirect URIs

Fill in the config.js file

Setting Description
home Base URL of the dashboard site
clientId discord client ID
botApi Base URL for the discord bot API
githubHome repo homepage

config.js example

export default {
    home: "http://localhost:8080/",
    clientId: "786246670530773023",
    botApi: "http://localhost:8000",
    githubHome: "https://github.com/Ju99ernaut/rally-discordbot-dashboard",
    //...
}

feature request form

You will have to set it up in src/pages/FeatureRequest.vue

example google forms setup

create a google form with title and description field then click get prefilled link, you will get something like:
https://docs.google.com/forms/d/e/formID/formResponse?inputid1=""&inputid2=""
Fill in the submitRequest as shown below

submitRequest() {
    const obj = {
        "inputid1": this.title,
        "inputid2": this.description,
    };
    fetch(
        "https://docs.google.com/forms/d/e/" +
          "formID/formResponse" +
          queryString(obj),
        {
          mode: "no-cors",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
    });
    //...
},

GitHub

View Github