Neopharma QR Management Dashboard

Sole frontend engineer on a QR code generation and management platform for NEOVAULT® drug test kits — a healthcare-grade system with strict business rules around QR lifecycle, data integrity, and role-based access. Worked directly with one backend engineer to deliver the full product.

Neopharma — QR Management Dashboard
Services
Next.js 15React 19TypeScriptTailwindCSSRadix UIReact Hook FormZodAxiosWebSocketVite
ClientVietnam Blockchain Corporation
RoleFrontend Developer
Year2025
Info

Owned end-to-end frontend delivery of a QR management system handling three distinct QR types (Kit, Batch, Box), each with its own generation form, validation logic, serial number strategy, and pre-submission preview

Implemented a strict QR lifecycle UI — status flow from Generated through Pending Activation to Activated/Archived/Deactivated, with business-rule enforcement (e.g. blocking activation on expired QRs), reason-code selection on deactivation, and bulk confirmation dialogs

Built a flexible print/download module supporting PNG/PDF output with size, resolution, and design template customization, file naming conventions, printer selection, and layout preview before output

Delivered a data import pipeline with column-mapping UI, multi-layer validation (field-level, cross-field, uniqueness), per-record error reporting, and async processing for large datasets; plus multi-format export with filter criteria

Engineered RBAC across all UI surfaces — permission-gated rendering, role-specific dashboard views, and manufacturer-scoped data access ensuring each user only sees their own organization's data

Built user and role management modules with account creation (OTP email verification), status toggling, password reset, and full role CRUD

Implemented a secure authentication flow: email 2FA with user self-enrollment, brute-force protection with account lockout, and a forgot password flow with 15-minute time-limited tokens

Built an audit log viewer with filtering and CSV report export, integrated WebSocket real-time notifications, and delivered a responsive, skeleton-loading dashboard with interactive analytics charts

See live project

Neopharma — QR Management Dashboard https://res.cloudinary.com/derrbbbyc/image/upload/v1776235986/Screenshot_15-4-2026_135240_www.neopharmatechnologies.com_ommfi8.jpg
Neopharma — QR Management Dashboard https://res.cloudinary.com/derrbbbyc/image/upload/v1776235986/Screenshot_15-4-2026_135240_www.neopharmatechnologies.com_ommfi8.jpg

Next projects