On m'a donné ça comme exercice technique pour un poste de dev front-end

Bordel je suis censé faire quoi

# Take-Home Exercise  Editable Users with Optimistic Updates

## Constraints

- Use **React + TypeScript**
- Use **no libraries** except Tailwind CSS
- All code must be in a **single file** (except the provided `api.ts`)
- Do not use:
  - TanStack Query / SWR
  - Zod / validation libraries
  - Form libraries

---

## Provided

You are given a fake API (`api.ts`) with:

- `fetchUsers(): Promise<User[]>`
- `updateUserStatus(input): Promise<User>`
- `updateUserName(input): Promise<User>`

Types include:

- `User`
- `UserId`
- `UserRole`
- `UserStatus`
- `AppError`

The API simulates:

- latency (2001200ms)
- random failures (~20%)
- versioning to handle race conditions

---

## Features to implement

### 1. Fetch users

- Fetch users on component mount
- Handle states:
  - loading
  - error
  - empty dataset
  - success

### UI states

- Loading  show loading message
- Error  show error message + retry button
- Empty dataset  show `"No users available"`
- Success  show users list

---

### 2. Display users

Each user must display:

- name
- email
- role (`admin` | `member`)
- status (`active` | `inactive`)

Use **stable keys**.

---

### 3. Toggle user status

Each user has a button:

- `"Activate"` / `"Deactivate"`

Behavior:

- Update UI **optimistically**
- Call API:
  ```ts
  updateUserStatus({
    id,
    status,
    expectedVersion
  })
  ```

* If success  keep change
* If failure  rollback + show error

Constraints:

* Prevent double-click spam
* Each user manages its own loading state

---

### 4. Edit user name

* Click `"Edit"`  replace name with input
* Input is **controlled**
* Show `"Save"` and `"Cancel"`

Behavior:
* Save triggers API:
```
  updateUserName({
    id,
    name,
    expectedVersion
  })
```
* Disable save while pending
* If success  update UI
* If failure  revert + show error

---

### 5. Async behavior

* Multiple updates can happen in parallel
* Must handle:

  * optimistic updates
  * rollback
  * race conditions
* Do not allow stale responses to overwrite newer state

---

### 6. State modeling (important)

Do NOT mix UI state into server data:

❌ Avoid:

```ts
{ id, name, status, isUpdating, error }
```

✔ Instead separate:

* server data (`User[]`)
* UI state per user

Example:

```ts
type UserUIState = {
  isUpdating: boolean;
  error: AppError | null;
};
```

---

### 7. Rendering rules

* UI states must be **mutually exclusive**
* Avoid duplicated layout wrappers
* Compute derived values **before return**
* Do not mix logic inside JSX

---

### 8. Type safety (important)

* No `as` casts allowed
* Use type guards if needed

Error type:

```ts
type AppError = {
  type: "network" | "validation" | "not_found" | "conflict";
  message?: string;
};
```

Handle errors explicitly in UI.

---

### 9. UX details

* Show per-user loading state
* Show per-user error message
* Do not block the whole UI when one user updates
* Keep UI responsive

---

## Optional improvements (bonus)

* Keep stale data visible during retry instead of blanking UI
* Add keyboard support for edit flow
* Add minimal accessibility (aria attributes)
* Handle conflict errors gracefully (e.g. retry suggestion)

---

## Evaluation criteria

The reviewer will look for:

* Correct async handling (optimistic update, rollback)
* Clear state modeling
* Proper separation of concerns
* Type discipline (no unsafe casts)
* Clean rendering logic
* Simplicity and readability (no over-engineering)

---

## Goal

Produce code that is:

* predictable
* explicit
* easy to reason about
* robust to async edge cases

Avoid cleverness. Favor clarity.

Le 10 avril 2026 à 09:58:26 Tutisz a écrit :
Claude fait ça en 5min chrono

