Analisi di Brainwave: Imparare a Costruire Interfacce Complesse con React e Tailwind
Ogni volta che i designer presentano mockup in stile dei moderni servizi AI, gli sviluppatori iniziano a sentire un leggero tremore. Gradienti al neon, griglie di sfondo complesse, croci decorative ai bordi delle sezioni, layout a bento e parallax. Assemblare tutto questo in modo ordinato senza trasformare il codice in un disastro di centinaia di classi Tailwind sparse può essere una sfida.
Nel repository brainwave, l'autore del canale JavaScript Mastery Adrian Hajdin ha pubblicato il codice sorgente di una landing page completa per un prodotto AI fittizio. Il progetto è costruito con React, Vite e Tailwind CSS. Questo è un ottimo esempio di come organizzare lo stile e l'architettura dei componenti quando il design va oltre le schede e i pulsanti standard.
Cosa C'è Dentro il Progetto
Il repository è un sito single-page frontend pronto all'uso. Include tutti i blocchi tipici di un sito web commerciale: una sezione hero con call to action, schede delle funzionalità, una roadmap interattiva, una sezione integrazioni e livelli di pricing.
Il valore principale del progetto non risiede nel design stesso, ma nell'approccio all'implementazione di elementi visivi complessi. Invece di inserire dipendenze di librerie di componenti pesanti, l'autore dimostra come ottenere il massimo da Tailwind CSS vanilla e React puro.
Soluzioni Tecniche Interessanti
Ho esaminato il codebase e ho identificato quattro tecniche che saranno utili nello sviluppo reale.
1. Architettura della Tipografia tramite Plugin Tailwind
Nei progetti Tailwind di grandi dimensioni, emerge un problema comune: gli sviluppatori copiano catene di classi lunghe come font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] da un titolo all'altro. Questo ingombra il markup e complica il refactoring.
In Brainwave, questo è stato gestito attraverso il file di configurazione tailwind.config.js. Usando la funzione integrata plugin, l'autore ha creato classi di componenti personalizzate per tutti i livelli tipografici:
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":
{},
},
});
}),
]
Ora nel JSX basta scrivere <h1 className="h1">, e gli stili vengono applicati automaticamente insieme ai breakpoint responsive.
2. Wrapper Universale per Sezioni con Linee Guida
Il design del progetto utilizza sottili linee divisorie lungo i lati della pagina e croci decorative alle intersezioni dei blocchi. Costruire questo markup manualmente all'interno di ogni componente è scomodo.
Il progetto include un componente dedicato Section.jsx che gestisce tutta la geometria decorativa:
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>
);
Il componente isola la logica per il rendering delle guide laterali (w-0.25 h-full bg-stroke-1) e dei divisori orizzontali con icone SVG alle intersezioni. Altri blocchi semplicemente si avvolgono in <Section crosses>, mantenendo una struttura pulita.
3. Layout Bento per la Roadmap
La sezione Roadmap è costruita come una griglia asimmetrica. Le schede con numeri pari si spostano verticalmente sugli schermi medi e grandi usando la classe even:md:translate-y-[7rem].
I bordi con gradiente utilizzano una tecnica a doppio wrapper: il contenitore esterno ottiene uno sfondo gradiente (bg-conic-gradient) con padding minimo p-0.25, mentre il blocco interno si riempie con il colore principale del tema scuro bg-n-8. Questo crea un bordo luminoso pulito di una frazione di pixel senza filtri CSS pesanti.
4. Estrazione del Contenuto in Costanti
Tutto il testo, la struttura di navigazione, i prezzi e gli elenchi delle funzionalità sono estratti nel file constants/index.js. I componenti stessi non contengono stringhe hardcoded—gestiscono solo la mappatura dei dati. Per adattare il progetto a un servizio reale, basta modificare un oggetto JS senza toccare il markup JSX.
Come Eseguire il Progetto Localmente
Avrai bisogno di Node.js e Git installati per eseguire questo. Clona il repository e installa le dipendenze:
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
Il server locale Vite si avvia su http://localhost:5173.
Chi Beneficerà da Questo Repository
Il progetto non ha backend, integrazione con database o gestione complessa dello stato. È specificamente un template e risorsa di apprendimento per lo sviluppo frontend.
Vale la pena esplorare il repository in due scenari:
- Vuoi migliorare le tue competenze in Tailwind CSS e capire come personalizzare correttamente il tema per mockup di design non standard.
- Hai bisogno di un framework pronto all'uso per una landing page per il tuo side project o portfolio, dove conta una presentazione visiva impressionante.
Il codice è pulito, suddiviso in moduli chiari e facile da scomporre in componenti riutilizzabili separati. Link al codice sorgente: github.com/adrianhajdin/brainwave.
Progetti correlati