Fullstack DataGrid

Fullstack DataGrid – App web interactive React + Express

« Derrière chaque clic, une requête bien pensée. »

Présentation

Fullstack DataGrid est une application full-stack interactive permettant de modifier et de sauvegarder l’état d’une grille dynamique en temps réel.
Elle illustre la communication entre un frontend React 19 (avec Vite) et un backend Express.js, avec persistance des données via SQLite.

Développé en solo, le projet met l’accent sur la structuration d’une API REST claire, la gestion d’état côté front, et la synchronisation des données entre client et serveur.

Fonctionnalités principales

• Grille interactive 20x20 avec état stocké côté serveur.
• Mise à jour instantanée des cellules via clic utilisateur.
• API REST Express (GET /grid, POST /setGridColor) pour la communication front/back.
• Sauvegarde persistante via base SQLite locale.
• Front-end réactif avec hooks React (useState, useEffect).

Ma contribution

J’ai conçu et développé l’ensemble du projet :

• Frontend en React avec composants dynamiques, hooks et interface réactive.
• Backend avec Express et API REST pour gérer lecture/écriture des données.
• Base de données en SQLite via better-sqlite3 pour la persistance.
• Mise en place d’un environnement de développement optimisé avec Vite, Nodemon, Concurrently et ESLint.

Points clés du projet

• Architecture full-stack complète : React + Express + SQLite.
• Synchronisation client–serveur fluide grâce à une API REST claire.
• Gestion d’état front-end maîtrisée et rendu dynamique performant.
• Stack moderne et cohérente : React 19, Vite 7, Express, SQLite.