Projekt: Art Shop

Fullstack E-Commerce

Das Szenario

Ein aufstrebender Künstler (“Art by Arty”) hat ein Problem: Seine Instagram-DMs platzen aus allen Nähten, weil Leute seine Drucke kaufen wollen. Er verliert den Überblick über Bestellungen und Zahlungen. Er braucht einen eigenen Online-Shop.

Deine Rolle: Du bist der CTO dieses kleinen Unternehmens. Du entscheidest, wie der Shop gebaut wird, damit er auch bei 100 Bestellungen am Tag nicht zusammenbricht.

Deine Technischen Entscheidungen

Hier gibt es kein “richtig” oder “falsch”, aber es gibt Konsequenzen für jede Entscheidung.

1. Frontend & State Management

Der Künstler will, dass der Shop sich “flüssig wie eine App” anfühlt.

Problem: Ein Nutzer legt ein Bild in den Warenkorb, geht auf “Über mich”, dann zurück zum Shop. Der Warenkorb darf nicht leer sein.
Entscheidung: Wo speicherst du den Warenkorb-Zustand? (Local Storage? Context API? Redux? Server-side Session?) Begründe deine Wahl.

2. Datenmodellierung

Wir haben Produkte, Bestellungen und Kunden.

Herausforderung: Ein Produkt kann verschiedene Größen haben (A4, A3, Poster), die unterschiedlich kosten.
Aufgabe: Skizziere das Datenbankschema (ER-Diagramm). Wie verknüpfst du Produkte mit ihren Varianten?

3. Admin & Content Management

Der Künstler ist kein Techie. Er will neue Bilder hochladen, ohne dich anzurufen.

Entscheidung: Baust du ein eigenes Admin-Dashboard oder nutzt du ein Headless CMS (wie Strapi, Contentful)?
Trade-off: Eigenbau = maximale Kontrolle vs. CMS = Zeitersparnis. Was ist hier sinnvoller?

Anforderungen (The Problem Space)

Löse diese Kernprobleme für den Künstler:

Der Katalog: Kunden müssen schnell finden, was sie suchen (Filter nach Farbe/Stimmung/Größe).
Der Checkout-Flow: Der kritischste Moment. Wenn es hier hakt, ist der Kunde weg. Wie gestaltest du den Prozess von “Warenkorb” bis “Danke für den Kauf”?
Bestell-Management: Der Künstler muss sehen: “Wer hat was bestellt und habe ich es schon verschickt?”

Freie Wahl – Der Tech Stack

Du hast freie Hand. Wähle Tools, die du lernen willst oder die du für am besten hältst.

Ebene	Fragen an dich
Frontend	Welche Frameworks eignen sich gut für E-Commerce? SPA vs. SSR? Warum?
Backend	PHP oder Node.js. Beide sind in der Industrie weit verbreitet. Welches Ökosystem passt besser zu deinen Vorkenntnissen oder Zielen?
Datenbank	Relational (SQL) für strenge Bestellstrukturen oder NoSQL für flexible Produktdaten? Begründe deine Wahl basierend auf den Anforderungen.

Lernziele

State Management verstehen: Daten persistieren über Page-Reloads hinweg. 2. Daten-Architektur: Beziehungen zwischen Entitäten (1:n, n:m) korrekt modellieren. 3. UX/UI für Conversion: Wie führt man einen Nutzer zum Kaufabschluss?

Tipps zum Start

Fang klein an: Baue erst den Produktkatalog. Dann den Warenkorb. Dann den Checkout.
Dummy Payment: Integriere keine echten Zahlungen, bevor der Rest steht. Logge einfach “Zahlung erfolgreich” in die Konsole.

Fragen?

Überlege dir ein Konzept für dein Datenmodell und komm damit zu uns. Wir challengen deine Architektur gerne!