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 | Dashboard (Logged In) |
› 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. :)
› 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.
› You need to invite our discord-bot Clank to your discord-server.
After that, you can open this dashboard here: https://clank.dev