Shrey Patel
2024 — 2026UI/UX Design + Frontend Engineering
01

Technource ERP

Designing clarity into enterprise complexity.

An internal ERP built as a single-page React application. Eight modules, eight roles, one component library — and a permission model that had to be legible to the people using it, not just correct in the database.

Modules
8+
User roles
8
Architecture
React SPA
Realtime
WebSockets
Web screens2 of the surfaces
Projects · board, drag & drop, sprint sync
Reporting · dashboards across eight modules
System map · architectureDrawn, not captured
React SPA coreSingle page · client routed
  • 01Projects
    Kanban · drag & drop · sprint sync · filtering
  • 02HRMS
    HR scoring
  • 03AttendanceLive
    Biometric · realtime over WebSockets
  • 04Recruitment
  • 05Reporting
    Dashboards
  • ··+3 more
    Eight modules in total
Role-based accessEight roles · one interface
WorkflowBoard · drag & drop · sprint sync
  1. 01The problem

    Eight modules that had to feel like one product.

    Projects, HRMS, Attendance, Recruitment and Reporting each arrived with their own vocabulary and their own idea of what a table should look like. The work was not adding features. It was finding the small set of patterns that every module could be expressed in, then holding the line on them.

  2. 02Access

    Eight roles, one interface.

    Role-based access control across eight user roles. Rather than branching the interface per role, permissions resolve into the same layout — actions and modules appear, disappear or explain themselves, so nobody learns a different product because of their job title.

  3. 03Workflow

    A Kanban board that behaves like the one people already know.

    A Jira-style board with drag-and-drop task movement, sprint synchronisation and filtering. Familiarity was the requirement: the fastest interface to learn is the one that matches the mental model people brought with them.

  4. 04Realtime

    Attendance that is true right now.

    Real-time biometric attendance over WebSockets, feeding HR scoring and reporting dashboards. Live data changes the design problem — the interface has to stay readable while the numbers underneath it move.

  5. 05The system

    A component library, not a stylesheet.

    A reusable Tailwind component library underpins all eight modules. Designed in Figma, implemented in React, then used as the actual constraint on what new screens could look like. That loop is the reason the product stayed coherent.

Details
Category
Enterprise Product / UX / Frontend
Year
2024 — 2026
Role
UI/UX Design + Frontend Engineering
Built with
React.js, Tailwind CSS, REST APIs, WebSockets, Figma
Next projectAll work