Saverly.fr

Projet de gestion de budget personnel.

4 min de lecture

Quelques images et vidéos

Pour la page d'accueil l'objectif était d'avoir un style "argent", pour ça j'ai utilisé une police avec serif pour les titres

Page d'accueil de saverly
Page d'accueil de saverly

La capture d'écran a quelques problèmes, mais vous pouvez avoir une idée de ce que ça ressemble.

J'ai aussi voulu tester des animations avec framer-motion, les "cartes" de la section hero sont animés lors du scroll.
Les autres animations viennent de magic ui.

Et finalement, l'onboarding et une petite démo de l'application.

La vidéo est un peu longue, au sommaire:

  1. On commence par un onboarding
    1. Demander un nom
    2. Création d'une enveloppe
    3. Création d'une transaction
    4. Création d'un abonnement

Chaque étape est animée avec un swipe de droite à gauche lorsqu'on passe à la page suivante (inversement si on clique sur retour)

  1. On arrive sur le dashboard
    1. On voit les graphs, les listes.
    2. On peut modifier les transactions
    3. On peut ajouter des abonnements
    4. Et filtrer par date

Ici toute la donnée est stockée en local et synchronisée avec le serveur, ce qui permet d'avoir aucun chargement, ou spinner lors des modifications.

Une partie que j'apprécie particulièrement est le modal de création d'abonnement.

L'affichage des prochaines executions, les détails sur les "s" lorsqu'il y a plusieurs jours, les icons, filtres.. tous ces détails sans aucun chargement sont parfaits.

Stack

C'est vraiment une stack très intéressante. Je pense la reprendre dans un autre projet.
Dans certains cas trpc est trop lourd, next-safe-action le remplace très bien.
Le côté replicache est vraiment vraiment intéressant. Compliqué à mettre en place, mais une fois fait ça fonctionne très bien.
Un mutator côté client et une méthode similaire côté serveur pour synchroniser. N'avoir aucun chargement est tellement plaisant 😎

Cette application ne peut pas exister sans ce principe, quelqu'un en extérieur, avec un réseau faible n'enregistrera jamais une dépense si le site doit charger pendant quelques secondes avec des spinners.

Conclusion

Ce projet n'a pas été très long, la mise en place de replicache a été la plus grosse partie. Tout cela a pris 3 petits week-ends.

Pour le moment le code reste privé, mais si je n'en fait rien je le rendrai public.