Utopix
Utopix
Site bilingue d'Utopix, l'habitation-sculpture de Jo Pillet à Sainte-Énimie (Causse de Sauveterre, Lozère). Refonte complète en Next.js avec un back-office sur mesure pour gérer textes et images en français et en anglais.
Le contexte
Utopix est un lieu hors du commun : une habitation-sculpture imaginée et construite par l'artiste Jo Pillet sur le Causse de Sauveterre, près de Sainte-Énimie, aux portes des gorges du Tarn. Mi-maison, mi-œuvre d'art, elle se visite et expose aussi les peintures et sculptures de l'artiste. Le site est la principale porte d'entrée pour les visiteurs, dont beaucoup de touristes, français comme étrangers, de passage en Lozère.
Les besoins
L'ancien site ne mettait plus en valeur un lieu aussi visuel, et il était difficile à faire évoluer. Les objectifs de la refonte :
- un design entièrement repensé, qui laisse toute la place aux images du lieu et des œuvres ;
- une version anglaise complète pour la clientèle touristique internationale ;
- un back-office qui permette de modifier tous les textes et toutes les photos sans intervention technique.
La réalisation
J'ai reconstruit le site de zéro avec Next.js 16 (App Router) et TypeScript. Il s'organise autour de l'histoire du lieu et de sa visite : Histoire, Construction, Extérieurs, Intérieurs, Peintures, Sculptures, Infos pratiques, Accès et contact.
Le bilinguisme est géré avec next-intl, avec des URLs dédiées /fr et /en. Chaque contenu existe dans les deux langues, y compris les textes alternatifs des images, ce qui est utile à la fois pour l'accessibilité et pour le référencement.
Le back-office est entièrement développé sur mesure. Depuis /admin, on peut :
- modifier le titre et le texte de chaque section, en français et en anglais ;
- gérer les diaporamas photo de chaque page : ajout, suppression, réordonnancement par glisser-déposer et texte alternatif bilingue.
Côté back-end, les contenus sont stockés en MySQL via Prisma 7. L'accès à l'administration est protégé par une authentification par session signée (JWT avec jose). Un script d'initialisation crée la structure du site, les contenus de départ et le premier compte administrateur.
Le résultat
Utopix dispose d'un site moderne, rapide et bilingue, à la hauteur de l'originalité du lieu. Les propriétaires mettent à jour leurs textes et leurs galeries en toute autonomie, et le site s'adresse désormais aussi bien aux visiteurs français qu'aux touristes étrangers.
Boite à outils du projet:
- Next.js
- Typescript
- Prisma
- Node
- Sass
- Git
