From f4a55882ac427214a61ea897668c74db67db3749 Mon Sep 17 00:00:00 2001 From: Karolina T Date: Sat, 13 Jun 2026 22:51:56 +0200 Subject: [PATCH] Prepare final project submission --- .DS_Store | Bin 6148 -> 0 bytes .env.example | 1 + .gitignore | 4 +++- README.md | 51 ++++++++++++++++++++++++----------------- css/components.css | 18 +++++++-------- js/api/ticketmaster.js | 1 - js/app.js | 6 ----- js/ui/eventCard.js | 1 - package.json | 2 +- server/server.js | 1 - 10 files changed, 44 insertions(+), 41 deletions(-) delete mode 100644 .DS_Store create mode 100644 .env.example diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 1910a231b508081d9e6bf29bce6cb9ce0dc2b172..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKy-or_5S|4>h+0sXNO=Xlp)yvU1bqQ&BLe=!a2^4%G*?mTOIX|ZSJ>HTY2gdl znArIUezUv4?VYHN#+Vth`|a(_?96_9x62Zdst(!}q9PF$P#AMFs6G(Zb4f|Y_RIs7 z9^;Vuo!v^k6$aguwR8vr!oXi+fWO^5ZBZY;ZTk58b@V}4t2H}e6Mlu|oy*sai~H5& z7(v+n(x$tY+9$Hq;ym0PWc>`ITTMLn($&fH&5Mpb)=r|PwQjry2Bi$`C!-A?M*ZMd$&)Z34E!qwRIXO9 zRWT)dwx%Y>XRU|QKw)9K$e?yXWshUs;G?*Nq6IpS8$jP;WDq?N`6HldkV+W%RR-Px DKuxly diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..577e80d --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +TM_API_KEY=your_ticketmaster_api_key \ No newline at end of file diff --git a/.gitignore b/.gitignore index 40b878d..eb89e51 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -node_modules/ \ No newline at end of file +node_modules/ +.DS_Store +__MACOSX/ \ No newline at end of file diff --git a/README.md b/README.md index eeaa6e3..b259b39 100644 --- 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. + +Die individuelle Beteiligung ist in den Git-Commits auf [gitea.fhgr.ch](https://gitea.fhgr.ch/augsbunicola/AISE_FS26-FrontendEntwicklungProjekt) nachvollziehbar. \ No newline at end of file diff --git a/css/components.css b/css/components.css index 0e38e79..8476349 100644 --- 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 { @@ -348,4 +348,4 @@ select:focus-visible, a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; -} +} \ No newline at end of file diff --git a/js/api/ticketmaster.js b/js/api/ticketmaster.js index 252096c..376fa2e 100644 --- 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; } diff --git a/js/app.js b/js/app.js index 331b7a2..e8cea57 100644 --- 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); } } diff --git a/js/ui/eventCard.js b/js/ui/eventCard.js index a4673e9..57b2527 100644 --- 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); } }); diff --git a/package.json b/package.json index 082db16..66cd968 100644 --- 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" diff --git a/server/server.js b/server/server.js index 631cb18..d9efecf 100644 --- 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" }); } });