Le contexte
Huddle est une landing page réalisée en solo. L'objectif est de créer une page d'accueil pour un produit ou un service. La page est responsive et fonctionne sur tous les appareils.
La page est développée avec Next.js 16 et Tailwind CSS. Next.js permet de créer une page statique optimisée pour le SEO : contrairement à React pur, le mécanisme des Server Components permet de rendre le HTML depuis le serveur. Tailwind CSS est utilisé pour le design, avec une approche atomic et une responsivité pilotée par des variables (theme Tailwind v4).
Note sur l'architecture: le code source se structure sous la forme de la clean architecture afin d'anticiper une évolution de ce projet mais à ce stade cette architecture est inutile d'où elle n'a pas été utilisé. En effet, il n'y qu'une présentation de l'entreprise 'Huddle' donc pas de règles métiers et de domaine identifié, c'est un simple site statique. NextJs est utilisé surtout pour le SEO mais il n'est également utilisé que parce-que ce projet est voué à évolué vers plus de complexité.
Mes réalisations :
- Contexte et objectifs :
- Landing page simple à but pédagogique : maîtriser Next.js 16, React 19 et Tailwind
- Choix délibéré de la stack : App Router, Server Components par défaut, règles Tailwind (@apply, @layer, @theme, etc.) et la responsivité
- Système atomic (décisions de composants) :
- Atoms : boutons, liens, icônes, labels — composants UI indivisibles réutilisables
- Molecules : cartes, blocs CTA, en-têtes de section — combinaisons d’atoms avec un rôle précis
- Organisms : hero, footer, barre de navigation — sections complètes de la page
- Templates : structure de layout (sections, grilles) sans contenu métier
- Pages : composition des organisms dans le layout ; layout.tsx pour le squelette et page.tsx pour les pages à proprement parlé
- Responsivité avec Tailwind (approche actuelle) :
- Variables CSS et theme() : breakpoints, espacements et couleurs centralisés (tailwind.config ou @theme en v4) pour une cohérence responsive
- Utilisation de conteneurs fluides (max-w-*, mx-auto), espacements responsives (p-4 md:p-6 lg:p-8) et typo fluide (clamp, text-sm md:text-base lg:text-lg) via les variables du thème
- Mobile-first : classes sans préfixe pour le mobile, sm:/md:/lg: pour les paliers supérieurs, en s’appuyant sur les breakpoints définis dans le thème