Créer Dashfolio : un tableau de bord de données évolutif de bout en bout

Dashfolio est une application web moderne conçue pour explorer les données de production agricole mondiale. Elle propose des tableaux de bord interactifs qui permettent de visualiser les informations issues des jeux de données de la FAO, notamment la production régionale et les principaux producteurs par type de culture.

Dans cet article, je présente l’architecture technique de Dashfolio et explique comment j’ai créé une application full-stack évolutive, performante et maintenable avec les technologies suivantes :

Frontend : React.js (Next.js), Tailwind CSS, Recharts
Backend : Node.js (NestJS), Prisma ORM, Redis
Base de données : PostgreSQL (AWS RDS)
Cloud et déploiement : AWS et Vercel
CI/CD et contrôle de version : GitLab Pipelines
Tests : Jest pour les tests unitaires, Cypress pour les tests de bout en bout
Langages et outils : TypeScript, JavaScript, SQL, TurboPack, ESLint, Prettier

Objectifs du projet

Proposer un tableau de bord performant et interactif
Assurer la montée en charge et la maintenabilité grâce au Clean Code et aux principes du software craftsmanship
Suivre les bonnes pratiques du secteur : architecture claire, qualité du code, tests automatisés, CI/CD
Fournir une récupération rapide des données et de la mise en cache pour une expérience utilisateur optimale

Frontend : Next.js, Recharts et Tailwind CSS

Next.js fait fonctionner le frontend React.js, avec des pages SSG/SSR et des routes API.
J’utilise Tailwind CSS pour les styles fondés sur les utilitaires et un système de conception cohérent.
Recharts fournit des graphiques performants et personnalisables pour visualiser les données.
TurboPack accélère le développement et la construction, avec une optimisation pour les projets Next.js.

Backend : NestJS, Prisma ORM et Redis

NestJS apporte une architecture modulaire et évolutive pour créer des API.
Prisma ORM simplifie les interactions avec la base grâce à un typage sûr et à des requêtes générées automatiquement.
Redis met en cache les requêtes fréquentes pour réduire la charge de la base et améliorer le temps de réponse des API.
Le backend expose des API RESTful utilisées par le frontend Next.js.

Base de données : AWS RDS avec PostgreSQL

PostgreSQL s’exécute sur AWS RDS pour un stockage relationnel géré et fiable.
Prisma gère le schéma et les migrations pour un accès aux données propre et cohérent.

Stratégie cloud et de déploiement

AWS Cloud : hébergement de PostgreSQL (RDS) et de Redis.
Vercel : déploiement du frontend Next.js pour une diffusion rapide via CDN.
CI/CD avec GitLab Pipelines : tests automatisés, linting avec ESLint, mise en forme avec Prettier et processus de déploiement.
Contrôle de version avec GitLab, des branches de fonctionnalités et des demandes de fusion pour maintenir la qualité du code.
Des pipelines de tests automatisés intègrent Jest pour les tests unitaires et Cypress pour les tests de bout en bout, assurant la stabilité de chaque version.

Stratégie de tests automatisés

Les tests occupent une place essentielle dans le cycle de développement de Dashfolio pour garantir la fiabilité du code, prévenir les régressions et maintenir une qualité élevée. J’ai mis en place deux niveaux de tests :

Jest : tests unitaires et d’intégration

J’utilise Jest pour les tests unitaires et d’intégration du frontend et du backend.
Il vérifie que les composants, services et utilitaires fonctionnent comme prévu.
Jest et Testing Library m’aident à écrire des tests de composants accessibles avec des interactions réalistes.
Les tests s’exécutent automatiquement dans les pipelines GitLab avec des rapports de couverture, renforçant la confiance à chaque envoi de code.

Cypress : tests de bout en bout (E2E)

Cypress prend en charge les tests de bout en bout pour valider les parcours utilisateur complets dans le navigateur.
Je teste des parcours critiques comme le filtrage des jeux de données, la navigation dans les tableaux de bord et l’affichage de graphiques adaptatifs sur différents appareils.
Les tests Cypress s’exécutent sans interface graphique dans les pipelines GitLab CI et produisent des rapports pour le débogage.

Fonctionnalités clés

1. Tableaux de bord interactifs

Des graphiques en secteurs montrent la part de production par région.
Des graphiques en barres présentent les principaux producteurs par culture.
Une conception adaptative avec prise en charge du mode sombre.

2. Mise en cache des API avec Redis

La mise en cache des résultats des requêtes fréquentes garantit des chargements rapides et réduit les appels à la base de données.

Pour optimiser les performances et réduire la charge de la base, Dashfolio met en cache les API avec Redis. En stockant dans Redis les résultats des requêtes API fréquemment consultées, nous limitons les interrogations répétées de PostgreSQL. Les utilisateurs bénéficient ainsi de réponses plus rapides, particulièrement lorsqu’ils consultent des jeux de données populaires ou appliquent des filtres courants.

3. Bonnes pratiques d’ingénierie logicielle

Principes du Clean Code : DRY et conception SOLID.
Outils de qualité du code : ESLint, Prettier et TypeScript strict.
Tests automatisés avec Jest pour les tests unitaires et Cypress pour les tests de bout en bout, intégrés aux pipelines GitLab.
Une organisation des dossiers évolutive et maintenable dans le frontend et le backend.
Des API sécurisées, avec validation des entrées et filtres d’exception dans NestJS.

Enseignements et points à retenir

TurboPack a considérablement amélioré les temps de construction du frontend Next.js.
La mise en cache Redis a réduit la latence des API backend d’environ 70 %.
L’association NestJS, Prisma et PostgreSQL a fourni un backend de données fluide et évolutif.
L’automatisation CI/CD avec les pipelines GitLab garantit des déploiements et des contrôles qualité cohérents.
Les tests Jest et Cypress ont permis de détecter les bogues tôt, de réduire les régressions et d’améliorer la stabilité globale de la plateforme.
Les services AWS apportent flexibilité, capacité à monter en charge et fiabilité à l’infrastructure backend.

Conclusion

Dashfolio montre comment des technologies modernes comme React avec Next.js, Node.js avec NestJS, AWS et de solides stratégies de test avec Jest et Cypress peuvent s’associer pour créer des plateformes robustes de visualisation de données.

Découvrez le site : https://www.dashfoliodata.com/

Si vous avez un projet en tête ou avez besoin d’aide pour créer des applications web modernes et évolutives, n’hésitez pas à me contacter : 🔗 LinkedIn : Steward OUADI