Work07 / 23

ATNDC

Attendance for a university department. Instructors take a register in under 15 seconds on a phone, even offline, and the office sees it live.

Role
Product, design, full stack
Year
2026
Field
Web
ATNDC, cover

Brief

ATNDC replaces paper registers and spreadsheets for a university department in Algeria, about 70 instructors and 1,500 students. Instructors take attendance on a phone in under 15 seconds, online or not. The administration sees every register live, chases nothing by hand, and catches what paper never could, like a student who is present in one lesson, absent in the next and back for the third. It runs in French, English and Arabic, in light and dark, and teaches itself with guided tours. Built solo in about two weeks as a complete demo, ready for the client's own hosting.

In numbers

15 s

to take a register on a phone, online or not

260+

automated tests, including database policy tests

1,500

students seeded for load tests, every screen under 0.4 s

Screens

23 screens

One tap registers
Everyone starts present, tap the absent, swipe to flip, long press for the student card. It works offline and syncs by itself, and drafts survive a crash.
Live dashboard
Registers sent, pending and overdue, absences and a 7 day trend, per group and per instructor, for any past day.
Skip detection
Flags a present, absent, present pattern across a day, plus students who left early or arrived late.
Late registers handled
Instructors ask the administration to reopen a past lesson, and staff with the right permission can type in a paper register.
Requests instead of phone calls
Absence notices, lesson moves and group renames reach the office in the app and get approved or declined with a reply.
Reports on demand
Daily, period, absentees by name, student sheet and compliance, as CSV, Excel or print ready PDF in three languages, with a column picker.
Teaches itself
21 guided tours across the app and 15 interactive examples in the Help centre.
Administration tools
A calendar with closed days and substitutes, a timetable with clash prevention, students and groups with year end promotion, Excel and CSV import with a dry run, one file backup and restore, and 11 feature switches.

Front end
React 19, TypeScript and Vite with Tailwind CSS v4 and shadcn/ui; TanStack Query with a persisted cache and a Dexie (IndexedDB) outbox for offline registers.
Security in the database
Supabase Postgres with row level security on every table, writes through checked SQL functions, and an append only audit log of every change.
Exception only storage
Only absent and late rows are stored and present is the roster minus the exceptions, so the database stays small and queries stay fast on free hosting.
Offline and installable
Register submits are idempotent, so the outbox can replay them safely, and the PWA update prompt never interrupts a register.
Three languages
About 1,000 interface strings each in French, English and Arabic, with full right to left built on logical CSS properties.
Tested
260+ automated tests, including policy tests on an in-memory Postgres (PGlite) and real stack tests against a local Supabase. Seeded with 70 instructors and 1,500 students, every screen answered in under 0.4 s.

Built with the same tools