Our client is a marketing technology startup that produces and distributes video content, including social media content and banner ads. They help brands reach larger audiences and boost online sales with quality video materials. 

In 2019, our client developed a minimum viable product (MVP) of a video constructor with a simple interface and editing and rendering functionality. This web app was created to help other companies produce quality video content to promote their brands. 

The solution received positive feedback from several users. But the limited functionality and unavailability of this web app for a wide audience restrained product growth. Plus there were some technical issues:

1. First, the solution didn’t have any database, but only a JSON file with a few demo users, which made it impossible to increase the user base. 
2. Second, video rendering was very slow – it took more than 5 minutes to render a 30-second clip. 
3. Third, users couldn't render more than two clips simultaneously, which increased the time needed to create their video content. 
4. Finally, the existing version of LottieFiles animations worked slowly and did not support the HTML format. 

That’s why the company turned to Wetelo to achieve the following goals:

• Make it possible to increase the number of users;
• Improve video rendering capabilities;
• Enable simultaneous rendering of several clips;
• Upgrade LottieFiles, an open-source animation file format  

Tech audit to assess the system and identify areas that needed improvements 

To improve our client’s solution, we conducted a tech audit to find the bottlenecks in the video constructor and understand what improvements should be done to ensure better performance. Together with our client, we made a decision to refactor the web app and implement the following functionality:

• Create a database;
• Build a separate service for rendering;
• Switch to a new version of LottieFiles to produce HTML-supported animations.



Web app refactoring to improve the quality of the video constructor

To meet our client’s requirements, we broke down the development process into the following steps: 

1. Creating a database. We designed an SQL database that was needed to add new users and handle multiple concurrent users trouble-free.  
2. Building a separate service for rendering. We constructed a separate service for rendering that could be updated, deployed, and scaled independently. As a result, the speed of the video export increased, and it became possible to render more than two clips at the same time.
3. Switching to a new version of LottieFiles. We switched to a new version of LottieFiles as the existing one was outdated and could not produce animations that supporting the HTML format. 

After we refactored the video constructor, the solution started attracting more users. However, as the product's user base grew, our client realized they need to add more advanced features that were lacking and make the solution more scalable to enable future growth and improvements. 

Next challenge: scaling the video constructor to meet increased customer demand

Our client returned back to us to rebuild their constructor and solve the following challenges:

• Improve the overall scalability and maintainability of the video constructor;
• Implement additional video editing and rendering features.

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: 

1. Re-build the constructor from scratch;
2. Move to a microservices-based architecture;
3. Integrate with Google Cloud services;
4. 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:

1. 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. 
2. Notes. With notes, users can leave comments or describe their videos.
3. Editable titles. This feature lets users create titles for their videos or edit them when needed. 
4. Multiselect. This feature provides the possibility to have more than one item selected at the same time.
5. Drag-and-drop. This feature saves time and effort when moving videos from one place to another. 

Revamped video constructor: restructured, scalable, and fun

After our work was done, the client received a refined and scalable video constructor with the features necessary for creating high-quality content. The new version lets users render many videos at the same time without any performance drops. Users appreciated the re-built product as now they can produce video content faster, while having more fun. 

Companies like Kalevala Jewelry, House of Intuition, Posti, Kiinteistömaailma, and F-Secure use the constructor to create content and promote their brands. 

Thanks to the transition to microservices, migration to Google Cloud, and adoption of Kubernetes, our client can now enhance the constructor even more and develop additional features for their users in the future. 

We’re actively working on improving the product based on user feedback.