Pixel Grid – Application web interactive React + Express
Présentation
Pixel Grid est une application full stack interactive qui permet de colorier des pixels sur une grille de 20x20 cases. Chaque modification est sauvegardée en base de données, permettant de conserver l’état global de la grille à travers les sessions.
Développée en solo, cette application combine un frontend React 19 rapide avec Vite, un backend Express.js performant, et une base de données SQLite pour la persistance.
Fonctionnalités Principales
- Grille dynamique 20x20 avec état synchronisé via base de données.
- Sélecteur de couleur permettant de choisir une couleur active.
- Interaction en un clic : modification immédiate de la cellule.
- API REST Express (
GET /grid,POST /setGridColor) pour la communication front/back. - Sauvegarde persistante via SQLite locale.
Ma Contribution
J’ai réalisé l’entièreté du projet :
- Frontend en React avec gestion d’état, composants dynamiques, et design responsive.
- Backend avec Express et API REST, incluant la logique de sauvegarde en base.
- Base de données en SQLite, avec accès via
better-sqlite3. - Mise en place des outils de développement comme Vite, Nodemon, Concurrently et ESLint pour assurer une organisation de code propre et efficace.
Points clés du projet
- Fullstack complet en autonomie : architecture, logique métier, API et interface.
- Expérience utilisateur directe avec feedback instantané lors des clics.
- Base de données embarquée avec persistance efficace.
- Stack moderne : React 19, Vite 7, Express, SQLite.