Tuesday, 17 May, 2022 UTC

Dashboard for managing rally discord bot built using vuejs

Dashboard for managing rally discord bot built using vuejs

Summary

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
  • initial template
  • theme
  • charts
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

... more @ vuejsexamples.com

vuejsexamples.com