Brainwave ontleed: leren om complexe interfaces te bouwen met React en Tailwind
Elke keer dat ontwerpers mockups in de stijl van moderne AI-diensten presenteren, krijgen ontwikkelaars een lichte rilling. Neonverlopen, complexe achtergrondroosters, decoratieve kruisen bij sectieranden, bento-lay-outs en parallax. Dit netjes assembleren zonder de code te veranderen in een rommeltje van honderden verspreide Tailwind-klassen kan een uitdaging zijn.
In de brainwave repository heeft JavaScript Mastery-kanaalauteur Adrian Hajdin de broncode gepubliceerd voor een complete landingspagina voor een fictief AI-product. Het project is gebouwd met React, Vite en Tailwind CSS. Dit is een goed voorbeeld van hoe je stijl en componentarchitectuur kunt organiseren wanneer het ontwerp verder gaat dan standaardkaarten en -knoppen.
Wat zit er in het project
De repository is een kant-en-klare frontend single-page site. Het bevat alle typische blokken van een commerciële website: een hero-sectie met een call-to-action, featurekaarten, een interactieve roadmap, een integratiesectie en prijsniveaus.
De hoofdwaarde van het project ligt niet in het ontwerp zelf, maar in de aanpak voor het implementeren van complexe visuele elementen. In plaats van zware componentbibliotheekafhankelijkheden in te pluggen, demonstreert de auteur hoe je het maximale uit vanilla Tailwind CSS en puur React haalt.
Interessante technische oplossingen
Ik heb de codebase bekeken en vier technieken geïdentificeerd die nuttig zullen zijn in echte ontwikkeling.
1. Typografie-architectuur via Tailwind-plugin
In grote Tailwind-projecten ontstaat een veelvoorkomend probleem: ontwikkelaars kopiëren lange klassenketens zoals font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] van het ene kopje naar het andere. Dit verontreinigt markup en bemoeilijkt refactoring.
In Brainwave werd dit afgehandeld via het configuratiebestand tailwind.config.js. Met de ingebouwde functie plugin creëerde de auteur aangepaste componentklassen voor alle typografieniveaus:
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":
{},
},
});
}),
]
Nu hoef je in JSX alleen maar <h1 className="h1"> te schrijven, en stijlen worden automatisch ingeladen samen met responsieve breakpoints.
2. Universele sectie-wrapper met richtlijnen
Het projectontwerp gebruikt dunne verdelingslijnen langs de zijkanten van de pagina en decoratieve kruisen bij blokkruispunten. Deze markup handmatig bouwen binnen elke component is onhandig.
Het project bevat een speciale Section.jsx component die alle decoratieve geometrie afhandelt:
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>
);
De component isoleert de logica voor het renderen van zijgeleiders (w-0.25 h-full bg-stroke-1) en horizontale verdelers met SVG-pictogrammen bij kruispunten. Andere blokken wikkelen simpelweg in <Section crosses>, waardoor een schone structuur behouden blijft.
3. Bento-lay-out voor Roadmap
De Roadmap-sectie is opgebouwd als een asymmetrisch raster. Kaarten met even nummers verschuiven verticaal op middelgrote en grote schermen met de klasse even:md:translate-y-[7rem].
Verloopborders gebruiken een dubbele-wrapper-techniek: de buitenste container krijgt een verloopachtergrond (bg-conic-gradient) met minimale opvulling p-0.25, terwijl het binnenste blok wordt gevuld met de hoofddonkere themakleur bg-n-8. Dit creëert een schone gloeiende border van slechts een fractie van een pixel dik zonder zware CSS-filters.
4. Content extraheren naar constanten
Alle tekst, navigatiestructuur, prijzen en featurelijsten worden geëxtraheerd naar het constants/index.js bestand. Componenten zelf bevatten geen hardcoded strings—ze verwerken alleen datatoewijzing. Om het project aan te passen voor een echte dienst, wijzig je simpelweg één JS-object zonder JSX-markup aan te raken.
Hoe het project lokaal uit te voeren
Je hebt Node.js en Git geïnstalleerd nodig om dit uit te voeren. Clone de repository en installeer afhankelijkheden:
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
De Vite lokale server start op http://localhost:5173.
Wie heeft voordeel bij deze repository
Het project heeft geen backend, database-integratie of complex state management. Het is specifiek een template en leermiddel voor frontend-ontwikkeling.
De repository is de moeite waard om te verkennen in twee scenario's:
- Je wilt je Tailwind CSS-vaardigheden verbeteren en begrijpen hoe je het thema correct kunt aanpassen voor niet-standaard ontwerpmockups.
- Je hebt een kant-en-klaar framework nodig voor een landingspagina voor je side project of portfolio, waarbij indrukwekkende visuele presentatie belangrijk is.
De code is schoon, verdeeld in duidelijke modules en gemakkelijk op te breken in afzonderlijke herbruikbare componenten. Broncodelink: github.com/adrianhajdin/brainwave.
Gerelateerde projecten