Playground Explorer est une plateforme de recherche et d’indexation d’aires de jeux pour enfants. Elle permet de trouver des aires de jeux proches de chez soi, de les noter et de les commenter.
Fonctionnalités
- Recherche d’aires de jeux par géolocalisation
- Notation des aires de jeux
- Commentaires sur les aires de jeux
- Ajout de nouvelles aires de jeux avec photos, description, localisation et inventaire des équipements/caractéristiques.
- Gestion des aires de jeux favorites
Technologies
Le front a été développé avec le framework React.js en typescript, redux pour la gestion de l’état global et tailwindcss pour le style. Leaflet a été utilisé pour la carte interactive. Le back-end de l’application est une API REST développée en Node.js avec Express et 2 sources de données persistantes : une base de données MongoDB pour la gestion des sessions administrateurs et PostgreSQL pour les données des aires de jeux et des utilisateurs de l’application. L’API sert un dashboard d’administration pour la gestion des aires de jeux et des utilisateurs, ainsi qu’une documentation Swagger pour les endpoints de l’API afin de faciliter l’alignement entre le front et le back.
Déploiement
Le front et l’API sont déployés sur Heroku. La base de données MongoDB est hébergée sur MongoDB Atlas et la base de données PostgreSQL est hébergée sur Heroku Postgres. Un pipeline CI/CD a été mis en place pour déployer automatiquement les nouvelles versions de l’application.
Front
L’objectif de l’application Front était d’avoir une interface responsive et accessible pour les utilisateurs. Le design a été pensé pour être simple et intuitif, avec une carte interactive pour visualiser les aires de jeux.
Back
Dans le cadre du développement de l’API, l’objectif était de fournir des endpoints RESTful pour le front, avec une documentation Swagger pour faciliter l’intégration. La gestion des sessions administrateurs a été implémentée pour sécuriser l’accès au dashboard d’administration et séparer les rôles des utilisateurs de manière sécurisée et efficace.
Conclusion
C’était un projet très intéressant à réaliser, avec des challenges techniques variés. J’ai pu apprendre beaucoup de choses car c’était une première expérience pour moi avec React.js et Redux. J’ai également pu découvrir de nouvelles technologies comme Leaflet. Je suis très satisfait du résultat final et j’ai pû la présenter lors du passage de mon titre professionnel de développeur web et web mobile, où j’ai été félicité pour la qualité de mon travail.