Prepare final project submission

2026-06-13 22:51:56 +02:00 · 2026-06-13 22:51:56 +02:00 · f4a55882ac
commit f4a55882ac
parent 7c6fed961e
10 changed files with 44 additions and 41 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.env.example
+++ b/.env.example
@ -0,0 +1 @@
+TM_API_KEY=your_ticketmaster_api_key
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,3 @@
 node_modules/
+.DS_Store
+__MACOSX/
--- a/README.md
+++ b/README.md
@ -45,24 +45,33 @@ cd AISE_FS26-FrontendEntwicklungProjekt
 npm install
 ```

-### 3. Umgebungsvariable konfigurieren
+### 3. Umgebungsvariablen / Ticketmaster API

-Erstelle eine `.env`-Datei im Projektstamm:
+Für die Bewertung enthält die Abgabe bereits eine vorkonfigurierte `.env`-Datei, sodass die Anwendung ohne zusätzliche Konfiguration gestartet werden kann.
+
+In einer regulären Installation muss eine eigene `.env`-Datei im Projektstamm erstellt werden:

 ```env
-TM_API_KEY=dein_ticketmaster_api_key
+TM_API_KEY=your_ticketmaster_api_key
 ```

-Den API-Key erhältst du kostenlos unter [developer.ticketmaster.com](https://developer.ticketmaster.com).  
-*(Zum Testen ist im Repository vorübergehend ein Key hinterlegt.)*
+Ein kostenloser API-Key kann über das Ticketmaster Developer Portal bezogen werden:
+
+https://developer.ticketmaster.com/
+
+Zusätzlich ist eine `.env.example`-Datei enthalten, welche die erwartete Struktur der Umgebungsvariablen dokumentiert.

 ### 4. Backend-Server starten

 ```bash
-node server/server.js
+npm start
 ```

-Ausgabe: `Server läuft auf http://localhost:3000`
+Ausgabe:
+
+```text
+Server läuft auf http://localhost:3000
+```

 ### 5. Frontend öffnen

@ -124,26 +133,26 @@ Alle KI-generierten Vorschläge wurden kritisch geprüft, angepasst und manuell

 ## Selbstreflexion

-**Herausforderungen:**
+### Herausforderungen

- **Externe API-Integration**: Die Ticketmaster-API hat eine komplexe, verschachtelte JSON-Struktur. Das Mapping auf ein einfaches Datenmodell erforderte sorgfältige Analyse und optionale Chaining (`?.`).
- **Modulstruktur ohne Framework**: Die klare Trennung in `api/`, `services/`, `ui/` ohne ein Framework erforderte bewusste Architekturentscheidungen.
- **Statuscode-Konventionen**: Die korrekte Verwendung von HTTP-Statuscodes (201 für Ressource-Erstellung, 200 für erfolgreichen GET) musste erst explizit reflektiert werden.
- **XSS-Bewusstsein**: Das Risiko von `innerHTML` mit externen Daten war nicht von Anfang an präsent und wurde erst im Code-Review erkannt.
+* **Frontend-Backend-Integration:** Die Kommunikation zwischen Frontend, Backend und Ticketmaster API musste zuverlässig koordiniert werden.
+* **Verschachtelte Ticketmaster-Daten:** Die komplexe JSON-Struktur der API erforderte eine zusätzliche Service-Schicht zur Datenaufbereitung.
+* **Modularisierung:** Mit wachsendem Funktionsumfang wurde eine klare Trennung der Verantwortlichkeiten immer wichtiger.

-**Lerneffekte:**
+### Lerneffekte

- Tiefes Verständnis für Async/Await und Fehlerbehandlung in JavaScript
- Sensibilisierung für OWASP-Risiken bereits beim Schreiben von Frontend-Code
- Wert von semantischem HTML5 und Accessibility für Barrierefreiheit und SEO
+* **Integration erhöht die Komplexität:** Mehrere Systeme müssen konsistent zusammenarbeiten.
+* **Kleine Änderungen können grosse Auswirkungen haben:** Sichere Praktiken wie die Verwendung von `textContent` helfen, Fehler und Sicherheitsrisiken zu vermeiden.
+* **Modulare Architektur verbessert die Wartbarkeit:** Klare Strukturen erleichtern Entwicklung, Fehlersuche und Erweiterungen.

 ---

 ## Gruppenmitglieder und Rollen

-| Name | Rolle | Schwerpunkte |
-|---|---|---|
-| **Nicola Augsburger** | Frontend & Backend | Einladungssystem (Frontend + Backend), Authentifizierung, App-Architektur 
-| **Karolina Thöny-Tyganova** | Frontend & API | Ticketmaster-API-Integration, Suchfunktion, Filterlogik | Event-Karten-Komponente, CSS-Styling, Responsives Layout |
+| Name                        | Rolle              | Schwerpunkte                                                                                                      |
+| --------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| **Nicola Augsburger**       | Frontend & Backend | Einladungssystem (Frontend + Backend), Authentifizierung, App-Architektur                                         |
+| **Karolina Thöny-Tyganova** | Frontend & API     | Ticketmaster-API-Integration, Suchfunktion, Filterlogik, Event-Karten-Komponente, CSS-Styling, Responsives Layout |
+

 Die individuelle Beteiligung ist in den Git-Commits auf [gitea.fhgr.ch](https://gitea.fhgr.ch/augsbunicola/AISE_FS26-FrontendEntwicklungProjekt) nachvollziehbar.
--- a/css/components.css
+++ b/css/components.css
@ -247,22 +247,22 @@
  margin-bottom: 0.35rem;
 }

