Prepare final project submission

.env.example

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

.gitignore

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

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).  
+Ein kostenloser API-Key kann über das Ticketmaster Developer Portal bezogen werden:
-*(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
-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 (`?.`).
+* **Frontend-Backend-Integration:** Die Kommunikation zwischen Frontend, Backend und Ticketmaster API musste zuverlässig koordiniert werden.
-- **Modulstruktur ohne Framework**: Die klare Trennung in `api/`, `services/`, `ui/` ohne ein Framework erforderte bewusste Architekturentscheidungen.
+* **Verschachtelte Ticketmaster-Daten:** Die komplexe JSON-Struktur der API erforderte eine zusätzliche Service-Schicht zur Datenaufbereitung.
-- **Statuscode-Konventionen**: Die korrekte Verwendung von HTTP-Statuscodes (201 für Ressource-Erstellung, 200 für erfolgreichen GET) musste erst explizit reflektiert werden.
+* **Modularisierung:** Mit wachsendem Funktionsumfang wurde eine klare Trennung der Verantwortlichkeiten immer wichtiger.
-- **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
 
-- Tiefes Verständnis für Async/Await und Fehlerbehandlung in JavaScript
+* **Integration erhöht die Komplexität:** Mehrere Systeme müssen konsistent zusammenarbeiten.
-- Sensibilisierung für OWASP-Risiken bereits beim Schreiben von Frontend-Code
+* **Kleine Änderungen können grosse Auswirkungen haben:** Sichere Praktiken wie die Verwendung von `textContent` helfen, Fehler und Sicherheitsrisiken zu vermeiden.
-- Wert von semantischem HTML5 und Accessibility für Barrierefreiheit und SEO
+* **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 
+| **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-input {
+.auth-modal-body .form-control.auth-input {
-  border: 1.5px solid var(--color-border) !important;
+  border: 1.5px solid var(--color-border);
-  border-radius: var(--radius-sm) !important;
+  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 {
+.auth-modal-body .form-control.auth-input:focus {
-  border-color: var(--color-accent) !important;
+  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15) !important;
+  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 {

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

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

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

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"

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