How We Made a Project Management Solution with React - XB Software

A Real Story How We Made a Cost-Effective Project Management Solution with React

| |Reading time: 8 minutes

Nowadays, the absence of frameworks, libraries, and other development tools is not a thing to worry about. Simultaneously with the evolution of web applications and the growth of their complexity, developers are creating and improving a wide variety of techniques allowing to reach new technological levels. As a result, the main task for modern developers is to choose proper tools that correspond to the features of a project.

Such technological variety provides benefits for customers as well. Since there’s no need to create the developing tools, it’s easier to establish such a plan of a project that won’t waste customer’s money and allow moving to the goal by the shortest way.

an Effective Project Management Solution Based on React

In this article, we’ll consider a little example that demonstrates our company’s approach to the process of web development that allows saving time and customer’s money.

Facing the First Challenges

XB Software was asked to create a project management system to be integrated into the existing enterprise resource planning system. The primary challenge was to develop a working project management solution in a reasonable time and reduce the risk of spending a year or more on developing software that might be unsuitable for the customer’s employees.

To guarantee the best possible outcome, our react.js development team decided to provide a product with the minimal required functionality as soon as possible. Such an approach allows the client to try the project management solution in practice before determining if further improvements worth of costs and time spent.

When Business Analysts Come to the Rescue

First of all, let’s consider the reasons that pushed the customer to choose the development of project management software. The delivery regions of the logistics company have expanded significantly. As a result, the number of employees and vehicles in use have increased. To optimize the supply chains and inventory management, the client needed to adopt a new project management solution.

Our business analysis team have made a scrupulous analysis of software that the customer used. According to the result of their work, the implementation of a Gantt chart based project management application was proposed to the customer as a possible solution. The question was how to help our client to make sure that the solution will work well for this particular situation without spending a significant amount of time and money on the creation of a full-featured and comprehensive system.

Straight Into the Action

According to the initial plan, the final software solution was pretty complex. Our team of developers needed time to provide the client with the working version of this management app. The implementation of all the features that were planned required plenty of time and money. It was a risky approach for the customer as well since it was the first experience of collaborating with our company and he had no confidence in our reliability yet.

To overcome these issues, our project managers offered not to rush and develop a minimum viable product at first. This solution allowed us to get the result quickly and assess user satisfaction before proceeding to further improvements.

From the customer’s point of view, such plan of actions guarantees relatively quickly benefits since tangible results are available at the early stages of development. Also, the small project means small risks. Therefore, the client can decide on further cooperation before substantial funds are involved. According to the results of the first stage, our developers can implement additional features iteratively.

Starting With the Essential Features

Our development team decided that the very first version of the application should include the essential features of every project management solution based on the Gantt chart. Therefore, it was decided to implement the following functionality first:

  • Users can start a new project
  • Users can rename or delete the existing project
  • Users can create and edit tasks and dependencies between them
  • Users can switch between the available projects
  • Users can start a new project on the basis of a previously created template

 Thus, our development team had a task to create a minimum viable product that will allow the client to decide whether such a solution is suitable for the business or not. The implementation of more complex features for this Gantt solution was delayed until the next stage of the project.

Choosing the Right Tools

Due to the many performance-oriented features of React and its popularity, we chose this library to develop the front-end part of the project management application. There were two main reasons for choosing. First of all, dealing with such a popular library, you minimize the risk of upgrading a software system created with obsolete technology in the future. Also, we have a team of well-trained React developers that have experience with real-life projects.

To learn more about using React in real-life software solutions, check our article React.js for Building Powerful Dashboards. Sharing Experience.

Another essential component of a project management system is a Gantt chart. And here’s the point where we faced some obvious difficulties caused by the very nature of React. This library doesn’t provide a wide variety of complex widgets. If you set a goal to find a Gantt chart component for React, you’ll find a couple of them, that’s for sure. But the problem is that these components don’t provide the advanced functionality required for a full-featured project management app.

Considering the described problems, our development team had two main choices: to create a Gantt chart component from scratch or integrate a third-party component. As you may have guessed, due to the required amount of time, the first option wasn’t suitable for our case. Using a third-party Gantt chart is not a problem-free approach as well. For example, if we use a non-React library, some features will be unavailable. For example, a development team can’t use the performance benefits of server-side rendering.

Weighing all the pros and cons, our team decided to use DHTMLX Gantt as a Gantt chart component. First of all, it allows implementing both the features required for the MVP version of the management solution and those that will be added at the further stages. Also, the React-related issues described earlier are not a big problem for the project management apps of such kind. From the customer’s perspective, DHTMLX Gantt is also an excellent choice since it provides broad functionality at a relatively low cost which has a positive effect on the overall price of the project.

So. After the detailed and scrupulous planning, it was decided that a React application based on DHTMLX Gantt functionality will guarantee the best outcome.

Making the Customer Happy

The whole process was separated into several parts. The first stage implied the implementation of the basic set of features. Our development team has created a web-based project management solution that allows users to start working on the project immediately.

The basic version of the project management solution allows creating a new project either from scratch by adding new tasks to the calendar grid or using one of the available templates. Besides the opportunity to choose one of the built-in templates, there’s the feature that allows creating custom ones. To do so, a user can create the current project as a template. If a management team works with multiple projects, there’s the possibility to switch between them easily. Each project consists of tasks with different types of dependencies between them. Users can define new dependencies, change the percent of task completion and its duration using an intuitive drag-and-drop interface.

DHTMLX&React

The customer had an opportunity to try this MVP version of the management app. By mutual agreement of the parties, our developers continued to add more advanced features to the application. For example, the resource usage diagram displayed below was added to the initial app:

Resource view Gantt

Conclusions

At the moment, our business analysis team continue to work with the client to define the better easy for further improvements that will guarantee the better efficiency of the project management app. The development team members, in their turn, do their best to get the most out of React and DHTMLX Gantt.

The employees of the client’s company noted the positive impact of this solution on the overall working performance. Their feedback allowed the client to rethink the requirements in accordance with the actual needs of users. Providing the MVP version of the app to the client, we were able to get feedback much earlier which allowed to make changes at the early stages of the project.

react developers

logo
give us a like
The following two tabs change content below.

Aleksandra Dikusar

XB Software content marketing manager. She is passionate about everything related to Marketing&Digital, always open for new, creative and crazy things.