Sushi Sensation.

Vue d'ensemble

Sushi Sensation est mon tout premier site web — reproduction fidèle d'un template Figma en React pour apprendre les bases du CSS et de la construction d'interface.

Projet d'apprentissage : analyser un design existant, le décomposer en composants, le reconstruire avec React et Styled Components. Navigation fluide, toutes les sections intégrées, expérience responsive desktop et mobile.

Réalisé en 2 semaines pendant ma formation — point de départ d'une progression qui m'a mené vers Tailwind, TypeScript et le full-stack.

Défi & Problématique

Construire un premier site React sans expérience préalable — comprendre l'organisation du code, le styling par composant et les bases du layout responsive.

• Analyser un design Figma et le décomposer en composants React
• Reproduire fidèlement les dimensions, espacements et typographies
• Comprendre Flexbox et Grid pour les mises en page
• Rendre le site responsive sans framework CSS

Solution

Pour reproduire le template avec précision, j’ai commencé par analyser l’interface à l’aide de l’inspecteur Chrome. Cela m’a permis d’identifier les tailles, les espacements, la typographie et les proportions utilisées dans le design original.
J’ai ensuite utilisé l’extension Eye Dropper pour extraire la palette de couleurs, afin de rester cohérent avec le style visuel du template.

Durant la réalisation, je me suis appuyé sur des ressources pédagogiques — notamment les vidéos de Kevin Powell — et sur ChatGPT pour comprendre certaines notions de React, de CSS moderne et de responsive design. Grâce à cette approche progressive, j’ai pu structurer les sections en composants réutilisables et obtenir un rendu propre, cohérent et fidèle au design initial.

Développement

Stack

React avec Styled Components — styling encapsulé dans chaque composant, aucun CSS global en dehors des resets.

Frontend — React

• React 18 — premiers composants, props, composition
• Styled Components — CSS-in-JS, styles scopés par composant
• Flexbox et CSS Grid — layouts responsive construits à la main

Méthode d'apprentissage

• Inspecteur Chrome — extraction des dimensions, espacements et typographies depuis le design
• Eye Dropper — extraction des couleurs exactes
• Vidéos Kevin Powell — CSS layout et responsive design
• ChatGPT — déblocage sur les problèmes de structure

Architecture des composants

• Sections indépendantes : Hero, Menu, À propos, Contact, Footer
• Composants réutilisables : Card, Button, SectionTitle
• Props pour la variation de contenu entre les cartes menu

Résultats

Résultat

Site fidèle au template Figma : navigation fluide, toutes les sections intégrées, responsive desktop et mobile. Premier projet livré et déployé.

Ce que j'ai appris

• Analyse de design : lire un Figma et le traduire en code — compétence fondamentale qui accélère tous les projets suivants.
• Flexbox et Grid : comprendre le layout CSS de zéro. Les principes appris ici sont toujours utilisés, même avec Tailwind.
• Styled Components → Tailwind : après ce projet, la migration vers Tailwind a été naturelle — Styled Components m'a d'abord appris pourquoi le scoping des styles est important.
• Responsive dès le départ : apprendre le responsive sur le premier projet plutôt que de l'ajouter après — une habitude de travail installée dès le début.

Apprentissages

Ce projet a été l’occasion de comprendre en profondeur les bases du front-end moderne. J’ai appris à analyser un design via l’inspecteur, à gérer les proportions, les couleurs et la typographie, ainsi qu’à structurer une interface avec Flexbox et Grid.
Le principal défi a été le responsive design, qui m’a permis de mieux saisir l’importance d’une mise en page flexible et bien pensée.
Même si je n’ai pas finalisé certaines fonctionnalités, comme le formulaire, cette expérience m’a donné une vision plus claire du workflow front-end et m’a conduit naturellement vers des outils plus efficaces comme Tailwind CSS et les design systems.
Ce premier projet a marqué un vrai tournant dans ma compréhension du développement web.

Galerie