Nestor PeñaDesign Engineer · Product Designer

Étude de cas 03 · Mon propre produit · Refonte1 min de lectureEn ligne depuis le 1er octobre 2026

D’une app Figma Make à un annuaire de festivals qui marche sans JavaScript.

Mon annuaire mondial de festivals : audité, repensé pour le mobile et reconstruit en site statique.

Visiter cubansalsacalendar.com ↗︎Code sur GitHub ↗︎
Réalisé avec
  • Figma Make
  • Claude Design
  • Claude Code
  • Astro
  • TypeScript
  • Preact
  • MapLibre
  • GitHub Actions
  • Cloudflare Workers
128festivals
37pays
541artistes
100score Lighthouse

Vous voyez le résultat. Activez la couche Réflexion pour voir comment j'y suis arrivé.Vous voyez les notes en marge, les croquis et les options que j'ai écartées.

Avant / Après · glissez pour comparer

La nouvelle page d’octobre sur ordinateur : recherche, cartes de festival avec artistes, temps de trajet et la barre des moisAprès · site statique
L’ancien site Figma Make sur ordinateur, avec une fenêtre « Festival Collection Growing » par-dessus la pageAvant · Figma Make

Contexte et rôle

avant de toucher un seul pixel

Les danseurs arrivent depuis Instagram, sur mobile, sur un seul festival.

Mon propre produit, de bout en bout. La première version était une app Figma Make. J’ai listé ses 42 fonctions et la façon dont chacune échouait. Cinq problèmes pesaient plus que tout changement visuel :

  • SécuritéN’importe quel visiteur pouvait écraser la base de données.
  • Données19 festivals sans dates exactes étaient masqués.
  • LiensLe bouton principal devinait des URL Instagram menant à des 404.
  • OrdreSur mobile, janvier 2027 passait avant octobre 2026.
  • PortéeSans JavaScript, page blanche et aperçus de liens vides.

Ma réflexion

un fichier, pas de base de données

Données

Garder la base de données publique
Un CMS headless

Un seul fichier JSON validé

Un responsable, environ 130 festivals. Les visiteurs ne touchent pas aux données.

Pages

Réparer la single-page app
Rendu côté serveur

Des pages pré-rendues

Chaque festival a une vraie URL avec un aperçu ; de petits îlots ajoutent l’interaction.

Navigation

Des puces par mois
Une longue liste

Des pages par mois, barre en bas

À portée de pouce, et chaque mois est une page indexable.

Liens

Deviner l’URL Instagram
Masquer le bouton

Seulement des liens qui existent

Un mauvais lien coûte plus de confiance qu’un lien absent.

Ce que j’ai construit

La page festival

Page du Festival de Cuba Stuttgart sur ordinateur : dates, temps en train et en voiture depuis Zurich, bouton Get passes, boutons agenda et Instagram, programmation de 10 artistes et carte de Stuttgart
La même page festival sur mobile
  • Un seul bouton principal. Acheter le pass. Pas de compte à rebours, pas de texte d’urgence.
  • Une suite. D’autres festivals du même mois, car la plupart des visiteurs arrivent d’abord ici.
  • Pensée pour le partage. Une image d’aperçu générée et des données Event pour chaque festival.

Panneaux mois et filtres

Panneau Choisir un mois : une grille de mois avec le nombre de festivals, les mois vides en pointillés
Panneau Filtres : quand, où, favoris uniquement, tri, et un bouton pour afficher 25 festivals
La page du mois en mode sombre

Carte et temps de trajet

Vue carte d’octobre : repères et groupes en Amérique du Nord et en Europe

Choisissez une ville une fois : chaque carte affiche le moyen le plus rapide d’y aller en voiture, en train ou en avion, le plus proche d’abord. Aucune demande de localisation au chargement.

L’outil d’admin

Tableau de données de l’admin : 128 festivals, filtres rapides des informations manquantes, recherche et un bouton Edit par ligne

Réseaux sociaux, même identité

Post bleu marine : tout juste annoncé, 22–26 octobre, Festival de Cuba Stuttgart, pass dès 89 €
Annonce
Post crème : la programmation du Festival de Cuba Stuttgart en étiquettes d’artistes
Programmation
Story corail : commence dans 21 jours, Festival de Cuba Stuttgart, ajoutez-le à votre agenda
Story compte à rebours
Post bleu marine : novembre, 20 festivals, avec quatre cartes de festival et leurs dates
Ce mois-ci

Impact

la qualité, une étape du build

En ligne depuis le 1er octobre, Lighthouse 100 à chaque build.

  • Accessibilité. axe vérifie chaque page selon les WCAG 2.1 AA, en clair et en sombre.
  • Données. Un JSON invalide fait échouer le build ; un rebuild quotidien passe les festivals terminés aux archives.
  • Agendas. Un fichier .ics par festival et un flux par région.
  • Ensuite. Des pages artiste, pour suivre un professeur d’un festival à l’autre.

Ce que je ferais autrement

  1. Partir d’un seul fichier de données. La base de données a causé les pires bugs.
  2. Valider d’abord les revenus avec la billetterie.

Vous cherchez quelqu’un qui lance des projets ?

Écrivez-moiLinkedIn