case study · Strona internetowa dla studia pilates
Pilates StudioPilatesStudio
Butikowe studio pilatesu: tygodniowy grafik z wolnymi miejscami, cennik i spokojna, ciepła estetyka.
Rok
2026
Typ
Strona studia pilatesu
Zakres
Strona jednostronicowa
Rola
Projekt i kod, od początku do końca
/*01·pilates-studio/readme*/
W skrócie
Jednostronicowa strona studia pilatesu na reformerach i macie. Sercem jest grafik zajęć: tydzień z zakładkami dni, filtrami rodzaju zajęć i poziomu oraz statusem każdego terminu, który aktualizuje się sam, gdy zajęcia się zaczynają albo kończą.
Problem
Osoba szukająca zajęć chce w kilka sekund sprawdzić, kiedy jest coś na jej poziomie i czy zostały wolne miejsca. Grafik w formie obrazka albo tabeli w PDF-ie nie odpowiada na żadne z tych pytań.
Rozwiązanie
Grafik generuje się z danych w JavaScripcie: każde zajęcia mają poziom, salę, czas trwania i limit miejsc. Filtry zawężają tydzień do wybranego typu, a karta najbliższego wolnego miejsca od razu podpowiada, na co można się zapisać. To projekt koncepcyjny, dlatego nazwa studia i miasto są na razie placeholderami.
Zbudowane na
+Next.js
+PostgreSQL
+Drizzle
+Zod
+Playwright
// Projekt koncepcyjny: nazwa studia i miasto to placeholdery. Zrzuty pochodzą ze strony uruchomionej lokalnie.
/*02·pilates-studio/features*/
Co potrafi
01
Grafik tygodniowy
Zakładki dni obsługiwane z klawiatury, filtry rodzaju zajęć i poziomu oraz przełączanie tygodni.
02
Statusy na żywo
Co minutę strona sprawdza, które zajęcia trwają, a które się skończyły, i odświeża tylko to, co się zmieniło.
03
Najbliższe wolne miejsce
Karta na pierwszym ekranie od razu pokazuje najbliższe zajęcia, na które można się jeszcze zapisać.
04
Kręgosłup zamiast paska
Postęp przewijania pokazują 24 kręgi: 7 szyjnych, 12 piersiowych i 5 lędźwiowych, zapalane jeden po drugim.
05
Polska typografia
Skrypt przenosi jednoliterowe wyrazy do następnej linii, żeby nie zostawały na końcu wiersza.
06
Telefon z maską
Numer formatuje się podczas pisania, prefiks kraju zostaje na miejscu, a walidacja wskazuje błędy przed wysłaniem.
/*03·pilates-studio/screens*/
Zrzuty ekranu
Overview całej strony
Pilates Studio
najedź, aby przewinąćprzewijam
Strona główna od nagłówka do stopki, na komputerze i na telefonie
