Skip to content
←
ENFR
Project / Product rebuild / 2026

People records, onboarding, and the work between them.

NyxPeople started as HRnet, one of my OpenClassrooms projects. It worked, but it still felt like a CRUD exercise.

I left the school version alone and rebuilt the idea with fewer features, keeping the remaining workflows connected.

Role
Product design + front end
Stack
React · TypeScript · MSW
01 / Overview

Three jobs were enough.

More screens would not make the work more believable. I kept three jobs and left payroll, recruitment, and leave management out.

01

Overview

See what needs attention

Readiness, starters, and pending work in one place.

02

Employees

Find and maintain people

A durable directory built for hundreds of records.

03

Onboarding

Prepare the first week

Six practical steps connected to the employee record.

At a glance

400 people, not a spreadsheet.

400+
fictional records
3
connected product jobs
URL
durable directory state
02 / The product

What 400 records reveal.

The directory is where the product proves itself. Daily state is durable, visible, and shareable instead of disappearing after every navigation.

01

Density

400+ fictional records expose weak hierarchy instead of hiding it.

02

Memory

Search, filters, sorting, and pagination live in the URL.

03

Continuity

Open a profile, go back, or refresh. The directory stays where you left it.

03 / Connected workflows

A person becomes work, not another isolated screen.

One employee record carries identity and employment details through editing and six practical onboarding steps.

01 / 03

Profile

Identity, employment details, and onboarding readiness stay connected on one record.

One recordProfile
Employee profile connecting identity, employment details, and onboarding readiness
02 / 03

Create + edit

The same structured employee data drives both creation and editing.

One form languageCreate + edit
Employee form with validation and structured employment fields
03 / 03

Onboarding

Six practical onboarding steps remain attached to the employee record.

Record to workflowOnboarding
Six-step onboarding checklist connected to the employee record
04 / Under the interface

The backend is mocked. The frontend isn't.

MSW provides a typed API boundary. Browser data is versioned and validated; requests can fail, mutations can recover, and stale responses do not get the last word.

REACT UITYPED APIMSWVERSIONED DATA
05 / Process

What I kept, and what I tested.

I kept HRnet’s employee-record starting point and limited the rebuild to overview, employees, and onboarding. Then I tested what happens when someone filters the directory, edits a record, refreshes, or hits an error.

  1. 01

    Choose the jobs

    Reduce the scope to overview, employees, and onboarding.

  2. 02

    Connect the record

    Carry one person through directory, profile, editing, and onboarding.

  3. 03

    Harden the state

    Make filters shareable, data versioned, and mutations recoverable.

  4. 04

    Verify the product

    Exercise the interface through automated tests, CI, and browser review.

06 / Outcome

The record holds together.

With 400+ fictional records, the directory can be searched, refreshed, and returned to without resetting. Edits also carry through to the employee profile and onboarding checklist.

On the overview, starters and pending tasks come before headline metrics. Type and spacing help keep that priority clear.

146
unit + integration tests
26
Playwright scenarios
CI
GitHub Actions
DEPLOY
Vercel