Why re-engineering was the best solution
At first, we considered Webflow – a visual web design platform, CMS and hosting provider – because it supports Lottie and could streamline the web app development process. But after careful analysis and discussion, we came to the conclusion that Webflow was not the best option, as it could process only 60 requests per minute and would not be able to handle high traffic.
That's why, together with our client, we decided to re-engineer the app. Here’s what we suggested:
- Re-build the constructor from scratch;
- Move to a microservices-based architecture;
- Integrate with Google Cloud services;
- Extend video editing and rendering functionality;
We broke down the development process into several steps, starting with the re-architecture phase.
Designing a microservices architecture
We opted for a microservices-based architecture to enable the smooth integration of new features into the solution without impacting the overall performance of the system. This architecture also enabled us to develop more manageable services and ensured the scalability of the solution.
Integration with Google Cloud services
To deal with sudden traffic spikes, we moved the solution to Google Cloud Platform, as this service provider offered opportunities for developing, maintaining, and scaling the solution, while ensuring better usability and accessibility.
As our client moved to microservices, they needed to ensure better microservices management and more efficient cloud management. That’s why we deployed the app using Kubernetes which helped us avoid excessive workloads and enhance the extensibility of the video constructor.
Developing the app with React and Node.js
Our developers used React for the frontend, because its modular structure and flexibility simplify the process of making changes. For the backend development, we used Node.js as it is perfect for handling multiple simultaneous requests.
Expanding the capabilities related to video editing and rendering
Our next task was to extend the video constructor’s functionality. Here are the features we added:
- Overlays. It involves overlaying music, video effects, and video clips. As a result, a user can put some music or animation effects on the desired video.
- Notes. With notes, users can leave comments or describe their videos.
- Editable titles. This feature lets users create titles for their videos or edit them when needed.
- Multiselect. This feature provides the possibility to have more than one item selected at the same time.
- Drag-and-drop. This feature saves time and effort when moving videos from one place to another.