osef, t'es censé savoir le faire sans IA

Le 10 avril 2026 à 09:59:07 :

Le 10 avril 2026 à 09:58:26 Tutisz a écrit :
Claude fait ça en 5min chrono

osef, t'es censé savoir le faire sans IA

bah ta question c'est "je fais quoi ?"
=> claude

Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

Le 10 avril 2026 à 09:59:07 :

Le 10 avril 2026 à 09:58:26 Tutisz a écrit :
Claude fait ça en 5min chrono

osef, t'es censé savoir le faire sans IA

bah ta question c'est "je fais quoi ?"
=> claude

ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

Le 10 avril 2026 à 10:00:55 :

Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

Le 10 avril 2026 à 09:59:07 :

Le 10 avril 2026 à 09:58:26 Tutisz a écrit :
Claude fait ça en 5min chrono

osef, t'es censé savoir le faire sans IA

bah ta question c'est "je fais quoi ?"
=> claude

ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

bah je l'explique, c'est un test pour junior hein

Le 10 avril 2026 à 10:03:53 Tutisz a écrit :

Le 10 avril 2026 à 10:00:55 :

Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

Le 10 avril 2026 à 09:59:07 :

Le 10 avril 2026 à 09:58:26 Tutisz a écrit :
Claude fait ça en 5min chrono

osef, t'es censé savoir le faire sans IA

bah ta question c'est "je fais quoi ?"
=> claude

ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

bah je l'explique, c'est un test pour junior hein

ah ok, ce serait quoi un test senior du coup ?

Le 10 avril 2026 à 10:04:50 :

Le 10 avril 2026 à 10:03:53 Tutisz a écrit :

Le 10 avril 2026 à 10:00:55 :

Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

Le 10 avril 2026 à 09:59:07 :

> Le 10 avril 2026 à 09:58:26 Tutisz a écrit :

> Claude fait ça en 5min chrono

osef, t'es censé savoir le faire sans IA

bah ta question c'est "je fais quoi ?"
=> claude

ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

bah je l'explique, c'est un test pour junior hein

ah ok, ce serait quoi un test senior du coup ?

Un truc un peu plus compliqué que faire une vue avec un formulaire

Le 10 avril 2026 à 10:05:11 Tutisz a écrit :

Le 10 avril 2026 à 10:04:50 :

Le 10 avril 2026 à 10:03:53 Tutisz a écrit :

Le 10 avril 2026 à 10:00:55 :

Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

> Le 10 avril 2026 à 09:59:07 :

> > Le 10 avril 2026 à 09:58:26 Tutisz a écrit :

> > Claude fait ça en 5min chrono

>

> osef, t'es censé savoir le faire sans IA

bah ta question c'est "je fais quoi ?"
=> claude

ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

bah je l'explique, c'est un test pour junior hein

ah ok, ce serait quoi un test senior du coup ?

Un truc un peu plus compliqué que faire une vue avec un formulaire

vas-y donne des exemples précis kho

Le 10 avril 2026 à 10:05:30 :

Le 10 avril 2026 à 10:05:11 Tutisz a écrit :

Le 10 avril 2026 à 10:04:50 :

Le 10 avril 2026 à 10:03:53 Tutisz a écrit :

Le 10 avril 2026 à 10:00:55 :

> Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

> > Le 10 avril 2026 à 09:59:07 :

> > > Le 10 avril 2026 à 09:58:26 Tutisz a écrit :

> > > Claude fait ça en 5min chrono

> >

> > osef, t'es censé savoir le faire sans IA

>

> bah ta question c'est "je fais quoi ?"

> => claude

ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

bah je l'explique, c'est un test pour junior hein

ah ok, ce serait quoi un test senior du coup ?

Un truc un peu plus compliqué que faire une vue avec un formulaire

vas-y donne des exemples précis kho

Perso je challengerai le candidat sur la maitrise de la programmation réactive par exemple, avec des tableaux de flux de données à merger

