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

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.

Klient: 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

Inne realizacje

Sprawdź pozostałe projekty

Zobacz całe portfolio

WWW / e-commerce

Sugar Madam — witryna studia urody ze sklepem i panelem CMS

Witryna studia urody z Zielonej Góry łącząca wizytówkę marki, sklep z kosmetykami i rezerwację wizyt. Strony marketingowe renderowane po stronie serwera pod kątem lokalnego SEO, sklep obsługiwany przez Stripe Checkout z ceną liczoną wyłącznie serwerowo, a zamówienia trafiają do panelu CMS, w którym właścicielka samodzielnie zarządza produktami, cennikiem i galerią.

projekt UX/UI
sklep i płatności Stripe
panel CMS (Payload)
SEO lokalne
maile powtierdzające transakcje

Efekt: jedno miejsce, które prezentuje ofertę, sprzedaje kosmetyki i prowadzi do rezerwacji wizyty

Czas: 4 tyg.

Zobacz case study

WWW / marka osobista

Bastet Studio — portfolio fotografki

Portfolio Pauliny Bukalskiej, fotografki z Lublina, zaprojektowane wokół pełnoekranowych historii zdjęciowych, subtelnych animacji i prostego kontaktu. Serwis łączy charakterystyczny język wizualny marki z wydajnym, dostępnym frontem i lokalnym SEO.

projekt UX/UI
interaktywne galerie
SEO lokalne
formularz z Turnstile

Efekt: spójna witryna marki, która prezentuje sesje i prowadzi do zapytania o termin

Czas: 3 tyg.

Zobacz case study

WWW / lokalny biznes

Ten Vape - strona dla lokalnego sklepu

Wizerunkowo-informacyjna strona dla vape shopu w Lublinie, która szybko pokazuje ofertę, lokalizacje, godziny otwarcia, opinie klientów i najważniejsze informacje przed wizytą w sklepie.

projekt UX/UI
Animacje
SEO lokalne
FAQ i opinie Google

Efekt: czytelna wizytówka online wspierająca ruch w sklepach stacjonarnych

Czas: 4-6 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.

Skontaktuj się Zobacz usługi