Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/razzerde/clank-dashboard

🛠️ This dashboard allows you to configure & customize my own Discord bot "Clank" without needing to use Discord directly.
https://github.com/razzerde/clank-dashboard

angular bot bot-dashboard chatbot dashboard dashboard-application dashboards discord discord-bot discordbot

Last synced: 9 days ago
JSON representation

🛠️ This dashboard allows you to configure & customize my own Discord bot "Clank" without needing to use Discord directly.

Awesome Lists containing this project

README 

        


     🛠️ Clank-Dashboard ~ Creative dashboard for discord-bots






  This dashboard allows you to configure & customize my own Discord bot "Clank" without needing to use Discord directly. 
It doesn't include the backend functionalities.

  




  








  

    angular version

  

  

    tailwind version

  

   

    discord server

  

  

    animate.css version

  

  

    jest version

  

  





## 🗯️ Introduction

› This project provides the frontend for the dashboard of my own public Discord bot "Clank" and is also actively used to configure modules and general settings of it. I hope that maybe some people can learn something from it when they look at the project.



💝 › The project was developed by Yannic Drews and is actively maintained - user requests are welcome and are actively discussed together with a small Discord server team. :)



## 🪛 What can i learn?

› `Clank Dashboard` offers some fundamental features that help you better understand or apply basic concepts in certain areas.





📢 › This project uses a handful third-party libraries: `Tailwind`, `Bootstrap`, `JEST` and `Animate.css`.



It supports following features:

     

      
  • 🖼️ Creative & beautiful design: We have put a lot of thought into the design of the website and wanted it to be something unique - we have put a lot of love and attention to detail into it.
    • 

      
     

      
  • 💚 100% Unit-Test Coverage: Software testing is an important point when programming professionally for clients - we have tested all our TypeScript code, and you may be able to learn something from it.
    •  

      
     

      
  • 🚩 Language Switcher: Our website automatically detects the language of your browser and displays English/German accordingly, alternatively the user can switch via button click.
    •  

      
     

      
  • 📱 Responsive for all Devices: We have put a special focus on ensuring that the website is beautifully and user-friendly displayed on as many devices as possible.
    •  

      
     

      
  • 👥 Discord-Login: To log in to the dashboard, the respective user must authenticate with Discord.
    • 

      
     

      
  • 🎈 Catchy Animations: As soon as an object comes into the user's field of view, a beautiful animation is played if applicable.
    •  

      
     

      
  • 🔺 Work with API-Data: Here you can see how API data from a REST server could be processed.
    • 

      
     

      
  • 🔍 Search function: Users can search for specific functions or pages in the bot's dashboard if they are logged in.
    •  

      
     

      
  • ⏳ Page-Loader: While the website is being built and all data is loading, a nice animated icon is displayed, which was built entirely with CSS.
    •  




⚙️ › To run the test coverage and see the results, just open a terminal in the project root folder and run the command `jest`.



## 🔨 Installation

› Before you can start exploring our small website for learning purposes, there are a few preparations you need to make.



💡 › You will need a own Backend RESTful-Service in order to test the API functionality.



Follow these steps to ensure everything runs smoothly:

1. Clone the project and navigate with a terminal to the project root folder.

2. Set up the configuration in `src/environments/config.ts` to your needs.

4. Run `npm install` to install all dependencies.

5. Run `ng build` to build the project.

6. Upload the content of the `dist/` folder to your webserver.

7. visit the page of your webserver - HAVE FUN!



🪛 › I don't have a webserver: Thats not a problem! Just use `ng serve` instead of `ng build` and open the page `localhost:4200` in your web browser.



## ❓ Configuration Example

› You need to create the configuration file `src/environments/config.ts` in order to let the discord login & api calls work.



An example of the configuration could look like this:

```ts

export const config = {

  domain: 'http://localhost:4200',

  api_url: 'http://localhost:8081',  // used for general api calls

  discord_url: 'https://discord.com/api/v10',  // used for the discord oauth2

  redirect_url: 'http://localhost:4200/dashboard',  // used for the discord oauth2

  client_id: 'YOUR_DISCORD_CLIENT_ID'  // used for the discord oauth2

}

```