74 frontendy MVP: strony, sklepy, panele i aplikacje

To 74 frontendy MVP, każdy dla innej fikcyjnej marki z własną nazwą, logo, paletą i stylem, w branżach od palarni kawy po astronomię. Marki nie istnieją naprawdę, więc zestaw nie opisuje realizacji dla klientów. Pokazuje za to, jak bardzo mogą się od siebie różnić interfejsy, które projektujemy i budujemy.

Każdy frontend jest osobnym projektem z własnym kodem i własnym buildem, a nie kolejną kopią jednego szablonu z podmienionym kolorem. Układ, kroje pisma, ikony i ruch są dobrane do tego, co dana firma robi i komu to pokazuje.

Kolor nie jest tu jednym przyciskiem na szarym tle. Paleta marki niesie tła, powierzchnie, karty i nagłówki, więc palarnia Ashgrove Roasters jest brązowa od nagłówka po stopkę, zespół Corsa Nine Racing czerwony na pełnym ekranie, a dom aukcyjny Strata turkusowy. Palety pochodzą z gotowych zestawów kolorów, a brakujące jaśniejsze i ciemniejsze odcienie są liczone z tej samej barwy, zamiast sięgać po neutralną szarość.

Kroje pisma są dobierane parami pod charakter marki: Fraunces z Manrope w hotelu Casa Marlow, Teko z Interem w aplikacji treningowej Emberset, IBM Plex Sans z Plex Mono w panelu finansowym Ledgerline. Terminal BBS Carrier pisze wyłącznie jednym krojem, VT323, bo tak wyglądały ekrany, które przypomina.

Logo i ikony są rysowane pod branżę. Palarnia ma własny wskaźnik stopnia palenia z ziaren, dom aukcyjny ręcznie rysowane okazy minerałów, a program do selekcji zdjęć Lightfold gwiazdkę, flagę i logo w kształcie przysłony.

Rodzaj interfejsu to dopiero początek. Wśród sklepów jest Strata, dom aukcyjny bez koszyka, z licytacją i odliczaniem do końca aukcji, oraz Rookery Games z dwoma torami: zwykłą półką z koszykiem i premierami, które otwierają się o określonej godzinie i mają twardy limit sztuk. Inkhollow sprzedaje pióra wieczne z wyborem szerokości stalówki.

Strony też nie powtarzają jednego schematu. Farwater zamiast zdjęcia w nagłówku ma pełnoekranową, ręcznie rysowaną mapę wysp z panelem rezerwacji, Corsa Nine Racing przewija się pełnoekranowymi sekcjami z nawigacją kropkami, Switchbench trzyma podgląd klawiatury i cenę przy boku przez cały konfigurator, a Foxglove od razu zaczyna się od siatki wzorów tatuaży z filtrem stylu.

Aplikacje webowe nie dzielą jednego szkieletu z menu bocznym: Handbill to tablica kanban, Frameforge kreator roweru w sześciu krokach, Tackboard tablica, którą się przesuwa i przybliża, a Redline edytor z formularzem po lewej i gotowym CV po prawej. Wśród aplikacji mobilnych Krausen prowadzi z listy do szczegółów partii nawigacją stosu zamiast dolnego paska zakładek, a Farstride rozkłada mapę biegu na cały ekran.

Te frontendy nie są obrazkami do oglądania. Filtry zawężają katalog, koszyk liczy sumę z dostawą i zostaje po odświeżeniu strony, a cena zmienia się razem z wariantem: w Trestle krzesło z orzechowym wykończeniem i szerszym siedziskiem kosztuje dokładnie tyle, ile wynika z dopłat. W Tapehouse Studio przycisk odtwarzania przesuwa głowicę po ścieżkach przez Web Audio, w Emberset odlicza się przerwa między seriami, a Orrery po przesunięciu suwaka czasu przelicza wysokość i azymut gwiazd astronomią sferyczną dla wybranego miejsca.

Liczby na ekranach się zgadzają. Kalkulator raty w Alcove liczy amortyzację kredytu, tabela ligowa Ashcombe Athletic liczy punkty i bilans bramek z wyników, kolejka wydruków w Layerhouse sumuje czas, materiał i koszt każdej pozycji, a przeniesienie transakcji na wygraną w Quota od razu zmniejsza wartość otwartego lejka. Carrier ma tablice z wątkami i odpowiedziami, pobieranie plików liczone z szybkości modemu i blackjacka na pełnej talii 52 kart.

Wszystkie projekty stoją na tym samym zestawie narzędzi: React 19, TypeScript, Vite i Tailwind CSS 4, a ruch w większości z nich robi biblioteka Motion. Nie mają backendu: dane leżą w plikach projektu, a stan, jak koszyk czy zarezerwowany wzór tatuażu, zostaje w przeglądarce. Dzięki temu frontend da się przeklikać od początku do końca, zanim powstanie serwer.

Ekrany przechodzą przez przeglądarkę bez interfejsu, w której klikane są ich główne interakcje, liczby porównywane z ręcznym przeliczeniem, a układ mierzony na szerokości telefonu, żeby nic nie wychodziło poza ekran. Konsola przeglądarki ma przy tym zostać pusta.