StartER – Un starter Express + React full-stack moderne

🔧 Framework pédagogique pour créer des applications web en Express + React avec des outils de production intégrés.

⭐️ Si vous trouvez ce projet utile, laissez une étoile pour soutenir le projet !

Vue d'ensemble

sequenceDiagram
    box Web Client
    participant React as React
    participant Fetcher as Fetcher
    end
    box Web Server
    participant Express as Express
    participant Module as Module
    end
    box DB Server
    participant DB as MySQL Server
    end

    React-)Fetcher: event
    activate Fetcher
    Fetcher-)Express: request (HTTP)
    activate Express
    Express-)Module: route
    activate Module
    Module-)DB: request (SQL)
    activate DB
    DB--)Module: data
    deactivate DB
    Module--)Express: json
    deactivate Module
    Express--)Fetcher: response (HTTP)
    deactivate Express
    Fetcher--)React: render
    deactivate Fetcher

Loading

StartER est un starter full-stack combinant Express (backend) et React (frontend) dans un seul projet cohérent. Il est conçu à la fois comme un outil pédagogique et comme une base de production solide pour prototyper rapidement des applications web modernes.

Technologies incluses

Côté serveur et client

• Express : framework minimaliste pour créer des serveurs web et des API avec Node.js.
• React : bibliothèque JavaScript pour construire des interfaces utilisateur interactives et modulaires.

Outils et écosystème

Dans l'ordre alphabétique (liste non exhaustive) :

• Biome : linter, formateur et analyseur statique performant pour garantir un code propre.
• Docker : conteneurisation pour des environnements de développement et de déploiement reproductibles.
• MySQL : système de gestion de bases de données relationnelles.
• Pico CSS : kit CSS minimaliste et sémantique.
• React Router (Mode Data) : gestionnaire de routes pour React.
• TypeScript : superset de JavaScript ajoutant des types statiques.
• Vite : outil de build rapide pour le développement et la production.
• Vitest : framework de test intégré à Vite.
• Zod : validation et typage de schémas TypeScript.

Installation et utilisation

Une documentation complète est disponible dans le wiki du projet.

Pour débuter, consultez les pages principales :

• Installation
• Database
• Express
• React

Structure des fichiers sources

.
├── .env
├── .env.sample
├── compose.yaml
├── compose.prod.yaml
├── Dockerfile
├── index.html
├── server.ts
└── src
    ├── database
    │   └── schema.sql
    ├── express
    │   ├── routes.ts
    │   └── modules
    │       └── ...
    ├── react
    │   ├── routes.tsx
    │   └── components
    │       └── ...
    └── types
        └── index.d.ts

Commandes de base

Commande	Description
docker compose up --build	Build et démarre les services (ajouter -d pour démarrer en mode détaché).
docker compose -f compose.prod.yaml up --build -d	Build et démarre l'application en mode production.
docker compose logs -t	Affiche les logs avec timestamps.
docker compose run --build --rm server npm run database:sync	Synchronise la base de données avec src/database/schema.sql.
docker compose run --build --rm server npm run test	Exécute les tests.
npm run biome:check	Contrôle la qualité du code avec Biome (exécuté en pre-commit).
npm run types:check	Contrôle la cohérence des types TypeScript (exécuté en pre-commit).
npm run make:clone <source> <destination> <OldName> <NewName>	Clone un module ou un fichier en renommant automatiquement les identifiants.
npm run make:purge	Supprime les modules par défaut (--keep-auth pour conserver user et auth).

REST cheatsheet

StartER repose sur une architecture RESTful, où chaque ressource (par exemple items ou users) expose un ensemble d'endpoints structurés autour des opérations CRUD/BREAD classiques :

• Browse : parcourir toutes les ressources
• Read : lire une ressource spécifique
• Add : créer une nouvelle ressource
• Edit : modifier une ressource existante
• Destroy : supprimer une ressource

Ce tableau récapitule les conventions utilisées dans les modules Express du projet (comme itemRoutes), les méthodes HTTP associées et les réponses attendues. Il sert de référence rapide lorsque vous développez vos propres modules ou testez vos API.

Opération	Méthode	Chemin d'URL	Corps de la requête	SQL	Réponse (succès)	Réponse (erreur)
Browse	GET	/api/items	—	SELECT	200 (OK), liste des items.	—
Read	GET	/api/items/:id	—	SELECT	200 (OK), un item.	404 (Not Found), si id invalide.
Add	POST	/api/items	Données de l'item	INSERT	201 (Created), id d'insertion.	400 (Bad Request), si corps invalide.
Edit	PUT	/api/items/:id	Données de l'item	UPDATE	204 (No Content).	400 (Bad Request), si corps invalide ; 404 (Not Found), si id invalide.
Destroy	DELETE	/api/items/:id	—	DELETE	204 (No Content).	—

Licence

Ce projet est distribué sous licence MIT. Vous êtes libre de l'utiliser, le modifier et le redistribuer à des fins éducatives ou professionnelles.