Project Manager - Application Kanban Fullstack

Application de gestion de projet agile. Une architecture totalement découplée avec un frontend réactif pensé pour l'expérience utilisateur et un backend robuste orienté entreprise.

Contexte & Objectifs

Ce projet vient consolider ma première année de bachelor à CODA. Après avoir travaillé sur des moteurs graphiques en JavaScript natif pour assimiler la logique de bas niveau, l'objectif ici était de s'éloigner du développement purement front-end pour adopter les standards architecturaux actuels de l'industrie.

Il s'agissait d'assimiler une stack technique totalement nouvelle (Next.js, NestJS, Prisma) et de relever le défi de la conception d'une API sécurisée, tout en maintenant une interface client fluide et complexe (manipulation asynchrone, Drag & Drop).

Objectifs techniques validés :

• Maîtrise du paradigme orienté objet et de l'injection de dépendances côté serveur.
• Séparation des responsabilités sur l'ensemble de la stack.
• Implémentation d'une couverture de tests automatisés.
• Modélisation de base de données relationnelle et typage de bout en bout.

Stack Technique

Frontend : Next.js (App Router), React, TypeScript, Tailwind CSS, Dnd-kit. Backend : NestJS, TypeScript, Prisma (ORM), PostgreSQL, Jest (Tests). Infrastructure : Pipeline CI/CD, Git.

Challenges Techniques Résolus

1. Complexité Algorithmique

Le problème : L'algorithme de Drag & Drop centralisait la gestion de l'interface React, les appels API et les calculs mathématiques d'insertion de tickets (moyennes de positionnement). Cela générait un composant monolithique avec une complexité cognitive très élevée et des risques de rendus en cascade. La solution : Extraction totale de la logique métier dans des Custom Hooks et découpage en fonctions mathématiques pures. Cette refactorisation a permis d'isoler l'état local du cycle de vie global, rendant le composant purement visuel et garantissant l'exactitude des calculs de positionnement avec une stricte validation des types.

2. Sécurisation des Flux de Données et Intégrité

Le problème : Passer d'un environnement purement front-end à une architecture Fullstack expose l'application aux failles classiques. La solution : Implémentation d'une politique de sécurité stricte côté NestJS. Utilisation systématique de Data Transfer Objects (DTO) pour valider la forme et le type de chaque requête entrante avant toute interaction avec la base de données. Mise en place de Guards pour vérifier l'authenticité des tokens JWT et configuration fine des règles CORS.

3. Fiabilité Industrielle et Prévention des Régressions

Le problème : Assurer qu'une modification sur une route de l'API ou sur une logique de permission ne casse pas le reste de l'application, un défi majeur lors de la découverte d'un framework backend complexe. La solution : Rédaction d'une suite de plus de 60 tests unitaires sur le backend (avec Jest). Ces tests sont couplés à une pipeline d'Intégration Continue qui valide automatiquement l'intégrité de la logique métier à chaque nouvelle modification du code source.

Architecture du Projet

/
├── /frontend          # Application Next.js (Interface Client)
│   ├── /src/components # Composants UI isolés (Modales, Kanban, etc.)
│   ├── /src/hooks      # Logique métier extraite (ex: useKanbanDragAndDrop)
│   └── /src/lib        # Utilitaires réseaux et configuration
│
└── /backend           # API NestJS (Logique Serveur)
    ├── /src/modules    # Découpage métier (Auth, Projects, Tickets)
    ├── /prisma         # Schémas de base de données relationnelle
    └── /test           # Suite de tests unitaires et e2e

Installation & Lancement

Le projet est divisé en deux environnements distincts nécessitant chacun leur propre configuration.

Prérequis

• Node.js : v22.x ou supérieure (Testé sur v22.19.0)
• NPM ou Yarn
• PostgreSQL (en local ou via un conteneur Docker)

1. Cloner le dépôt :

git clone https://github.com/EnzoRouet/NexTask.git

2. Configuration Globale : Des fichiers .env.example sont fournis à la racine des répertoires /frontend et /backend. Dupliquez-les en les renommant .env et renseignez vos variables (notamment DATABASE_URL pour PostgreSQL et les secrets JWT).
3. Lancement de l'API (Backend) :

cd backend
npm install
npx prisma db push
npm run start:dev

4. Lancement du Client (Frontend) :

cd frontend
npm install
npm run dev

Alternative : Lancement via Docker

Nous proposons deux modes de lancement avec Docker pour faciliter l'évaluation :

1. Mode Production (Conteneurisation complète) : Lance l'intégralité de l'infrastructure (PostgreSQL + API + Frontend) en environnement isolés :

docker compose up --build -d

2. Mode Développement (Hybride) : Lance uniquement la base de données via Docker, tout en conservant vos serveurs locaux (API & Frontend) pour bénéficier du Hot Reload :

docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d

Note : Un jeu de données prêt à l'emploi est disponible dans /Liverables/db/export_nextask.sql si vous souhaitez réinitialiser la base de données avec des exemples concrets ainsi que les identifiants de connexions des users présents dans /Liverables/TEST_UTILISATEURS.MD.