Skip to content

README.md

Latest commit

 

History

History
194 lines (142 loc) · 5.86 KB

README.md

File metadata and controls

194 lines (142 loc) · 5.86 KB

Test technique — React + Node/TS

Dashboard

Bienvenue 👋

L’objectif est simple : évaluer vos compétences en architecture backend, en gestion de données, et en développement frontend autour d’un petit projet de Business Intelligence.

👉 Ce test est conçu pour être réalisé en une demi-journée maximum.
👉 Une fois terminé, merci de le remettre dans un dépôt GitHub privé et de nous y inviter.

Lexique :

  • CPC (coût par clic) : coût moyen d'un clic sur une période et/ou un segment donnée (jour, client, canal...).

Starter kit

Pour gagner du temps, un starter kit vous est fourni avec :

Le Figma est fourni à titre indicatif, vous êtes libre d'intégrer le design de votre choix.

Priorité au backend : architecture modulaire (Collectors / Calculators / Requests), validation, tests, performance.

Vous n’avez pas besoin de tout réinventer : le but est d’étendre et d’architecturer proprement.

Librairies conseillées

  • shadcn/ui → composants UI (cards, table, date picker, etc.)
  • Recharts → graphiques (bar/line chart)
  • Zustand → gestion d’état simple et scalable côté frontend
  • React Table → tableaux filtrables/paginés
  • React Query → data fetching (déjà intégré au starter)
  • Zod → validation données au runtime
  • DuckDB → pour requêter les données (Fichier Parquet) en SQL

👉 Vous êtes libre d’utiliser les librairies de votre choix, tant que l’architecture et les fonctionnalités demandées sont respectées.

Données fournies

  • Un fichier parquet (data/clicks.parquet)
  • Clients : Nike, Adidas, Hoka, On, Brooks
  • Canaux : Instagram, Tiktok, Facebook, Google
  • Période : 2024-01-01 → 2025-09-01
  • Entre 50 et 200 clics par jour et par client
  • Format : client,canal,cost,datetime
  • cost ∈ [0.30 ; 10.00] (€/clic)

Architecture back-end attendue

Interfaces

// Pour chacunes de ces interfaces, des paramètres peuvent être passés dans le constructeur
export interface Collector<TData> { load(): Promise<TData>; }
export interface Calculator<TInput, TOutput> { compute(input: TInput): Promise<TOutput>; }
export interface Request<TResponse> { execute(params: RequestParams): Promise<TResponse>; }

Flux

Request.execute(params) :

  • appelle un Collector (lecture parquet + pré-filtres),
  • appelle un Calculator (logique métier / KPIs),
  • renvoie un DTO stable qui sera directement retourné par la route.

API à implémenter

1) CPC (Série temporelle)

GET /cpc/series?date_from=&date_to=&client=

  • date_from : obligatoire
  • date_to : obligatoire
  • client : optionnel, si non précisé tous les clients sont aggrégés
[
  {"date":"2024-01-01","cpc":1.84,"count":1245},
  {"date":"2024-01-02","cpc":1.73,"count":1180}
]

2) CPC par client

GET /cpc/by-client?date_from=&date_to=&canal=

  • date_from : obligatoire
  • date_to : obligatoire
  • canal : optionnel, si non précisé tous les canaux sont aggrégés
[
  {"client":"On","cpc":1.62,"count":982},
  {"client":"Adidas","cpc":1.87,"count":1011},
  {"client":"Hoka","cpc":0.95,"count":940}
]

3) Liste des 5 000 derniers clics

GET /clicks?date_from=&date_to=

[
  {"client":"Nike","canal":"Instagram","cost":5.40,"datetime":"2024-01-01 14:53:00"},
  {"client":"Hoka","canal":"Facebook","cost":5.40,"datetime":"2024-01-01 14:53:00"}
]

Front à implémenter

  • Date range picker (par défaut : 01/01/2025 → 31/01/2025).
  • Line chart (CPC) : GET /cpc/series?date_from=&date_to=&client=
  • Bar chart (CPC par client) : GET /cpc/by-client?date_from=&date_to=&canal=
  • Table “Clics” : GET /clicks?date_from=&date_to=
    • recherche côté client sur client/canal
    • pagination
    • colonnes : Client / Canal / Coût / Date.

Tests exigés

  • 1 test unitaire de Calculator
  • 1 test unitaire de Request

Livrables attendus

  • Repo GitHub privé contenant :
    • FEEDBACK.md (explications de l'architecture, des choix techniques, avis sur le test et commentaires).
    • Les modifications effectuées sur le code.
  • Commits progressifs.
  • Invitez-nous en tant que collaborateurs sur le dépôt privé.

Barème (100 pts)

  • Architecture & DIC (35)
  • Calcul & exactitude (20)
  • Qualité code (15)
  • Frontend & data-viz (15)
  • Tests (10)
  • Doc (5)

Getting Started

  1. Cloner le repo :

    git clone https://github.com/YieldStudio/react-node-bi-technical-test.git
cd react-node-bi-technical-test

  2. Lancer le projet :

    pnpm install
pnpm run dev

  3. Vérifier que le front-end est accessible à l’adresse http://localhost:3000.

  4. Vérifier que le back-end est accessible à l’adresse http://localhost:3001.

  5. Vérifier que les tests fonctionnent :

    pnpm run test

# Vous pouvez lancer les tests en mode watch depuis le dossier apps/api
cd apps/api
pnpm run test:watch

  6. Commencer à implémenter les fonctionnalités demandées.

  7. Créer un dépôt privé sur GitHub depuis votre compte.

  8. Changer l’origine Git pour pointer vers votre dépôt privé :

    git remote remove origin
git remote add origin git@github.com:<votre-compte>/<votre-repo-prive>.git

  9. Pousser votre travail :

    git push -u origin main

  10. Invitez-nous en tant que collaborateurs sur ce dépôt privé (vous recevrez nos identifiants GitHub par email).