Analiza projektu Brainwave i nauka budowania złożonych interfejsów z React i Tailwind
Za każdym razem, gdy projektanci przynoszą makiety w stylu nowoczesnych usług AI, programiści zaczynają odczuwać lekkie drżenie. Neonowe gradienty, złożone siatki tła, dekoracyjne krzyżyki na granicach sekcji, układy bento i paralaks. Złożenie tego wszystkiego w schludną całość bez zamienienia kodu w chaos setek porozrzucanych klas Tailwind może być wyzwaniem.
W repozytorium brainwave autor kanału JavaScript Mastery Adrian Hajdin opublikował kod źródłowy kompletnej strony docelowej fikcyjnego produktu AI. Projekt jest zbudowany przy użyciu React, Vite i Tailwind CSS. To doskonały przykład organizacji architektury stylów i komponentów, gdy projekt wykracza poza standardowe karty i przyciski.
Co zawiera projekt
Repozytorium to gotowa jednostronicowa strona frontendowa. Zawiera wszystkie typowe bloki komercyjnej strony internetowej: sekcję hero z wezwaniem do działania, karty funkcji, interaktywną mapę drogową, sekcję integracji oraz pakiety cenowe.
Główna wartość projektu nie tkwi w samym projekcie graficznym, lecz w podejściu do implementacji złożonych elementów wizualnych. Zamiast podpinać ciężkie zależności bibliotek komponentowych, autor pokazuje, jak wycisnąć maksimum z vanilla Tailwind CSS i czystego Reacta.
Interesujące rozwiązania techniczne
Przeanalizowałem kod źródłowy i zidentyfikowałem cztery techniki, które będą przydatne w prawdziwym developmentzie.
1. Architektura typografii za pomocą pluginu Tailwind
W dużych projektach Tailwind pojawia się częsty problem: programiści kopiują długie łańcuchy klas jak font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] z jednego nagłówka na drugi. Zaśmieca to markup i komplikuje refaktoryzację.
W Brainwave problem ten został rozwiązany poprzez plik konfiguracyjny tailwind.config.js. Używając wbudowanej funkcji plugin, autor stworzył niestandardowe klasy komponentów dla wszystkich poziomów typografii:
plugins: [
plugin(function ({ addBase, addComponents, addUtilities }) {
addComponents({
".h1": {
"@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]":
{},
},
".h2": {
"@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight":
{},
},
".body-1": {
"@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
{},
},
".tagline": {
"@apply font-grotesk font-light text-xs tracking-tagline uppercase":
{},
},
});
}),
]
Teraz w JSX wystarczy napisać <h1 className="h1">, a style są pobierane automatycznie wraz z punktami przełamania responsywności.
2. Uniwersalna obwoluta sekcji z liniami prowadzącymi
W projekcie używane są cienkie linie rozdzielające wzdłuż boków strony oraz dekoracyjne krzyżyki na przecięciach bloków. Budowanie tego markupu ręcznie wewnątrz każdego komponentu jest niewygodne.
Projekt zawiera dedykowany komponent Section.jsx, który zajmuje się całą dekoracyjną geometrią:
import SectionSvg from "../../public/assets/svg/SectionSvg";
const Section = ({
className,
id,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
<div
id={id}
className={`relative
${
customPaddings ||
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
} ${className || ""}`}
>
{children}
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10" />
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10" />
{crosses && (
<>
<div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-10 right-10`}
/>
<SectionSvg crossesOffset={crossesOffset} />
</>
)}
</div>
);
Komponent izoluje logikę renderowania linii prowadzących (w-0.25 h-full bg-stroke-1) oraz poziomych separatorów z ikonami SVG na przecięciach. Inne bloki po prostu owijają się w <Section crosses>, zachowując czystą strukturę.
3. Układ bento dla mapy drogowej
Sekcja Mapa drogowa jest zbudowana jako asymetryczna siatka. Karty o parzystych numerach przesuwają się pionowo na średnich i dużych ekranach dzięki klasie even:md:translate-y-[7rem].
Gradientowe obramowania używają techniki podwójnego opakowania: zewnętrzny kontener otrzymuje gradientowe tło (bg-conic-gradient) z minimalnym paddingem p-0.25, podczas gdy wewnętrzny blok wypełnia się głównym ciemnym kolorem motywu bg-n-8. Tworzy to czyste świecące obramowanie o grubości zaledwie ułamka piksela, bez ciężkich filtrów CSS.
4. Wyodrębnienie treści do stałych
Cały tekst, struktura nawigacji, ceny i listy funkcji są wyodrębnione do pliku constants/index.js. Komponenty same w sobie nie zawierają żadnych zakodowanych na twardo ciągów znaków — zajmują się tylko mapowaniem danych. Aby dostosować projekt do prawdziwej usługi, wystarczy zmodyfikować jeden obiekt JS bez dotykania markupu JSX.
Jak uruchomić projekt lokalnie
Będziesz potrzebować Node.js i Git zainstalowanych do uruchomienia projektu. Sklonuj repozytorium i zainstaluj zależności:
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
Lokalny serwer Vite startuje pod adresem http://localhost:5173.
Kto skorzysta z tego repozytorium
Projekt nie ma backendu, integracji z bazą danych ani złożonego zarządzania stanem. Jest to konkretnie szablon i materiał edukacyjny dla frontend developmentu.
Warto zapoznać się z repozytorium w dwóch scenariuszach:
- Chcesz poprawić swoje umiejętności Tailwind CSS i zrozumieć, jak prawidłowo dostosować motyw do niestandardowych makiet projektowych.
- Potrzebujesz gotowego frameworka do strony docelowej dla swojego projektu pobocznego lub portfolio, gdzie liczy się imponująca prezentacja wizualna.
Kod jest czysty, podzielony na wyraźne moduły i łatwy do rozbicia na osobne wielokrotnego użytku komponenty. Link do kodu źródłowego: github.com/adrianhajdin/brainwave.
Powiązane projekty