-.auth-input {
-  border: 1.5px solid var(--color-border) !important;
-  border-radius: var(--radius-sm) !important;
+.auth-modal-body .form-control.auth-input {
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  height: 42px;
  color: var(--color-text);
-  background: var(--color-bg) !important;
+  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
 }

-.auth-input:focus {
-  border-color: var(--color-accent) !important;
-  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
+.auth-modal-body .form-control.auth-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
  outline: none;
-  background: var(--color-surface) !important;
+  background: var(--color-surface);
 }

 .auth-error {
--- a/js/api/ticketmaster.js
+++ b/js/api/ticketmaster.js
@ -25,7 +25,6 @@ export async function fetchEvents(city) {
    return data._embedded?.events || [];

  } catch (error) {
-    console.error("Fehler beim Laden der Events:", error);
    // Fehler nach oben weitergeben, damit app.js ihn dem Nutzer anzeigen kann
    throw error;
  }
--- a/js/app.js
+++ b/js/app.js
@ -133,7 +133,6 @@ modalLoginBtn.addEventListener("click", async () => {
  } catch (err) {
    loginError.textContent = "Verbindungsfehler. Ist der Server erreichbar?";
    loginError.hidden = false;
-    console.error("Login-Fehler:", err);
  } finally {
    modalLoginBtn.disabled    = false;
    modalLoginBtn.textContent = "Anmelden";
@ -192,7 +191,6 @@ modalRegBtn.addEventListener("click", async () => {
    registerError.hidden      = false;
    modalRegBtn.disabled    = false;
    modalRegBtn.textContent = "Konto erstellen";
-    console.error("Registrierungs-Fehler:", err);
  }
 });

@ -245,7 +243,6 @@ async function handleSearch() {
    renderEventList(filtered, eventListEl);
  } catch (err) {
    showError(eventListEl, "Fehler beim Laden der Events. Bitte erneut versuchen.");
-    console.error("Such-Fehler:", err);
  }
 }

@ -387,7 +384,6 @@ async function loadInvitations() {

  } catch (err) {
    showError(container, "Fehler beim Laden der Einladungen.");
-    console.error("Einladungs-Fehler:", err);
  }
 }

@ -487,7 +483,6 @@ async function respondToInvitation(id, action, card) {
    errEl.className   = "text-danger small mt-1";
    errEl.textContent = "Fehler beim Antworten auf die Einladung.";
    card.appendChild(errEl);
-    console.error("Antwort-Fehler:", err);
  }
 }

@ -512,7 +507,6 @@ async function deleteInvitation(id, card) {
    errEl.className   = "text-danger small mt-1";
    errEl.textContent = "Fehler beim Löschen der Einladung.";
    card.appendChild(errEl);
-    console.error("Lösch-Fehler:", err);
  }
 }

--- a/js/ui/eventCard.js
+++ b/js/ui/eventCard.js
@ -188,7 +188,6 @@ function createInviteForm(event, card) {
      sendBtn.disabled = false;
      sendBtn.textContent = "Senden";
      showCardMessage(card, err.message || "Fehler beim Senden der Einladung.", "danger");
-      console.error("Einladungs-Fehler:", err);
    }
  });

--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "aise_fs26-frontendentwicklungprojekt",
  "version": "1.0.0",
-  "description": "Frontend Project for cds-208 at FHGR   Collaborators: Pascal Schieman, Nicola Augsburger, Karolina Thöny-Tyganova ## Project Description **Find your next event in seconds.** Encore is a modern event discovery frontend that brings Ticketmaster events directly to users through a clean, intelligent interface. Instead of sifting through cluttered listings, users can instantly browse concerts, sports, theater, and entertainment by location, date, and category—then dive into event details to make informed decisions fast.",
+  "description": "Frontend Project for cds-208 at FHGR   Collaborators: Nicola Augsburger, Karolina Thöny-Tyganova ## Project Description **Find your next event in seconds.** Encore is a modern event discovery frontend that brings Ticketmaster events directly to users through a clean, intelligent interface. Instead of sifting through cluttered listings, users can instantly browse concerts, sports, theater, and entertainment by location, date, and category—then dive into event details to make informed decisions fast.",
  "main": "index.js",
  "scripts": {
    "start": "node server/server.js"
--- a/server/server.js
+++ b/server/server.js
@ -52,7 +52,6 @@ app.get("/api/events", async (req, res) => {

    res.json(data);
  } catch (error) {
-    console.error("Ticketmaster-Fehler:", error);
    res.status(500).json({ message: "Fehler beim Laden der Events" });
  }
 });