Enterprise ERP

Integrated Enterprise Resource Planning System (National Scale)

Company: Nik Afaringan

Enterprise / Confidential Projects

Confidential

Enterprise Project

UI representation – actual system screenshots cannot be shared

This project was developed exclusively for a national-level organization. Due to security policies and organizational ownership, public links or system screenshots cannot be shared.

This project is a national-scale enterprise ERP system built with Next.js 16 (App Router) and TypeScript. The platform covers more than 20 independent subsystems, from accounting and budgeting to human resources, contracts, inventory, fixed assets, and business intelligence. Due to security policies and organizational ownership, sharing links or screenshots of the system is not possible. The primary focus was on designing a feature-first architecture in a codebase with 2,000+ files, multi-layer state management, RBAC at page and operation levels, and performance optimization in high-volume data grids.

Technologies

Next.js 16 (App Router)React 19TypeScript 5.8Redux ToolkitRedux PersistTanStack React Query v5MUI v7Ant Design v5Tailwind CSS v4React Hook FormZod@dnd-kitTipTapStimulsoft ReportsDexie (IndexedDB)date-fns-jalaliDay.jsi18nextAxios

Features

General accounting and financial documents
Budgeting and credit control
Payroll and employee portal
Project management (WBS, contracts, procurement)
Goods, inventory, and purchasing management
Fixed assets and depreciation
Check issuance and bank reconciliation
Guarantees and contracts
Document archive system
Business intelligence (Power BI Integration)
Subsystem management and dynamic form builder
Internal messaging system (SMS)
Master data and reference tables management (50+ modules)

My Role in Project

Front-End Developer (Next.js / TypeScript) Responsible for designing and implementing the front-end layer at enterprise scale, including: feature-oriented architecture, multi-layer state management, form and CRUD implementation, API integration, role-based access control, and performance optimization with high data volumes.

Challenges & Focus

Managing 20+ independent subsystems with different business logic in a unified codebaseDesigning a feature-oriented structure with module code prefixes (TBL_HRS_PMS_...) for long-term maintainabilityImplementing RBAC at pagetaband operation levels with custom hooksManaging complex forms with variable validation rules and field dependenciesFull Jalali calendar support across all formsfiltersand reportsPerformance optimization in high-volume data grids with pagination and virtual rendering

Technical Decisions

Redux Toolkit over Zustand

At ERP scale with 20+ subsystems, a mature state manager with strong DevTools, middleware support, and persist capability was required. Redux Toolkit provided this structure with better readability than raw Redux.

Next.js App Router

Nested routing with independent layout.tsx per subsystem enables precise code splitting and route-level access control without coupling to internal state.

React Hook Form + Zod

Given the high number of operational forms (create, edit, delete) across hundreds of entities, this combination enables per-entity schemas with minimal re-renders.

Stimulsoft Reports

For organizational needs of complex reports with predefined templates and direct print capability, this tool replaced lighter alternatives.

MUI v7 + Ant Design v5 together

MUI for layout, navigation, and general components; Ant Design for data tables, trees, and forms with specific enterprise behavior that would be costly to implement in MUI.

Optimizations & Solutions

Feature-first architecture with prefixed module codes to prevent conflicts in a 2,000+ file project
Custom RBAC hooks at three levels: usePagePermissionHookV2, useTabPermissionHook, useOperationPermissionHook
URL sync for filters and pagination state for bookmarking and browser navigation
Dexie (IndexedDB) for caching heavy reference data on the client
Separating session-params in Redux from auth state to manage current parameters (fiscal year, user, system builder)

Trade-offs & Engineering Considerations

At this scale, the main challenge was not feature implementation but maintaining architectural coherence over time.
Consistent module naming, repeatable api.ts / model.ts / hook.ts / views/ structure per feature, and shared CRUD hooks were the key decisions that made scale possible.

Outcome

This project provided deep experience in designing and maintaining the front-end of a national-scale enterprise ERP system, clearly demonstrating my ability to work with large codebases, feature-first architecture, and multi-subsystem platforms.

Back