Les captures de cette page utilisent une famille et des données fictives. Les vraies restent à la maison.
Le problème : « C’est quand déjà, le rendez-vous ? »
Chez nous, on passe la journée devant nos ordinateurs. Et les infos de la maison, elles, étaient éparpillées partout : l’agenda dans iCloud, les devoirs sur l’ENT du collège, le menu de la cantine dans un PDF sur le site de la ville, la box repas dans son appli, les courses sur un bout de papier… et les corvées, dans la tête de celui qui râle.
L’idée : un écran qui rassemble tout, toujours allumé, sur mon écran et sur celui de ma femme. Un coup d’œil, et on sait ce qui se passe aujourd’hui.
Une grille, un coup d’œil
L’interface est une grille bento en mode sombre, pensée pour un écran fixe posé en paysage, qu’on regarde de loin :
- l’heure et la météo en grand, avec l’heure qui s’adapte à la taille de sa carte ;
- l’agenda familial : les 5 prochains événements, avec la pastille de couleur de chaque membre de la famille concerné ;
- les tâches et les courses, qu’on coche directement ;
- les recettes de la semaine, tirées de la box repas ;
- les photos de famille en diaporama, et la radio dans un coin.
En haut, un bandeau d’infos donne l’essentiel du jour : « Aujourd’hui : collecte du bac jaune », « Vacances de la Toussaint dans 2 jours », « Anniversaire dans 12 jours ».
D’autres pages complètent l’accueil :
- les corvées de la semaine, avec des points et un classement (oui, il y a une couronne pour le premier) ;
- la cantine, la météo détaillée, la qualité de l’air et les pollens ;
- la scolarité de ma fille : emploi du temps avec la ligne de l’heure qui avance, devoirs, notes et messages des profs ;
- le pense-bête familial : des post-its (« Plus de lait ! ») et des comptes à rebours.
Sur téléphone, la barre d’icônes passe en bas de l’écran, sous le pouce.
Un écran qui ne dort jamais
Un dashboard qu’on laisse allumé toute la journée, ça pose des questions qu’un site classique ne se pose pas :
- L’écran ne doit pas se mettre en veille. L’appli le garde allumé, et le reprend quand on revient sur l’onglet.
- Les infos doivent se mettre à jour toutes seules : toutes les 5 minutes, juste après minuit et dès qu’on revient sur l’écran, sans clignotement et sans couper la radio.
- La nuit, on baisse la lumière : de 22 h à 7 h, il ne reste qu’une horloge très sombre. Le jour, après 10 minutes sans bouger, les photos de famille passent en plein écran.
- Une nouvelle version en ligne ? Une pastille l’indique, et l’écran se recharge tout seul.
- On l’installe comme une appli sur les téléphones, avec son icône.
Dix sources, zéro panique
Le vrai défi technique, c’est d’agréger une dizaine de sources, dont beaucoup n’ont pas d’API officielle : météo et pollens, agenda iCloud, photos Google Drive, box repas, menus PDF de la cantine (lus et découpés automatiquement), vacances scolaires, collecte des déchets, ENT du collège, radio.
Quand on dépend d’autant de services, il y en a toujours un qui tombe. Alors :
- chaque appel a un délai maximum de 8 secondes ;
- les données lentes arrivent après les autres, avec un squelette à la place en attendant, pour que la page s’affiche tout de suite ;
- un cache garde la dernière valeur connue : si un service ne répond pas, on affiche ce qu’on avait plutôt qu’un trou ;
- l’heure est toujours celle de Paris, même si le serveur tourne à l’heure UTC.
Pour l’ENT, il n’existe pas d’API pour les familles. J’ai d’abord fait une étude de faisabilité « go / no-go » avant de me lancer, puis une connexion durable dont la session est chiffrée en base.
Privé, et ça se respecte
Un tableau de bord familial, c’est l’agenda, les photos, et la scolarité d’une enfant. Il est donc protégé par un code d’accès familial (cookie signé, comparaison sécurisée), tout comme les photos. Les messages des profs ne montrent qu’un aperçu : le message complet ne s’ouvre qu’à la demande.
C’est aussi pour ça que le code reste privé, et que les captures de cette page utilisent une famille inventée.
Sous le capot
La stack : SvelteKit et Svelte 5, Drizzle ORM sur Turso, Tailwind CSS et shadcn-svelte, déployé sur Vercel.
- Un composant par widget, qui reçoit ses données et ne va jamais les chercher lui-même.
- Des tests sur ce qui casse le plus : la lecture de l’agenda, des PDF de la cantine et des dates.
- Une intégration continue (GitHub Actions) qui vérifie le code, les types, les tests et le build à chaque envoi.
- Trois versions en un mois : un MVP, puis une V2 qui commence par revoir l’existant (sécurité, fiabilité, ergonomie) avant d’ajouter quoi que ce soit, puis une V3 pour la scolarité.
- Développé en binôme avec Claude Code, un assistant de développement par IA. Chaque version part d’une feuille de route que j’écris (ce qu’on fait, dans quel ordre, ce qu’on ne fait pas), puis je relis et teste chaque étape avant de passer à la suivante. Trois versions en un mois, c’est aussi grâce à ça.
Et alors ?
Le dashboard tourne tous les jours chez nous. La répartition des corvées est devenue (presque) un jeu, les devoirs se consultent d’un coup d’œil, et toutes les petites infos du quotidien sont là, tout de suite. Comme on passe nos journées devant nos écrans, ça fluidifie franchement les échanges à la maison.
Et personne ne peut plus dire « j’savais pas que c’était à moi de sortir les poubelles ».