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

🗯️ 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.
3. Run npm install to install all dependencies.
4. Run ng build to build the project.
5. Upload the content of the dist/ folder to your webserver.
6. 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:

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
}