Employers and financial institutions in Zambia need a secure way to offer salary-backed loans to employees, with proper affordability checks, employer approval workflows, rate calculations, and compliant OTP-based authentication. The system had to support multiple user types (employees, sales agents, employer admins), handle sensitive financial data, integrate with async messaging for OTP delivery, and remain understandable to stakeholders who are not reading Python tracebacks.

I built PaySafe as a Django REST API that powers loan lifecycle management, employee onboarding, employer setup, rate-sheet processing, and multi-channel OTP (SMS, WhatsApp, email via queue workers). Alongside the API, I shipped an interactive architecture diagram, a layered, animated system map where users can simulate real request paths (OTP send, loan application, rates lookup, etc.) and watch nodes and edges light up step by step. This makes the backend tangible for demos, onboarding, and portfolio storytelling.

• JWT authentication with MFA / OTP login

  Secure auth flows with multi-factor and one-time password verification.

• Loan lifecycle management

  Loan creation, approval stages, refinancing, and deductions.

• Employee & employer operations

  Employee lookup, affordability checks, and employer hierarchy (divisions, departments, units).

• Rates engine

  PAYE calculations and employer rate-sheet uploads.

• Async OTP delivery

  OTP generation, verification, and async delivery through AWS SQS.

• Geo & document storage

  Zambian provinces and districts endpoints; employer MOUs and rate sheets on S3.

• Interactive architecture diagram

  Four-layer map (Client → Gateway → Services → Data) with five simulatable request flows, glowing nodes, animated edges, layer filtering, and live simulation HUD.

• OTP delivery without blocking the API

  OTP sends must be fast for the user but reliable across SMS/WhatsApp/email. Implemented an outbox pattern: the API writes to Django storage and enqueues SQS; workers handle provider routing separately.

• Keeping the architecture diagram in sync with reality

  Encoded real PaySafe paths (OTP send, verify, MFA, loan, rates) as data arrays where every consecutive node pair must match a real edge, so the simulation cannot lie about connectivity.

• Vercel deploying a monorepo with Django present

  Vercel auto-detected Django from manage.py and failed after the Vite build. Fixed by setting framework to Vite explicitly, pointing build output to architecture-flow/dist, and ignoring Python app files during deploy.

• Complex loan domain logic

  Loans tie together employees, employers, approvals, deductions, refinancing, and notifications. Used DRF viewsets, signals, and dedicated notification modules to keep side effects out of view logic.

Shipped a production-grade REST API covering auth, lending, employer setup, rates, and OTP. Deployed an interactive architecture experience at paysafe-architecture.vercel.app. Documented five critical request flows stakeholders can replay in one click. Established a reusable pattern for animated system diagrams (data → engine → renderers → canvas) applicable to other projects.

1. 1.Derive UI state, don’t duplicate it, the simulation works because nodes and edges never own timers or active flags; everything flows from two values and pure helper functions.
2. 2.Naming conventions are architecture, the e-<source>-<target> edge ID convention let the engine map abstract step indices to concrete SVG paths without a lookup table.
3. 3.Monorepos need explicit deploy boundaries, hosting a static doc site from the same repo as a Django app requires clear .vercelignore / framework config, or platforms will guess wrong.
4. 4.Visual tooling pays off for complex backends, a five-minute demo of a glowing request path communicates more than a Swagger page for non-engineer stakeholders.

Live project

paysafe-architecture.vercel.app/

Demo

paysafewebsite.vercel.app/