Le 10 avril 2026 à 10:12:12 MajinKuu a écrit :
Bien le phishing?

rapport ?

Ou coder un Mario like multi joueur dans le navigateur, tu rejoins la partie avec ton téléphone et le téléphone fait office de manette. (je demande uniquement que le personnage puisse se déplacer, sauter et coder une brique qui gère les collisions). Bon ça prendrait une journée à faire donc trop long mais c'est juste pour te donnée l'idée.

En soit c'est pas une question de seniorité ça mais ce genre de test me permet de voir qui sait réfléchir, c'est accessible à quelqu'un qui sort d'école s'il est intelligent alors que d'autres avec 10 ans d'xp en sont incapables. C'est pas un test de connaissance mais de réflexion, ça permet de voir qui sait réfléchir

Le 10 avril 2026 à 10:13:18 Tutisz a écrit :
Ou coder un Mario like multi joueur dans le navigateur, tu rejoins la partie avec ton téléphone et le téléphone fait office de manette. (je demande uniquement que le personnage puisse se déplacer, sauter et coder une brique qui gère les collisions). Bon ça prendrait une journée à faire donc trop long mais c'est juste pour te donnée l'idée.

En soit c'est pas une question de seniorité ça mais ce genre de test me permet de voir qui sait réfléchir, c'est accessible à quelqu'un qui sort d'école s'il est intelligent alors que d'autres avec 10 ans d'xp en sont incapables. C'est pas un test de connaissance mais de réflexion

non mais on teste un dev frontend là pas un dev de jeu vidéo

Un peu long/chiant à faire, mais c'est vraiment le B.A.BA honnêtement.

Le 10 avril 2026 à 10:13:59 :

Le 10 avril 2026 à 10:13:18 Tutisz a écrit :
Ou coder un Mario like multi joueur dans le navigateur, tu rejoins la partie avec ton téléphone et le téléphone fait office de manette. (je demande uniquement que le personnage puisse se déplacer, sauter et coder une brique qui gère les collisions). Bon ça prendrait une journée à faire donc trop long mais c'est juste pour te donnée l'idée.

En soit c'est pas une question de seniorité ça mais ce genre de test me permet de voir qui sait réfléchir, c'est accessible à quelqu'un qui sort d'école s'il est intelligent alors que d'autres avec 10 ans d'xp en sont incapables. C'est pas un test de connaissance mais de réflexion

non mais on teste un dev frontend là pas un dev de jeu vidéo

C'est du front end ce que je demande, tu peux le faire en JS
Que le mec sache utiliser un framework je m'en tamponne, ça s'apprend en 1 semaine ça

Le 10 avril 2026 à 10:08:46 :

Le 10 avril 2026 à 10:05:30 :

Le 10 avril 2026 à 10:05:11 Tutisz a écrit :

Le 10 avril 2026 à 10:04:50 :

Le 10 avril 2026 à 10:03:53 Tutisz a écrit :

> Le 10 avril 2026 à 10:00:55 :

> > Le 10 avril 2026 à 10:00:21 Tutisz a écrit :

> > > Le 10 avril 2026 à 09:59:07 :

> > > > Le 10 avril 2026 à 09:58:26 Tutisz a écrit :

> > > > Claude fait ça en 5min chrono

> > >

> > > osef, t'es censé savoir le faire sans IA

> >

> > bah ta question c'est "je fais quoi ?"

> > => claude

>

> ok et quand tu dois expliquer ton code au recruteur technique tu fais quoi ?

bah je l'explique, c'est un test pour junior hein

ah ok, ce serait quoi un test senior du coup ?

Un truc un peu plus compliqué que faire une vue avec un formulaire

vas-y donne des exemples précis kho

Perso je challengerai le candidat sur la maitrise de la programmation réactive par exemple, avec des tableaux de flux de données à merger

On parle de frontend le desco.