An HR and payroll platform where admins run payroll, time, training and background checks, and employees and contractors see their own. I built the whole front end in React, connected it to the API, and built sign-in and role-based access.
01
One HR and payroll platform for a whole company: admins run payroll, time, training and checks, while employees and contractors see their own pay, hours and time off.
02
The whole front end in React and TypeScript, connected to the backend's API, plus sign-in and role-based access, so each person sees only what their role allows.
03
The admin side and a separate set of screens for each kind of user, built side by side with the backend developer, one stage at a time.
Counted from the design and the build
Teache was built by two people side by side: me on the front end and a backend developer on the API. Before writing code we mapped the whole flow from the Figma design, then built it in the same order on both sides.
Together
Map the flow
We went through the design screen by screen and agreed what each role needs and the order to build it in.
In sync
Authentication
Sign-in first. Every other screen depends on knowing who is there.
In sync
Authorization
Then roles: what an admin, an employee and a contractor can each see and do.
In sync
Onboarding
With accounts and roles in place, the steps a new person goes through to join, for employees and contractors.
In sync
The admin side
Admin came first: payroll, time, people, time off, reports, benefits, training, HR resources and background checks.
In sync
Every other role
Then each role in turn: salaried, hourly and per-diem employees, and contractors, each with their own dashboard, pay and time.
Front end
Me
Both of us
Together
Back end
Backend developer
Each highlight says what it does for the people using it, and how it works underneath.
01
One page shows the pay period, every worker's hours, rate, PTO and bonus, and the totals for gross pay, net pay and taxes. Payments can be adjusted before the run.
For the team
Check everyone's pay on one screen, then run payroll.
Under the hood
Built in React and TypeScript; the table and totals load from the API with TanStack Query.
02
Every worker's scheduled shift, clock in and out, and breaks for the pay period, with a button to create the next schedule.
For the team
See who worked when, without chasing timesheets.
Under the hood
Each row comes from the backend's time API, through Axios.
03
Active courses, enrollments and completion rate, each course's progress, assigned training with due dates, and a place to create and assign new courses.
For the team
Know who has finished what, and who's due next.
Under the hood
Reusable progress, table and chart components shared across the admin screens.
04
PTO usage by department and training completions by month, with a download for the full reports.
For the team
The big picture in two charts.
Under the hood
Charts built from the same API data the other screens use.
Teache is private, so these screens are rebuilt from the client's Figma design. Names, dates and amounts are sample content in the style of the design; the portraits are real photos from Unsplash.
After sign-in, the app knows each person's role and shows only what that role is allowed to see and do.
Admin
The HR and payroll team
Employee
Salaried, hourly and per-diem
Contractor
Hourly and independent
Teache is private, so these screens are rebuilt from the client's Figma design. The employee and contractor screens aren't shown.
Think of an office with key cards. Everyone signs in at the front door, and their card only opens the rooms their job needs: an admin's opens payroll and reports, an employee's opens their own pay and time off.
In the app, sign-in tells the front end who the person is and what role they have, and every page and action checks that role before it shows. Each screen gets its data from the backend's API through TanStack Query and Axios, and Redux Toolkit holds the state the whole app shares.
A person signs in
Sign-in screens wired to the backend's auth API
The app learns their role
Admin, employee or contractor, kept in app state
They see only their pages
Routes and actions gated by role
Every screen loads real data
TanStack Query and Axios against the backend's API
Mapping the flow first and building in the same order on both sides meant the front end and the API grew together: sign-in and roles, then onboarding, the admin side and every other role.
