Portfolio

Icemania

Kompleksowa aplikacja webowa dla lodziarni rzemieślniczej Icemania. Projekt oferuje pełne menu produktów, system zamówień, panel konta użytkownika oraz wsparcie dla 3 języków (PL, EN, DE) z profesjonalnymi animacjami scroll-based.

Zobacz Live Demo

Kluczowe Funkcjonalności

System Wielojęzyczny

Własny system i18n wspierający 3 języki (Polski, Angielski, Niemiecki) z ~300 kluczami tłumaczeń i persystencją w localStorage

Zaawansowane Animacje

GSAP 3.14 z ScrollTrigger dla scroll-based animations, parallax effects i staggered card animations

Menu & Zamówienia

Pełne menu produktów z filtrowaniem, szczegóły produktów, koszyk zakupowy i system składania zamówień

Panel Użytkownika

Autentykacja z AuthContext, panel zamówień (aktywne/archiwum), profil użytkownika i historia zakupów

Responsywny Design

Mobile-first approach z dedykowanym MobileBottomNav, adaptacyjnymi layoutami i custom design system

Optymalizacja Wydajności

Next.js 16 z Turbopack, React Compiler, automatyczna optymalizacja obrazów i code splitting

Stack Technologiczny

Next.js 16.2.1 (Turbopack)

React 19.2.4

TypeScript 5.x

Tailwind CSS 4.x

GSAP 3.14.2

@gsap/react 2.1.2

Lucide React 1.7.0

React Context API

Vercel

GitHub

O Projekcie

Icemania to nowoczesna aplikacja webowa stworzona dla lodziarni rzemieślniczej, oferującej naturalne lody. Głównym celem było stworzenie intuicyjnej platformy do przeglądania menu, składania zamówień online oraz zarządzania kontem użytkownika.

Aplikacja została zbudowana w oparciu o najnowsze technologie: Next.js 16 z App Router, React 19 i TypeScript. Wykorzystuje własny system wielojęzyczny wspierający 3 języki, z pełną persystencją wyboru użytkownika. Design system opiera się na custom palecie kolorów (#5C1A1B, #B4CFB0, #F9F5E7) i Tailwind CSS.

Kluczowym elementem UX są zaawansowane animacje GSAP z ScrollTrigger, które tworzą płynne, profesjonalne przejścia i efekty parallax. Aplikacja oferuje pełną funkcjonalność e-commerce: przeglądanie menu, filtrowanie produktów, dodawanie do koszyka, zarządzanie zamówieniami i panel użytkownika z historią zakupów.

Projekt wyróżnia się architekturą opartą na React Context API (LanguageContext, AuthContext), custom hooks dla reusable logic oraz Server/Client Components pattern. Deployment na Vercel z automatyczną optymalizacją obrazów i code splitting gwarantuje błyskawiczne ładowanie i doskonałą wydajność.