The panel optimizes cross-departmental workflows with modules for product management, warehouse operations and control of industrial knitting and paint machines.

React.js

Image of coffee being poured into a glass

Problem

Admin Panel presented several complex technical challenges. The system needed to support multiple departments, including warehouse management and industrial machine control, while maintaining performance and scalability. One of the key issues was rendering large datasets.

Another major challenge was the lack of reliable real-time data from industrial knitting and paint machines, which limited automation and visibility on the production floor. Additionally, backend APIs were often undocumented or incomplete, requiring careful testing and reverse-engineering for stable integration.

Architecturally, the entire panel had to be built from scratch with a structure that could support future expansion and maintainability. The application also required a flexible, role-based access control system, including support for unauthenticated mobile devices used in warehouses. Efficient state management was critical due to nested and shared data across modules. Lastly, performance bottlenecks, such as unnecessary re-renders and heavy initial loads, had to be resolved to ensure a smooth user experience across all departments and devices.

chemicals
chemicals

Production technology in detail

To handle large dataset used React Window for virtualized rendering. For real-time integration with knitting machines implemented WebSocket listeners.

I structured the codebase with Atomic Design, applying SOLID and DRY principles. Business logic was separated via custom hooks and I documented the entire architecture. Access control was implemented via a dynamic RBAC system and device-specific UI logic was handled using device-detector-js.

State Management: I used Context API for nested logic and Redux Toolkit for global state. Performance was improved using React.lazy, memoization, and lazy loading. The project followed Git Flow to support structured collaboration. I also wrote unit tests with Jest.

chemical modal
chemical modal
Image of a coffee shop menu
Image of a coffee shop menu
Image of milk being poured into a glass of coffee
Image of milk being poured into a glass of coffee
Image of coffee and a computer on a small table
Image of coffee and a computer on a small table
Image of an iPhone lying on a table
Image of an iPhone lying on a table