@@ -47,28 +47,34 @@ Unsere Anwendung folgt einer komponentenbasierten Struktur, bei der jede UI-Einh
-**Hauptkomponenten**: Diese umfassen die grundlegenden Strukturen der Anwendung wie das Hauptmenü, die Settings und allgemein die Meetingräume.
-**UI-Komponenten**: Diese beinhalten kleinere, wiederverwendbare Elemente wie Buttons, Eingabefelder und Icons.
### Kommunikation Backend
### Testing
## Dependencies
### [React](https://react.dev/)
### Frontend
#### [React](https://react.dev/)
Nach sorgfältiger Abwägung der verfügbaren Optionen standen wir vor der Entscheidung zwischen zwei Frameworks: React und Vue. Vue ist bekannt dafür, das am einfachste zu erlernende JavaScript Framework zu sein. React hingegen zeichnet sich durch Leistungsfähigkeit, Skalierbarkeit und die Unterstützung durch eine große Entwickler-Community aus. Letztendlich fiel unsere Wahl auf React.
React bietet eine große und aktive Community sowie eine breite Palette an Ressourcen und Modulen und ermöglicht die Erstellung wiederverwendbarer, maßgeschneiderter Komponenten. Die komponentenbasierte Architektur von React ist hilfreich bei der Entwicklung, da sie eine effiziente Code-Organisation und eine gute Wiederverwendbarkeit von Code ermöglicht.
Ein weiterer Entscheidungspunkt war die Performance. Die Verwendung des virtuellen DOMs in React gewährleistet eine flüssige Benutzererfahrung, da nur die veränderten Komponenten aktualisiert werden müssen, was zu schnelleren Ladezeiten führt. Zudem unterstützt React die Einweg Datenbindung, was die Datenflüsse leichter zu handhaben macht.
Wir haben uns dafür entschieden, TypeScript in unserem Projekt zu verwenden. TypeScript fügt JavaScript statische Typisierung hinzu, was die Entwicklung erleichtert und dabei hilft, viele Fehler bereits zur Entwicklungszeit zu erkennen. Dies führt zu einer verbesserten Entwicklererfahrung und macht den Code besser skalierbar und strukturierter.
Tailwind CSS ist ein fortschrittliches CSS-Framework, das auf dem Utility-First-Ansatz basiert und Low-Level-CSS-Klassen in PostCSS bereitstellt. Tailwind wurde für das CSS-Styling verwendet, um das Erstellen separater CSS-Dateien zu vermeiden und stattdessen ausschließlich mit Klassen zu arbeiten.
### [Shadcn/UI](https://ui.shadcn.com/)
#### [Shadcn/UI](https://ui.shadcn.com/)
Shadcn/UI ist eine Sammlung von UI-Komponenten, die speziell für die Integration mit React-Anwendungen entwickelt wurden. Diese Komponenten sind Barrierefrei implementiert, anpassbar und Open Cource, was uns eine große Flexibilität bietet. Die Bibliothek bietet eine Vielzahl vorgefertigter Komponenten, darunter Dashboards, Karten, Formulare und mehr. Dabei können die Komponenten leicht an spezifische Designanforderungen angepasst werden.
### [MUI (Material UI)](https://mui.com/)
#### [MUI (Material UI)](https://mui.com/)
MUI ist eine beliebte React-Komponentenbibliothek, die auf Google's Material Design basiert. Sie bietet eine breite Palette an vorgefertigten, stilvollen und anpassbaren UI-Komponenten. Eine Alternative, die wir für die Icons in Betracht gezogen hatten, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch haben wir uns aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für das Material Icons entschieden.
### Backend
#### [Socket.IO](https://socket.io/)
Socket.IO ist eine Bibliothek, die eine latenzarme, bidirektionale und ereignisbasierte Kommunikation zwischen Client und Server ermöglicht.
Der bidirektionale Kanal zwischen dem Socket.IO-Server (Node.js) und dem Socket.IO-Client (Browser, Node.js etc.) wird, wenn möglich, mit einer WebSocket-Verbindung hergestellt und verwendet als Fallback HTTP Long-Polling.
Die Socket.IO-Codebasis ist in zwei unterschiedliche Ebenen aufgeteilt: die Low-Level-Infrastruktur, die als Engine.IO bezeichnet wird, und die High-Level-API, die Socket.IO selbst darstellt. Engine.IO ist für die Herstellung der Low-Level-Verbindung zwischen Server und Client verantwortlich.
## Design
In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben.
