BL4CKLIST・CODING•2mo ago

Clank-Dashboard - Dashboard eines Discord-Bots

Dies ist (m)ein modernes Web‑Dashboard, entwickelt mit TypeScript und Angular, das es ermöglicht, den Discord‑Bot „Clank“ vollständig via grafischer Oberfläche zu konfigurieren – ganz ohne direkt Discord nutzen zu müssen. Das wurde sich sehr häufig von Usern hier gewünscht und daher wollte ich das (zumindest) das Frontend auch Open-Source machen. 🎯 ~ Ziel & Motivation Das Dashboard zielt darauf ab, dem Bot-Admin (oder wer auch immer es einstellt) ein intuitives Interface zu bieten, um Einstellungen, Befehle und Funktionen schnell und visuell zu verwalten: - ⚙️ Konfiguration im Frontend: Alle Bot-Einstellungen die auch in Discord durchgeführt werden können, sind hier ebenfalls möglich. - 😎 Einfache Bedienung: Keine Notwendigkeit Discord-Befehle manuell einzugeben - das meiste erfolgt simpel über Klicks. - 🤖 Automatisierung und Kontrolle: Alles, was sonst über Befehle erfolgen müsste, wird per GUI zugänglich und benutzerfreundlich. ✅ ~ Features - 🖼️ Kreatives & wunderschönes Design: Ich habe einen HAUFEN an Arbeit daran investiert, dass das Design so ansprechend wie möglich für den Endnutzer aussieht und es sollte etwas besonderes sein. - 💚 100% Unit-Test Coverage: Software-Testing ist ein sehr wichtiger Punkt wenn man "Coding" professionell tun möchte für Kunden - daher ist das gesamte Frontend auch mit JEST in Unit-Tests getestet. - 🚩 Sprachwechsler integriert: Da der Bot auch international Discord-Server unterstützen soll, haben wir natürlich auch im Frontend darauf geachtet, dass alles auf Englisch/Deutsch sichtbar ist. - 📱 Responsiv für alle Geräte: Auch dies war ein wichtiges Kriterium für uns, allerdings auch ein schweres. Natürlich ist das Design für Full-HD Monitore gedacht, aber man sollte in der Regel keine Probleme mit kleineren Monitoren haben. - 👥 Discord-Login: Das 2. Mal in meinem Leben habe ich an einer externen Login-Funktionalität gewerkelt und es war sehr interessant zu sehen wie sie funktioniert. - 🎈 Catchy Animationen: Viele Elemente auf dieser Webseite bieten viele Animationen an, wodurch die Webseite nicht so "statisch" aussieht. - 🔺 Arbeiten mit APIs: Es basiert auf eine eigene entwickelte Rest-API, die das Frontend regelmäßig mit Daten versorgt.

und mehr, mehr, und noch viel mehr - Es ist bisher mein größtes Projekt, schaut es euch gerne auf Github an und lasst ein ⭐ da: https://github.com/RazzerDE/clank-dashboard

🧩 Tech Stack - Frontend: Angular mit TypeScript - moderne Struktur, komponentenbasiert und optimal geeignet für Dashboards und generell große Projekte. - Externe Libraries: Tailwind, Animate.css, JEST werden ebenfalls verwendet. - Backend: REST-API in Java - hier gehe ich allerdings nicht so genau darauf ein, um die Sicherheit nicht negativ zu beeinflussen 😛 - Datenbank: MariaDB mit einem Fokus auf SQL Normalformen

GitHub

GitHub - RazzerDE/clank-dashboard: 🛠️ This dashboard allows yo...

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