Update Venue authored by Banu Sarikaya's avatar Banu Sarikaya
Hier kommen alle Infos zu dem neuen Frontend von Venue (ehemals Accelerator).
- Vorgehen? (Branching-Strategie, eigene Guidelines, ...)
- Aufbau (Klassendiagramm etc.)
- Testing (integrierte Testarten, How-To-Test, ...)
- Design (ggf. mit Styleguide)
- Verwendete Tools und Plugins
- Aufgaben für zukünftige Semester
[[_TOC_]]
## Einführung
......@@ -37,7 +28,7 @@ Um eine strukturierte Entwicklung zu gewährleisten folgen wir im Projekt der Fe
Im Master-Branch befindet sich die Hauptversion von Venue.
Für die Entwicklung neuer Funktionen verwenden wir Feature-Branches, die mit "venue-" beginnen, gefolgt von einer kurzen Beschreibung des Features, also "venue-featurebeschreibung".
**Aktuelle Featur-Branches:**
**Featur-Branches die wir beim Entwickeln erstellt haben:**
- **venue-meeting-room:** Hier arbeiten wir an den grundlegenden Funktionen für die Meeting Räume.
- **venue-settings:** Dieser Branch ist für die Profil und Setup Einstellungen zuständig.
- **venue-home:** Hier entwickeln wir die Startseite von Venue.
......@@ -60,6 +51,21 @@ Unsere Anwendung folgt einer komponentenbasierten Struktur, bei der jede UI-Einh
### Testing
## Dependencies
### [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.
### [TypeScript](https://www.typescriptlang.org/)
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.
### [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.
### [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.
## Design
In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben. Für das Desgin haben wir Google Fonts für Icons und ui.shadcn sowie Tailwind CSS für die allgemeinen UI-Elemente und das Styling verwendet. Diese ermöglichen eine schnelle und übereinstimmende Entwicklung und stellen sicher, dass das Design leicht anpassbar bleibt.
......@@ -102,16 +108,6 @@ Eine Alternative, die wir für die Icons in Betracht gezogen hatten, war das [Se
Mit diesem Styleguide stellen wir sicher, dass das Design von Venue nicht nur ästhetisch ansprechend, sondern auch benutzerfreundlich ist.
## Tools und Plugins
## Ausblick und Weiterentwicklung
- Offene Aufgaben
- Verbesserungsvorschläge
......
......