.env.example

@@ -1 +0,0 @@
-TM_API_KEY=your_ticketmaster_api_key

.gitignore

@@ -1,3 +1 @@
-node_modules/
-.DS_Store
-__MACOSX/
+node_modules/

README.md

@@ -45,33 +45,24 @@ cd AISE_FS26-FrontendEntwicklungProjekt
 npm install
 ```
 
-### 3. Umgebungsvariablen / Ticketmaster API
+### 3. Umgebungsvariable konfigurieren
 
-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:
+Erstelle eine `.env`-Datei im Projektstamm:
 
 ```env
-TM_API_KEY=your_ticketmaster_api_key
+TM_API_KEY=dein_ticketmaster_api_key
 ```
 
-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.
+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.)*
 
 ### 4. Backend-Server starten
 
 ```bash
-npm start
+node server/server.js
 ```
 
-Ausgabe:
-
-```text
-Server läuft auf http://localhost:3000
-```
+Ausgabe: `Server läuft auf http://localhost:3000`
 
 ### 5. Frontend öffnen
 
@@ -133,26 +124,27 @@ Alle KI-generierten Vorschläge wurden kritisch geprüft, angepasst und manuell
 
 ## Selbstreflexion
 
-### Herausforderungen
+**Herausforderungen:**
 
-* **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.
+- **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.
 
-### Lerneffekte
+**Lerneffekte:**
 
-* **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.
+- 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
 
 ---
 
 ## 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 |
+| **Pascal Schieman** | Frontend | Event-Karten-Komponente, CSS-Styling, Responsives Layout |
+| **Karolina Thöny-Tyganova** | Frontend & API | Ticketmaster-API-Integration, Suchfunktion, Filterlogik |
 
-
-Die individuelle Beteiligung ist in den Git-Commits auf [gitea.fhgr.ch](https://gitea.fhgr.ch/augsbunicola/AISE_FS26-FrontendEntwicklungProjekt) nachvollziehbar.
+Die individuelle Beteiligung ist in den Git-Commits auf [gitea.fhgr.ch](https://gitea.fhgr.ch/augsbunicola/AISE_FS26-FrontendEntwicklungProjekt) nachvollziehbar.

css/components.css

@@ -247,22 +247,22 @@
   margin-bottom: 0.35rem;
 }
 
-.auth-modal-body .form-control.auth-input {
-  border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-sm);
+.auth-input {
+  border: 1.5px solid var(--color-border) !important;
+  border-radius: var(--radius-sm) !important;
   font-family: inherit;
   font-size: 0.9rem;
   height: 42px;
   color: var(--color-text);
-  background: var(--color-bg);
+  background: var(--color-bg) !important;
   transition: border-color var(--transition), box-shadow var(--transition);
 }
 
-.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);
+.auth-input:focus {
+  border-color: var(--color-accent) !important;
+  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
   outline: none;
-  background: var(--color-surface);
+  background: var(--color-surface) !important;
 }
 
 .auth-error {
@@ -348,4 +348,4 @@ select:focus-visible,
 a:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
-}
+}

js/api/ticketmaster.js

@@ -25,6 +25,7 @@ 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;
   }

js/app.js

@@ -133,6 +133,7 @@ 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";
@@ -191,6 +192,7 @@ modalRegBtn.addEventListener("click", async () => {
     registerError.hidden      = false;
     modalRegBtn.disabled    = false;
     modalRegBtn.textContent = "Konto erstellen";
+    console.error("Registrierungs-Fehler:", err);
   }
 });
 
@@ -243,6 +245,7 @@ async function handleSearch() {
     renderEventList(filtered, eventListEl);
   } catch (err) {
     showError(eventListEl, "Fehler beim Laden der Events. Bitte erneut versuchen.");
+    console.error("Such-Fehler:", err);
   }
 }
 
@@ -384,6 +387,7 @@ async function loadInvitations() {
 
   } catch (err) {
     showError(container, "Fehler beim Laden der Einladungen.");
+    console.error("Einladungs-Fehler:", err);
   }
 }
 
@@ -483,6 +487,7 @@ 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);
   }
 }
 
@@ -507,6 +512,7 @@ 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);
   }
 }
 

js/ui/eventCard.js

@@ -188,6 +188,7 @@ 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);
     }
   });
 

package.json

@@ -1,10 +1,10 @@
 {
   "name": "aise_fs26-frontendentwicklungprojekt",
   "version": "1.0.0",
-  "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.",
+  "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.",
   "main": "index.js",
   "scripts": {
-    "start": "node server/server.js"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",

server/server.js

@@ -52,6 +52,7 @@ 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" });
   }
 });