ZeroDark - Responsive Project Management System

26.02.2021

ZeroDark is a project management system, a web-based HR and task management application at the Ophardt Maritim shipyard. This app allows managers to control the teams and processes of motorboat production. There are 3 main user roles: manager, employee and system administrator.

About client

Ophardt Maritim is part of the international OPHARDT group of companies. The company creates reliable and affordable aluminum boats for mass production, develops new hulls and boat designs.

Our task

The Ophardt Team contacted us and we discussed their app design idea, the initial task was to replace the paper workflow system with a web-based CRM. This CRM should be hosted on internal Ophardt servers, available to all employees and production managers.

Managers will be able to see production tasks for each employee, how much time is left for the task, leave comments and change statuses of tasks with employees

In ZeroDark CRM, all internal processes and their interconnection should be displayed - management process should be intuitive, based on the Kanban principles.

We completed development, fully tested the app and launched it into production within 3 months.

Tools

  • React.js
  • MariaDB
  • Docker
  • Node.js
  • Nest.js

Backend: Node / NestJS / TypeScript, MySQL

Frontend: React / TypeScript

Docker, Git, NGINX

Project description

Managers in ZeroDark can create new employees, edit their data, sort records in the table by all columns, search by employee’s and task data and get records in different table views in real time.

Managers can change the status of each employee - set up if employee is working from home, is sick or on a vacation.

We have developed a Trello-like kanban board specifically for this app. The kanban board is made using several technologies. Drag’n’drop function allows to smoothly move items between columns. With the help of WebSocket, the board members can monitor its changes in real-time.

Managers and workers can have several common tasks and special tasks as well. Clicking on a task opens a modal window with information about it. The manager can change the status of the task and leave feedback in chat on the work results. The task status and time to completion is highlighted in color.

We used phased loading, React methods and webpack configuration to load only necessary resources on the page, which allows us to save traffic and upload only needed details on the page.

Conclusion

We have created a responsive CRM system for tracking employee tasks and the status of their work. We solved the problem of a large number of bureaucratic operations, getting rid of the paper system of document circulation. Now all internal processes at the shipyard are displayed in a single system.

  • #Web
Share