An employee management system / case study

Manage people,
not permissions.^{Vol. 01}

A minimal, role-based employee system. Admin sees everything, HR manages the team, and Employees see only their own world. Built end-to-end as a single-session production sprint.

Built in: One session
Roles: Admin · HR · Employee
Surface: 26 endpoints · 8 pages
Tests: 5 E2E suites

Launch dashboard →Read case study

02

90-second walkthrough

Watch it work.

Skip to features ↓

● Recorded · admin flow

03

What's inside

Six things that actually shipped.

Build phases ↓

01 / FEATURERBAC

Three roles, one source of truth.

Admin, HR, and Employee permissions enforced at the API layer with ownership checks on every protected route.

02 / FEATUREWorkflow

Approve leave without the spreadsheet.

Submit, approve, or reject requests in a single workflow. Pending becomes done in two clicks.

03 / FEATURESalary

Payroll visibility, role-aware.

Employees see their own pay only. Managers get the full org. Same endpoint, different scope.

04 / FEATUREDashboard

A dashboard for each role.

Stat cards, recent activity, and upcoming work — composed per role on a single screen.

05 / FEATURESecurity

Validated, signed, hardened.

Zod schemas at the boundary, JWT bearer auth, role guards, and ownership checks. No leaky endpoints.

06 / MATRIXRBAC

The access matrix at a glance.

Every protected route enforces both role and ownership.

Action

Admin

HR

Employee

List employees

✓

—

Create / edit

✓

—

Delete employee

✓

—

Approve leave

✓

—

Own salary

✓

04

How it was built

Six phases. One session.

Open dashboard →

PHASE 01

Models & schema

Mongoose models for User, Employee, Leave, and Salary with strict types and unique constraints.

mongoosezod

PHASE 02

Auth & RBAC middleware

JWT with jose, password hashing via Bun.password, requireAuth and requireRole guards.

josebun.password

PHASE 03

API surface

Hono routes for auth, employees, leaves, and salary. Ownership enforced beside roles.

honorest

PHASE 04

Dashboard

Vite + React 19 with react-router. Sidebar, header, role-filtered nav, modal-driven CRUD.

reactvite

PHASE 05

End-to-end tests

Playwright covering login, RBAC matrix, employee CRUD, leave flow, and direct API blocks.

playwright

PHASE 06

Seed & deploy

Idempotent seed on first boot. Render staging blueprint and Docker-on-VPS for production.

dockerrender

05

Try every role

Three accounts. Live.

Sign in →

Adminadmin@workshield.devadmin1234

Full access. Create, edit, delete — and see all payroll.

HRhr@workshield.devhr12345

Manage the team and approve leaves. No deletions.

Employeeemployee@workshield.devemployee123

Only your own data. Submit leaves, view your pay.

Open the dashboard
and try every role.

Spin up the system locally with seed data, or open the live demo. Three accounts, preloaded with employees, leaves, and three months of payroll.

Launch dashboard →View source

06

Get in touch

Hire me, or just say hi.

Email

mgwunna.mw

@icloud.com

Open →GitHub

@mg-wunna

github

Open →LinkedIn

in/mg-wunna

Open →Portfolio

mg-wunna

.vercel.app

Open →

Manage people,not permissions.Vol. 01