CatByte Lab · Frontend Mentor

Strona marki kawowej z kreatorem subskrypcji

Wielostronicowy serwis produktowy, w którym wybór planu kawowego prowadzi użytkownika krok po kroku do gotowego zamówienia.

  • Frontend Mentor
  • Strona produktowa
  • RWD
Strona główna Coffee Roasters w widoku desktopowym
Sekcja hero „Great coffee made simple” w widoku mobilnym

O projekcie

Coffee Roasters to wyzwanie Frontend Mentor: fikcyjna palarnia kawy z kilkoma podstronami, opisem procesu i kreatorem planu subskrypcji. Punktem wyjścia był gotowy projekt graficzny, który należało odwzorować co do detalu.

Strona główna Coffee Roasters z hasłem marki i wejściem do kreatora
Sekcja hero „Great coffee made simple” w widoku mobilnym

Wyzwanie

Kreator planu to cztery zależne od siebie wybory, które muszą złożyć się w jedno czytelne podsumowanie zamówienia. Do tego dochodzi wierność designowi na każdej szerokości ekranu — właśnie tam takie projekty najczęściej się sypią.

Karty czterech mieszanek kawy z opisami w sekcji „Our collection”
Karty mieszanek kawy w układzie jednokolumnowym na telefonie

Rozwiązanie

Kreator prowadzi krok po kroku i na bieżąco buduje zdanie podsumowujące wybór, więc użytkownik cały czas widzi, co zamawia. Sekcje rozwijają się i zwijają, żeby formularz nie przytłaczał na starcie.

Layout opiera się na siatce, która skaluje się od telefonu po desktop bez łamania proporcji z projektu.

Kreator planu z listą kroków i rozwijanymi pytaniami o preferencje
Kreator planu subskrypcji Coffee Roasters w widoku mobilnym

Technologie

  • React
  • TypeScript
  • SCSS
  • React Router
  • Netlify

Zakres i efekty

Co dokładnie zrobiliśmy

Wielostronicowa strona marki kawowej z kreatorem planu subskrypcji i dopracowanym layoutem.

Źródło
Frontend Mentor
Termin
Marzec 2025
Rola
Projekt treningowy
Czas realizacji
2-4 tyg.
  • RWD
  • wielostronicowy layout
  • kreator planu kawowego
  • Frontend Mentor

Efekt

estetyczna prezentacja produktu z intuicyjną ścieżką wyboru planu

Ścieżka wyboru
Kreator planu w czterech krokach
Zgodność z designem
Odwzorowanie makiet na każdej szerokości
RWD
Jedna siatka od telefonu po desktop

CatByte Lab

Pozostałe projekty z Lab

Zobacz CatByte Lab
Desktop screenshot strony PENDEV - osobiste portfolio frontend developera
Portfolio / personal brand

CatByte Lab · Projekt własny

PENDEV - osobiste portfolio frontend developera

Portfolio zbudowane jako statyczna strona z sekcjami o autorze, projektach, technologiach, CV i kontakcie. Prezentacja kompetencji programistycznych oraz dopracowane, responsywne doświadczenie.

  • projekt UX/UI
  • Accessibility
  • Formularz kontaktowy
  • RWD i animacje

Efekt: wizytówka z czytelną prezentacją projektów i umiejętności

Czas: 3-5 tyg.

Zobacz case study
Desktop screenshot strony Planets Facts - interaktywna encyklopedia planet
Frontend Mentor / interactive app

CatByte Lab · Frontend Mentor

Planets Facts - interaktywna encyklopedia planet

Interaktywna aplikacja edukacyjna prezentująca fakty o planetach Układu Słonecznego. Użytkownik może przełączać planety oraz widoki danych, a interfejs łączy mocny, kosmiczny styl z czytelnymi informacjami i responsywnym układem.

  • RWD
  • routing planet
  • zakładki danych
  • wizualizacja metryk

Efekt: czytelna aplikacja contentowa z szybkim dostępem do danych o każdej planecie

Czas: 2-4 tyg.

Zobacz case study

Następny projekt

Masz pomysł, brief albo problem do rozwiązania?

Wyślij nam kontekst. Wrócimy z pytaniami, sensownym zakresem i kierunkiem, który da się wdrożyć bez przepalania budżetu.