Brainwave analysieren und lernen, komplexe Interfaces mit React und Tailwind zu erstellen
Jedes Mal, wenn Designer Mockups im Stil moderner KI-Dienste einbringen, bekommen Entwickler leichte Kopfschmerzen. Neon-Gradienten, komplexe Hintergrundgitter, dekorative Kreuze an Abschnittsgrenzen, Bento-Layouts und Parallax-Effekte. Das alles ordentlich zusammenzustellen, ohne den Code in ein Chaos aus hunderten verstreuten Tailwind-Klassen zu verwandeln, kann eine Herausforderung sein.
Im brainwave-Repository hat Adrian Hajdin vom JavaScript-Mastery-Kanal den Quellcode für eine vollständige Landingpage für ein fiktives KI-Produkt veröffentlicht. Das Projekt basiert auf React, Vite und Tailwind CSS. Es ist ein großartiges Beispiel dafür, wie man Style- und Komponentenarchitektur organisiert, wenn das Design über Standard-Karten und -Buttons hinausgeht.
Was steckt im Projekt
Das Repository ist eine fertige Frontend-Single-Page-Site. Es enthält alle typischen Blöcke einer kommerziellen Website: einen Hero-Bereich mit Call-to-Action, Feature-Karten, eine interaktive Roadmap, einen Integrationsbereich und Preismodelle.
Der Hauptwert des Projekts liegt nicht im Design selbst, sondern im Ansatz zur Implementierung komplexer visueller Elemente. Anstatt schwere Komponentenbibliotheken einzubinden, zeigt der Autor, wie man das Maximum aus purem Tailwind CSS und React herausholt.
Interessante technische Lösungen
Ich habe den Codebase überprüft und vier Techniken identifiziert, die in der realen Entwicklung nützlich sein werden.
1. Typografie-Architektur über Tailwind-Plugin
In großen Tailwind-Projekten tritt ein häufiges Problem auf: Entwickler kopieren lange Klassenketten wie font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] von einer Überschrift zur anderen. Das verunreinigt das Markup und erschwert Refactoring.
In Brainwave wurde dies über die Konfigurationsdatei tailwind.config.js gelöst. Mit der eingebauten Funktion plugin erstellte der Autor benutzerdefinierte Komponentenklassen für alle Typografie-Stufen:
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":
{},
},
});
}),
]
Jetzt muss im JSX nur noch <h1 className="h1"> geschrieben werden, und die Styles werden automatisch mit responsiven Breakpoints geladen.
2. Universelle Section-Wrapper mit Führungslinien
Das Projektdesign verwendet dünne Trennlinien entlang der Seiten der Seite und dekorative Kreuze an Blockübergängen. Diese Markup manuell in jeder Komponente zu erstellen, ist umständlich.
Das Projekt enthält eine dedizierte Section.jsx-Komponente, die die gesamte dekorative Geometrie handhabt:
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>
);
Die Komponente isoliert die Logik zum Rendern von Seitenführungen (w-0.25 h-full bg-stroke-1) und horizontalen Trennlinien mit SVG-Icons an Schnittpunkten. Andere Blöcke wrappen einfach in <Section crosses> und halten so eine saubere Struktur.
3. Bento-Layout für Roadmap
Der Roadmap-Bereich ist als asymmetrisches Grid aufgebaut. Karten mit gerader Nummer verschieben sich vertikal auf mittleren und großen Bildschirmen mit der Klasse even:md:translate-y-[7rem].
Gradient-Ränder verwenden eine Doppel-Wrapper-Technik: Der äußere Container erhält einen Gradient-Hintergrund (bg-conic-gradient) mit minimalem Padding p-0.25, während der innere Block mit der Hauptdunkel-Theme-Farbe gefüllt wird bg-n-8. Dies erzeugt einen sauberen leuchtenden Rand, der nur einen Bruchteil eines Pixels dick ist, ohne schwere CSS-Filter.
4. Extrahieren von Content in Konstanten
Gesamter Text, Navigationsstruktur, Preise und Feature-Listen werden in die Datei constants/index.js extrahiert. Komponenten selbst enthalten keine hardcodierten Strings – sie handhaben nur das Data-Mapping. Um das Projekt für einen echten Service anzupassen, muss nur ein JS-Objekt geändert werden, ohne das JSX-Markup zu berühren.
Projekt lokal ausführen
Du brauchst Node.js und Git, um dies auszuführen. Klone das Repository und installiere die Abhängigkeiten:
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
Der Vite-Local-Server startet unter http://localhost:5173.
Wer profitiert von diesem Repository
Das Projekt hat kein Backend, keine Datenbankintegration und keine komplexe State-Management-Logik. Es ist speziell eine Vorlage und Lernressource für die Frontend-Entwicklung.
Das Repository lohnt sich in zwei Szenarien:
- Du möchtest deine Tailwind-CSS-Skills verbessern und verstehen, wie man das Theme für nicht-standardisierte Design-Mockups richtig anpasst.
- Du brauchst eine fertige Framework für eine Landingpage für dein Side-Project oder Portfolio, wo beeindruckende visuelle Präsentation wichtig ist.
Der Code ist sauber, in klare Module unterteilt und leicht in separate wiederverwendbare Komponenten aufzubrechen. Quellcode-Link: github.com/adrianhajdin/brainwave.
Ähnliche Projekte