Relativement.com : un site culturel administrable, optimise et securise

Structure technique

Le projet repose sur un backend Node.js avec Express et TypeScript, connecte a une base MySQL via les paquets mysql et mysql2. Cette base relationnelle convient bien aux contenus qui ont des relations stables : utilisateurs, pages, spectacles, images, textes et donnees d'administration.

Cote interface, le projet utilise React et un kit de blocs reutilisable autour de Tiptap. Cette approche evite de figer chaque page dans du HTML statique : les contenus peuvent etre composes avec des blocs texte/image tout en gardant une structure maintenable.

SEO et logique WebP

Le point sensible d'un site culturel est souvent le poids des images. Ici, un script dedie analyse les sources non-WebP, cree les versions WebP manquantes avec Sharp, limite les dimensions et archive les fichiers source. C'est une logique saine pour le SEO : pages plus legeres, chargement plus rapide et meilleure experience mobile.

Le script reste prudent : il peut tourner en dry-run, signaler les WebP manquants, puis appliquer la conversion seulement quand la verification est faite. Cette methode reduit le risque de casser des medias deja publies.

Ameliorations SEO

Le travail SEO a surtout consiste a rendre un site riche en medias plus leger et plus maintenable : conversion WebP, limitation des dimensions, archivage des sources lourdes, verification des chemins images et conservation d'une structure de contenu claire.

Le resultat attendu est simple : moins de poids sur les pages, une meilleure experience mobile, des images mieux servies et des contenus administrables qui restent lisibles pour les visiteurs comme pour les moteurs.

Securite backend

L'authentification locale s'appuie sur bcryptjs avec un cout de hashage de 12. Les mots de passe ne sont donc pas stockes en clair. Le backend verifie aussi la robustesse minimale des nouveaux mots de passe : longueur, majuscule, minuscule, chiffre et caractere special.

La logique d'acces s'inscrit dans une approche simple et robuste : hashage serveur, tokens d'action pour la reinitialisation, configuration via variables d'environnement et separation des services SQL.

Exemples de code

Ces extraits viennent du depot GitHub du projet. Ils montrent les choix importants sans exposer de secret : les identifiants restent lus depuis la configuration serveur.

Hashage bcrypt avant stockage

function hashPassword(password: string): Promise<string> {
  return new Promise((resolve, reject) => {
    bcrypt.hash(password, 12, (err, hash) => err ? reject(err) : resolve(hash));
  });
}

Pool MySQL configure cote backend

var pool = mysql.createPool({
  connectionLimit: 10,
  host: config.sql.url,
  user: config.sql.login,
  password: config.sql.password,
  database: config.sql.dbname,
  port: config.sql.port
});

Ce que ce projet montre

• Une architecture SQL adaptee a des contenus relies et administrables.
• Une interface React qui mutualise les blocs au lieu de dupliquer les composants.
• Une optimisation WebP utile pour le SEO, pas seulement cosmetique.
• Une securite backend basee sur des fondamentaux lisibles : validation, hashage, configuration separee.