Un forum de discussion avec React pour le front-end et NestJS pour le back-end
- POK
- 2024-2025
- temps 2
- NestJs
- React
- API Rest
- Forum
- Serigne Mbaye Sy AMAR
Le but de ce POK est de mettre en évidence les connaissances que j’ai acquises durant l’ensemble de mes MONs, en créant un forum de discussion avec React comme front-end et NestJS comme back-end, en utilisant bien évidemment les API Rest pour la connexion entre les deux.
- Une base en NestJs
- Une Base en React
- Une base solide aux apis Rest
Les lien utiles pour la compréhension de celui-ci:
Table des matières
Présentation du Projet : Forum de Discussion
Pour ce projet, je vise à développer un forum de discussion où les utilisateurs peuvent partager des idées, poser des questions, et échanger des avis.
Objectif :
Créer un forum de discussion où je vais:
- Permettre aux utilisateurs de poster leurs questions ou réflexions.
- Offrir une fonctionnalité de commentaires pour interagir avec les discussions existantes.
- Intégrer des fonctionnalités supplémentaires comme les likes et le partage des posts.
Technologies utilisées :
- Frontend : React.js
- Backend : NestJS
- Base de données : MongoDB
- API REST : Pour la communication entre le frontend et le backend.
Outils et Méthodes Utilisées
1. Méthodologie Agile : Sprint Planning
-
Sprint 1 : Frontend et Maquette
-
[x] Création de la maquette du forum (UX/UI) (lien vers la maquette).
-
[x] Développement des composants frontend en React.js.
-
[x] Configuration initiale des interactions utilisateur (ajouter un post, afficher des posts).
-
-
Sprint 2 : Backend et Intégration
- [x] Mise en place du backend avec NestJS.
- [ ] Implémentation des endpoints API REST pour gérer les posts, commentaires et likes.
- [ ] Intégration frontend-backend pour synchroniser les fonctionnalités.
2. Horodatage
Sprint | Étapes | Temps Alloué | Description |
---|---|---|---|
Sprint 1 | Création de la maquette (UX/UI) | 3h | Conception de la maquette du forum |
Développement du frontend | 5h | Développement des composants React.js pour afficher et gérer les données. | |
Test et ajustements frontend | 2h | Débogage et amélioration de l'expérience utilisateur. | |
Sprint 2 | Configuration du backend avec NestJS | 4h | Création des modules, services, et contrôleurs pour gérer les données. |
Connexion avec MongoDB | 3h | Mise en place des modèles Mongoose et validation des données. | |
Intégration frontend-backend | 3h | Tests de communication via API REST et corrections des bugs rencontrés. |
Total : 20 heures pour les deux sprints.
3. Étude Post-Mortem
Après chaque sprint, j'ai effectué une analyse post-mortem pour évaluer ce qui a fonctionné, ce qui a été difficile et ce qui doit être amélioré.
- Sprint 1 : Frontend
Sprint 1 : Frontend et Maquette
- Points forts :
- Une interface respectant la maquette initiale.
- Modularité des composants React.js, qui facilite les modifications et les ajouts futurs.
- Points faibles :
- Difficile d’anticiper les besoins exacts du backend, ce qui a nécessité des ajustements plus tard.
- Probléme de PC trop lent
- Leçons apprises :
- Mieux coordonner les spécifications entre le frontend et le backend dès le début.
- Améliorations :
- Développer un meilleur système de gestion d’état global (comme Redux ou Context API).
Redux est un gestionnaire d'état global pour les applications React. Il permet de gérer l 'état de l'application de manière centralisée et de réduire la complexité des composants.