Business component of the project
The customer’s company provides services for the localization of games, applications and websites, and collaborates with a network of translators distributed around the world. The process of interaction with customers and contractors includes many stages that need to be systematized and monitored. The company records business processes related to translation and maintains documentation in Google services (Sheets, Docs, Gmail). However, the use of these resources does not meet the customer’s needs: it does not provide the necessary speed of work, ensures saving only a limited amount of data and is ultimately inconvenient for use for current purposes.
The customer needed to develop a Web application to manage translation processes. The new system should have provided usability and specific features that are important to the customer. In the long run, using own Web application saves resources and optimizes routine processes. It also ensures higher security and confidentiality of data storage.
Technical description of the project
The Alfa Web application is implemented in the form of a data table. You can delete, add, and modify values in cells using the built-in elements: input fields, drop-down lists, calendar, and buttons. The frontend part of the system was developed using ReactJS. The application status is managed through Redux. The custom text editor for sending emails is based on the Draft.JS framework. Interaction between the frontend and backend is carried out through gRPC technology.
JazzTeam responsibilities on the project
On this project, our team performed the following activities:
- Development of the Table component that is easily customized for the required tasks and data types. JazzTeam created a table architecture from scratch in a short time. This section of the software provides the following features: display of a large amount of data, their convenient reading, editing, deletion, processing. In addition, automatic calculation of fields on the server side was introduced, as well as payment amount calculation and sending emails to customers from the application.
- Creation of an interface for sending emails using the Draft.JS framework. The customer needed a custom text editor to send emails. At the same time, basic html tags did not ensure flexible management of each text fragment. Full freedom of text styling, expansion and customization was required, so our team had to abandon ready-made solutions and turn to a lower-level tool. Based on the results of the research and development of the demo editor, priority was given to the Draft.JS framework. The potential of this technology is extremely high. The following features are available to the user: inline styling of text, adding links and decorators, adding images to the context and creating an image slider. At the moment, the framework is implemented and used in the application. Works on customizing the text editor are still on: email templates, a search engine, and tagging are being developed.
- In addition, our area of responsibility included the following tasks:
- Interface development according to the designer’s layouts.
- Creating a unified style for the project code.
- Works on application performance optimization.
Technologies used
Development: JavaScript ES6, React, Redux, Draft.js, HTML, CSS3, redux-thunk, WebSocket, gRPC, npm, WebPack
Environment: Slack, Trello, Drone.io, Github, Sentry
Project features
- Our team joined the project when the customer had only a small codebase and UI architecture. Further development was based on the existing architecture.
- Extreme continuous delivery. JazzTeam delivered new stable product functionality every day.
- Distributed team. Backend was developed by the customer.
- The need to take into account a large number of specific software requirements constantly added by the customer.
- Work on Scrum with frequent deliveries and daily feedback from the customer.
Company’s achievements on the project
- The UI part of the system was successfully implemented. The application is actively used by the customer’s team.
- A database of components was developed for reuse and to quickly update other sections of the application, as well as other projects of the customer.
- Simple navigation across the table both with the mouse and with the keyboard was implemented.
- Research on the selection of the optimal framework for editing email texts was conducted.
- Web application virtualization was implemented: the data in the table is loaded dynamically when the user is scrolling the page. This allows saving a large amount of data within a single page (for example, calendar entries with a range of more than 3 years).
- Our team gained experience in supporting a product in long-term operation. In addition to development, we were involved in the long-term support and long-term development of an essential component of the system.
Screenshots
