Test Technique - Système de Gestion de File d'Attente

Contexte de l'exercice

Bienvenue ! Ce test technique a pour objectif d'évaluer vos compétences en développement full-stack sur une application réaliste.

Durée maximale : 3 heures

Le chronomètre démarre dès réception de ce projet. L'objectif n'est pas forcément de tout terminer, mais de démontrer votre capacité à structurer du code propre, à prioriser les fonctionnalités essentielles et à prendre les bonnes décisions techniques.

Le projet

Vous devez compléter un système de gestion de file d'attente type guichet administratif ou SAV. Le concept est simple : des clients prennent des tickets et attendent leur tour, tandis que des agents les appellent un par un.

Ce qui est fourni

Pour vous permettre de vous concentrer sur l'essentiel, nous avons préparé :

Structure complète du projet (dossiers, architecture)
Authentification fonctionnelle (login/logout, protection des routes)
Interface utilisateur (pages admin et client avec composants UI)
Composants réutilisables (Button, Card, Input, Badge, Table)
Configuration complète (TypeScript, Tailwind, ESLint)

Ce que vous devez implémenter

Vous devez compléter la logique métier de l'application :

Gestion des tickets (création, récupération, mise à jour)
Système de file d'attente FIFO (premier arrivé, premier servi)
Connexion entre le front et le back (API routes)
Gestion d'état côté client
Gestion des erreurs

Important : Vous êtes libre dans vos choix d'implémentation. Nous évaluons votre capacité à structurer votre code, pas à suivre une recette précise.

Comptes de test

Deux utilisateurs sont disponibles pour tester l'application :

Rôle	Email	Mot de passe
Admin	admin@admin.com	admin
User	user@user.com	user

Accès aux pages

