.env.example

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

.gitignore

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

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.
+Erstelle eine `.env`-Datei im Projektstamm:
-
-In einer regulären Installation muss eine eigene `.env`-Datei im Projektstamm erstellt werden:
 
 ```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:
+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.)*
-https://developer.ticketmaster.com/
-
-Zusätzlich ist eine `.env.example`-Datei enthalten, welche die erwartete Struktur der Umgebungsvariablen dokumentiert.
 
 ### 4. Backend-Server starten
 
 ```bash
-npm start
+node server/server.js
 ```
 
-Ausgabe:
+Ausgabe: `Server läuft auf http://localhost:3000`
-
-```text
-Server läuft auf http://localhost:3000
-```
 
 ### 5. Frontend öffnen
 
@@ -133,26 +124,26 @@ 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.
+- **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 (`?.`).
-* **Verschachtelte Ticketmaster-Daten:** Die komplexe JSON-Struktur der API erforderte eine zusätzliche Service-Schicht zur Datenaufbereitung.
+- **Modulstruktur ohne Framework**: Die klare Trennung in `api/`, `services/`, `ui/` ohne ein Framework erforderte bewusste Architekturentscheidungen.
-* **Modularisierung:** Mit wachsendem Funktionsumfang wurde eine klare Trennung der Verantwortlichkeiten immer wichtiger.
+- **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.
+- Tiefes Verständnis für Async/Await und Fehlerbehandlung in JavaScript
-* **Kleine Änderungen können grosse Auswirkungen haben:** Sichere Praktiken wie die Verwendung von `textContent` helfen, Fehler und Sicherheitsrisiken zu vermeiden.
+- Sensibilisierung für OWASP-Risiken bereits beim Schreiben von Frontend-Code
-* **Modulare Architektur verbessert die Wartbarkeit:** Klare Strukturen erleichtern Entwicklung, Fehlersuche und Erweiterungen.
+- 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                                         |
+| **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 |
+| **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.

css/components.css

@@ -247,22 +247,22 @@
   margin-bottom: 0.35rem;
 }
 
-.auth-modal-body .form-control.auth-input {
+.auth-input {
-  border: 1.5px solid var(--color-border);
+  border: 1.5px solid var(--color-border) !important;
-  border-radius: var(--radius-sm);
+  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 {
+.auth-input:focus {
-  border-color: var(--color-accent);
+  border-color: var(--color-accent) !important;
-  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
+  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 {

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,7 +1,7 @@
 {
   "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"

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" });
   }
 });