The context
Huddle is a solo-built landing page. The goal is to create a homepage for a product or service. The page is responsive and works on all devices.
The page is built with Next.js 16 and Tailwind CSS. Next.js enables a static page optimized for SEO: unlike plain React, the Server Components approach renders HTML on the server. Tailwind CSS is used for design, with an atomic approach and responsiveness driven by variables (Tailwind v4 theme).
Architecture note: the codebase is structured following clean architecture to anticipate future evolution, but at this stage that architecture is unnecessary so it was not used. There is only a presentation of the 'Huddle' company—no business or domain rules—so it is a simple static site. Next.js is used mainly for SEO and also because this project is intended to grow in complexity.
What I learn :
- Context and goals:
- Simple landing page for learning: master Next.js 16, React 19 and Tailwind
- Deliberate stack choices: App Router, Server Components by default, Tailwind directives (@apply, @layer, @theme, etc.) and responsiveness
- Atomic system (component decisions):
- Atoms: buttons, links, icons, labels — indivisible reusable UI components
- Molecules: cards, CTA blocks, section headers — combinations of atoms with a clear role
- Organisms: hero, footer, navigation bar — full page sections
- Templates: layout structure (sections, grids) without business content
- Pages: composition of organisms in the layout; layout.tsx for the shell and page.tsx for the actual pages
- Responsiveness with Tailwind (current approach):
- CSS variables and theme(): breakpoints, spacing and colors centralized (tailwind.config or @theme in v4) for consistent responsiveness
- Use of fluid containers (max-w-*, mx-auto), responsive spacing (p-4 md:p-6 lg:p-8) and fluid typography (clamp, text-sm md:text-base lg:text-lg) via theme variables
- Mobile-first: unprefixed classes for mobile, sm:/md:/lg: for larger breakpoints, using the breakpoints defined in the theme