Submission document for Lendsqr Frontend Engineering Assessment
Candidate: Onazi Isaac Date: 9th April 2026 Live App: https://isaac-onazi-lendsqr-fe-test.vercel.app/ GitHub Repo: https://github.com/I-Onazi/lendsqr-fe-test Video Walkthrough: https://www.loom.com/share/2a46a4a18882486ea908e9050ac1842c
This project is a frontend implementation of the Lendsqr Admin Console. It covers four pages:
| Tool | Reason |
|---|---|
| React 19 + Vite | Required by assessment; Vite chosen for fast HMR and zero-config TypeScript support |
| TypeScript | Required; enforced strictly — zero any usage across the codebase |
| SCSS + BEM | Required; paired with BEM naming convention for structured, collision-free styles |
| React Router v7 | Client-side routing with protected route guards |
| Vitest + React Testing Library | Fast, Vite-native test runner; Jest-compatible API |
| @faker-js/faker | Generating 500 realistic Nigerian-locale mock users |
| IndexedDB + localStorage | Client-side caching for user detail records |
Before writing any code, I audited the Figma file and extracted every design token — hex values, font sizes, font weights, spacing units, border radii, and box shadows — into a single _variables.scss file. This became the source of truth for the entire styling system. Every colour, spacing value, and breakpoint used in the codebase traces back to a named variable, which traces back to the Figma design.
I used Work Sans from Google Fonts — the exact typeface in the Figma design. For layout dimensions, I measured the artboard directly: the sidebar is 283px wide, the header is 100px tall. These are hardcoded as SCSS variables, not guessed.
One deliberate deviation worth noting: The Figma references SF Compact Display as a secondary font for certain numeric values. That font is a system font available only on Apple devices. I listed it first in the font-family stack with Work Sans as the fallback, so it renders correctly on macOS and falls back gracefully on Windows and Linux. This is called out in the video walkthrough.