CatByte Lab · Frontend Mentor

Interaktywna encyklopedia planet

Aplikacja edukacyjna, w której każda planeta i każdy widok danych ma własny adres — i wciąż ładuje się natychmiast.

  • Frontend Mentor
  • Aplikacja interaktywna
  • RWD
Widok Merkurego z metrykami planety w widoku desktopowym
Widok Merkurego w aplikacji Planets Facts na telefonie

O projekcie

Planets Facts prezentuje dane o ośmiu planetach Układu Słonecznego. Użytkownik przełącza planety oraz trzy widoki treści — przegląd, budowę wewnętrzną i powierzchnię — a interfejs utrzymuje mocny, kosmiczny styl.

Widok Merkurego z opisem, zakładkami danych i metrykami planety
Widok Merkurego w aplikacji Planets Facts na telefonie

Wyzwanie

Osiem planet razy trzy widoki to 24 stany, które muszą być osiągalne bezpośrednio z adresu i działać z przyciskiem „wstecz". Nawigacja zmienia się przy tym całkowicie między telefonem, tabletem i desktopem.

Widok Ziemi z listą planet w nagłówku i zakładkami po prawej stronie
Ten sam widok Ziemi z zakładkami przeniesionymi pod nagłówek na telefonie

Rozwiązanie

Każda planeta dostała własną ścieżkę, a widok danych żyje w tym samym routingu, więc pojedynczy stan da się zalinkować i wrócić do niego przyciskiem przeglądarki.

Nawigacja ma trzy warianty — listę pod nagłówkiem, menu wysuwane i pasek poziomy — a metryki planety renderują się z jednego źródła danych, bez powielania układu.

Saturn w zakładce budowy wewnętrznej z aktywnym drugim widokiem danych
Saturn w zakładce budowy wewnętrznej na telefonie

Technologie

  • React
  • TypeScript
  • SCSS
  • React Router
  • Netlify

Zakres i efekty

Co dokładnie zrobiliśmy

Interaktywna encyklopedia planet z czytelnymi informacjami i responsywnym układem.

Źródło
Frontend Mentor
Termin
Luty 2025
Rola
Projekt treningowy
Czas realizacji
2-4 tyg.
  • RWD
  • routing planet
  • zakładki danych
  • wizualizacja metryk

Efekt

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

Nawigacja
Każdy widok pod własnym adresem
RWD
Trzy warianty nawigacji zależne od ekranu
Dane
Jedno źródło dla wszystkich metryk planet

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 Coffee Roasters - strona marki kawowej
Frontend Mentor / product website

CatByte Lab · Frontend Mentor

Coffee Roasters - strona marki kawowej

Responsywna, wielostronicowa strona dla fikcyjnej palarni kawy z przejrzystą prezentacją oferty, procesu działania i kreatorem planu subskrypcji. Projekt skupia się na dopracowanym layoucie, czytelnym flow oraz spójności z dostarczonym designem.

  • RWD
  • wielostronicowy layout
  • kreator planu kawowego
  • Frontend Mentor

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

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.