Admin (admin@admin.com) : Accès à /admin (tableau de bord agent)
User (user@user.com) : Accès à /user (salle d'attente client)

Fonctionnalités attendues

MVP (Minimum Viable Product)

Voici ce qui constitue le cœur fonctionnel attendu :

Interface Admin (`/admin`)

Afficher la liste complète des tickets avec leurs statuts
Bouton "Appeler le suivant" qui récupère le prochain ticket dans la file (logique FIFO)
Possibilité de changer le statut d'un ticket (waiting → in_progress → done)
Onglet "Stats" avec quelques métriques basiques

Interface User (`/user`)

Créer un nouveau ticket (formulaire avec nom)
Afficher le ticket de l'utilisateur connecté avec son statut
Afficher le numéro du ticket actuellement appelé
Afficher la position de l'utilisateur dans la file d'attente

Back-end

API REST pour gérer les tickets (création, récupération, mise à jour)
Logique de file FIFO pour déterminer le prochain ticket à appeler
Stockage des données (en mémoire, SQLite, ou autre selon votre choix)

Fonctionnalités bonus

Si vous avez le temps et souhaitez aller plus loin, voici quelques pistes :

WebSocket : Mises à jour en temps réel sur les deux interfaces
Système de priorités : Gestion de tickets urgent/normal/low
Catégories : Différents types de demandes (Technique, Administratif, etc.)
Timer : Chronomètre sur le ticket en cours de traitement
Temps d'attente estimé : Calcul basé sur l'historique
Annulation : Possibilité d'annuler un ticket
Tests : Tests unitaires ou E2E

Critères d'évaluation

Voici ce sur quoi nous portons notre attention :

Critères principaux (70%)

Structure et architecture : Organisation du code, séparation des responsabilités
Qualité du code : Lisibilité, cohérence, respect des bonnes pratiques
Typage TypeScript : Utilisation correcte et stricte des types
Logique métier : Implémentation de la file FIFO, gestion des statuts

Critères secondaires (30%)

Priorisation : Avez-vous su identifier et réaliser l'essentiel en priorité ?
Gestion d'erreurs : Robustesse de l'application
Git : Commits atomiques et messages clairs
Bonus : Fonctionnalités supplémentaires bien implémentées

Note importante : Un MVP complet et propre vaut mieux que des fonctionnalités bonus inachevées ou bâclées.

Conseils

Commencez simple : Faites d'abord marcher le MVP avant d'ajouter des fonctionnalités
Utilisez l'IA : ChatGPT, Copilot, Claude sont autorisés et même encouragés
Commitez régulièrement : Des commits atomiques permettent de suivre votre raisonnement
Restez pragmatique : Pas besoin de sur-ingénierie, privilégiez des solutions simples et efficaces
Documentez vos choix : Si vous prenez une décision technique importante, ajoutez une ligne dans ce README pour l'expliquer

Livrables

À la fin de votre session (3h maximum) :

Code source : Tout votre code committé sur Git
README mis à jour : Ajoutez une section en fin de fichier avec :
- Les fonctionnalités que vous avez implémentées
- Vos choix techniques et pourquoi
- Ce que vous auriez fait avec plus de temps
- Comment tester l'application

Instructions Git

Important : Ne travaillez pas directement sur ce repository !

Étapes à suivre :

Clonez ce repository sur votre machine locale :
```
git clone [URL_DU_REPO]
cd [NOM_DU_DOSSIER]
```
Créez un nouveau repository sur votre compte GitHub/GitLab (en privé)

Changez l'origine du repository :

git remote remove origin
git remote add origin [URL_DE_VOTRE_NOUVEAU_REPO]

Poussez le code initial sur votre nouveau repository :
```
git push -u origin main
```
Ajoutez-nous en tant que collaborateurs sur votre repository privé pour que nous puissions évaluer votre travail (les adresses email vous ont été communiquées par mail)
Travaillez normalement en faisant des commits réguliers sur votre repository

Note : Le chronomètre de 3h commence dès que vous avez cloné le repository et créé le vôtre.

Documentation Technique

Installation

Prérequis

Node.js 18+
pnpm

Démarrage

# Installer les dépendances
pnpm install

# Lancer le serveur de développement
pnpm dev

# Ouvrir http://localhost:3000

L'application se lance sur http://localhost:3000.

Stack technique

Framework : Next.js 14+ (App Router)
Langage : TypeScript
Styling : Tailwind CSS
Authentification : Cookie session (sans bibliothèque externe)
Gestionnaire de paquets : pnpm

Structure du projet

/src
  /app
    /api
      /auth              # Endpoints d'authentification
        login/
        logout/
    /admin               # Dashboard agent
    /user                # Interface client
    /login               # Page de connexion
    page.tsx             # Page d'accueil (redirections)
    layout.tsx           # Layout racine
  /components
    /ui                  # Composants réutilisables
      Button.tsx
      Card.tsx
      Input.tsx
      Badge.tsx
      Table.tsx
    /layouts
      DashboardLayout.tsx
  /lib
    auth.ts              # Utilitaires d'authentification
    types.ts             # Types TypeScript
  middleware.ts          # Protection des routes

Composants UI disponibles

Button

<Button variant="primary" size="md" onClick={handleClick}>
  Cliquer ici
</Button>

Props :

variant : 'primary' | 'secondary' | 'danger'
size : 'sm' | 'md' | 'lg'

Card

<Card>
  <h2>Titre</h2>
  <p>Contenu</p>
</Card>

Input

<Input
  label="Nom"
  value={name}
  onChange={(e) => setName(e.target.value)}
  error={error}
/>

Badge

<Badge variant="success">Terminé</Badge>

Props :

variant : 'success' | 'warning' | 'danger' | 'info'

Table

<Table
  columns={['Numéro', 'Nom', 'Statut']}
  data={tickets}
/>

Authentification

L'authentification est déjà implémentée et utilise un système de cookie session simple.

Utilisateurs disponibles

Admin : admin@admin.com / admin
User : user@user.com / user

Protection des routes

Le middleware protège automatiquement :

/admin : accessible uniquement par le rôle admin
/user : accessible uniquement par le rôle user

Déconnexion

Un bouton de déconnexion est disponible dans les deux interfaces.

Scripts disponibles

# Développement
pnpm dev

# Build de production
pnpm build

# Démarrer en production
pnpm start

# Linting
pnpm lint

Notes importantes

Pas de base de données requise : Vous pouvez stocker les données en mémoire, utiliser un fichier JSON, SQLite, ou autre selon votre préférence
Pas de responsive obligatoire : L'application est pensée pour desktop, mais peut être un bonus si vous avez le temps
Code auto-explicatif : Privilégiez du code clair plutôt que des commentaires

Questions fréquentes

Q : Puis-je utiliser des bibliothèques externes ?
R : Oui, tant que vos choix sont justifiés. Attention cependant au temps d'installation et de configuration.

Q : Dois-je implémenter tous les bonus ?
R : Non, concentrez-vous sur le MVP d'abord. Les bonus sont là si vous avez du temps supplémentaire.

Q : Comment sont gérées les données ?
R : C'est à vous de décider ! In-memory, fichier JSON, SQLite... Choisissez la solution qui vous semble la plus adaptée pour un test de 3h.

Q : Puis-je modifier la structure fournie ?
R : Oui, vous êtes libre de restructurer si vous pensez que c'est nécessaire. Expliquez juste vos choix.

Dépendances principales

Les dépendances sont déjà installées dans le projet :

next : Framework React
react & react-dom : Bibliothèque React
typescript : Langage
tailwindcss : CSS utility-first
eslint : Linting

Bon courage !

Section candidat

À compléter par vous à la fin de votre session

Fonctionnalités implémentées

Choix techniques

Expliquez vos décisions importantes ici

Ce que j'aurais fait avec plus de temps

Listez les améliorations/fonctionnalités que vous auriez ajoutées

Instructions de test

Expliquez comment tester les fonctionnalités que vous avez implémentées

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

mayasquad/next-technical-test

Folders and files

Latest commit

History

Repository files navigation