Portfolio
Icemania
Umfassende Webanwendung für die handwerkliche Eisdiele Icemania. Das Projekt bietet ein vollständiges Produktmenü, Bestellsystem, Benutzerkonto-Panel und Unterstützung für 3 Sprachen (PL, EN, DE) mit professionellen scroll-basierten Animationen.
Live-Demo ansehenHauptfunktionen
Mehrsprachiges System
Eigenes i18n-System mit Unterstützung für 3 Sprachen (Polnisch, Englisch, Deutsch) mit ~300 Übersetzungsschlüsseln und Persistenz in localStorage
Fortschrittliche Animationen
GSAP 3.14 mit ScrollTrigger für scroll-basierte Animationen, Parallax-Effekte und gestaffelte Kartenanimationen
Menü & Bestellungen
Vollständiges Produktmenü mit Filterung, Produktdetails, Warenkorb und Bestellsystem
Benutzer-Panel
Authentifizierung mit AuthContext, Bestellpanel (aktiv/archiviert), Benutzerprofil und Kaufhistorie
Responsives Design
Mobile-first-Ansatz mit dediziertem MobileBottomNav, adaptiven Layouts und benutzerdefiniertem Design-System
Leistungsoptimierung
Next.js 16 mit Turbopack, React Compiler, automatische Bildoptimierung und Code-Splitting
Technologie-Stack
Über das Projekt
Icemania ist eine moderne Webanwendung für eine handwerkliche Eisdiele, die natürliches Eis anbietet. Das Hauptziel war die Schaffung einer intuitiven Plattform zum Durchsuchen des Menüs, Online-Bestellungen und Verwaltung des Benutzerkontos.
Die Anwendung wurde auf Basis der neuesten Technologien entwickelt: Next.js 16 mit App Router, React 19 und TypeScript. Sie nutzt ein eigenes mehrsprachiges System mit Unterstützung für 3 Sprachen und vollständiger Persistenz der Benutzerwahl. Das Design-System basiert auf einer benutzerdefinierten Farbpalette (#5C1A1B, #B4CFB0, #F9F5E7) und Tailwind CSS.
Ein Schlüsselelement der UX sind fortschrittliche GSAP-Animationen mit ScrollTrigger, die flüssige, professionelle Übergänge und Parallax-Effekte schaffen. Die Anwendung bietet vollständige E-Commerce-Funktionalität: Menü durchsuchen, Produkte filtern, zum Warenkorb hinzufügen, Bestellungen verwalten und Benutzer-Panel mit Kaufhistorie.
Das Projekt zeichnet sich durch eine auf React Context API basierende Architektur (LanguageContext, AuthContext), Custom Hooks für wiederverwendbare Logik und Server/Client Components Pattern aus. Deployment auf Vercel mit automatischer Bildoptimierung und Code-Splitting garantiert blitzschnelles Laden und hervorragende Leistung.