https://github.com/RazzerDE/clank-bot-dashboard

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

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

Last synced: 8 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/RazzerDE/clank-bot-dashboard
• Owner: RazzerDE
• License: mit
• Created: 2024-11-17T21:32:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-25T22:52:17.000Z (over 1 year ago)
• Last Synced: 2025-01-25T23:31:58.102Z (over 1 year ago)
• Topics: angular, bot, bot-dashboard, chatbot, dashboard, dashboard-application, dashboards, discord, discord-bot, discordbot
• Language: TypeScript
• Homepage: https://clank.dev
• Size: 26.4 MB
• Stars: 19
• Watchers: 1
• Forks: 4
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

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.

  



| ![Landing Page](https://i.imgur.com/xYCoqv5.png) | ![Dashboard (Logged In)](https://i.imgur.com/O5DPJkI.png) |

|:------------------------------------------------:|:---------------------------------------------------------:|

|                 **Landing Page**                 |                 **Dashboard (Logged In)**                 |






  





  

    

  

  

    

  

  

    

  

  

    

  

  






 

    

  

  

 

   

 



## 🗯️ 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.
 

  
 

  
⚙️ Server-Side-Rendering: The landing page inside this little dashboard is using Angular's SSR to be optimized for Google and as fast as possible.
 

  
 

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

  
 

  
📒 Drag-& Drop: For some functionalities, we're using Drag-& Drop angular mechanics to make the list management more easier.

  
 

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

## 🔨 Usage

› You need to invite our discord-bot Clank to your discord-server.

After that, you can open this dashboard here: https://clank.dev