Development of the product for the creation of advertising banners

Duration: 2 years 6 months
Industries: IT Industry; Marketing, Advertising, Sales
Services: Backend Development; Custom Software Development; Frontend Development
Software Categories and Types: B2B Solutions
Technical Expertise: Web Development
DevOps Expertise: Advanced build organization
Technologies: CI/CD Automation Servers; Safari; Redux; Git; CSS3; GitHub; ECMAScript; HTML5; Redux Thunk; Project Management, Collaboration and Bug Tracking; Operating Systems; WebSocket; Frontend; gRPC; CSS; Sentry; ReactJS; Trello; Drone; MacOS; Build and Dependency Platforms and Tools; Backend; JavaScript; JavaScript Frameworks; JavaScript Libraries; Development Infrastructure and Tools; Source Code Management (SCM); Standards and Protocols; npm; CI/CD and DevOps; Languages, Protocols, APIs, Network Tools; Slack; Webpack; Software Engineering and Management Tools; Other Technologies; log4js; React Virtualized; React Howler; React DnD

Team size (3):
2 Frontend
1 Backend

Project summary

The project is not exactly a conventional banner generator. Banner templates and animations are created by designers and developers based on the customer’s ideas. Ready-made templates are uploaded to a personal account, where the customer can edit the text, change the size, and download banners that are ready to be uploaded to the ad network.

The task of the project was to automate the process of banners creation. It takes too much time to develop banners manually: you need to create a few options of the background, text style, text and language content. Therefore, there was an idea to create banner templates and automatically generate them with different texts and images to automate the process as much as possible. The resulting platform allows significantly reducing the time needed to develop banners.

Today, it is an actively developing platform, the landing page is regularly developed to promote it, the administrator panel has been developed to conveniently control the process of banners creation.

Interaction with the platform is carried out according to the following scenario: the customer provides layouts of banners that it wants to create or posts a request for designer services on the platform website. Then, the frontend developer creates the banners and makes animation according to the layouts — the platform allows creating banners in HTML5, GIF, PNG, MP4 formats. When the banner templates are ready, the customer in its personal account can edit the text, change the images, background, effects, banner size, overlay music, and download banners that are ready to be uploaded to the ad network. Banner templates are created according to certain rules that allow using ready-made banners on such advertising services as Google AdWords, Yandex.Direct, etc.

For the purposes of easy banner downloading, functionality is implemented that allows to:

select the same folder naming template and set unique file names for each banner. When downloading a ready-made banner from the platform, the user will have access to a structured hierarchy of folders and files;
by clicking on the Download button, the files of the created template are processed and the download link will be sent to the user’s email address.

The project has been actively and dynamically developing. The iterative approach to development and frequent impressions allow determining whether the team is on the right track in the initial stages.

The customer is open to dialogue, so JazzTeam engineers actively participate in discussions of the platform’s new functionality and make suggestions — together we managed to create a modern, competitive product.

Banner generator advantages:

promptness — the user can create banners using ready-made templates;
the user can create animated banners;
the possibility to make changes to the text independently to be able to advertise products in different countries;
the possibility to create and add banners in a range of sizes that meet the requirements of modern advertising platforms.

Technologies used

Development: JavaScript ES6, React, Redux, HTML, CSS3, redux-thunk, react-virtualized, react-howler, react-dnd, WebSocket, gRPC, npm, WebPack.

Environment: Slack, Trello, Drone.io, Github, Sentry.

Project features

Development in an actively and dynamically developing project with frequent delivery of ready-made increments.
Development of frontend and backend parts of the platform from scratch.
The finished product is tested; the product does not have a test rig.
The need for research to implement the converter of HTML5 banners to GIF/MP4 files.

Project results

Successfully developed frontend and backend parts of the platform, banner layout functionality for customers, landing page and admin page.
We used the virtualization technology, which allows to iteratively upload data on the page — the content is uploaded on the scroll of the mouse, which significantly reduced the load on the browser.
We implemented a converter for rendering HTML5 banners in PNG format, and later added functionality for rendering MP4 and GIF animated videos.
We created an export module that distributes finished files into folders and creates a common archive to be sent to the end user.
The platform functionality in terms of UI was covered by automated tests.

Company’s achievements on the project

The task of creating a video based on HTML5 banners was quite extensive and required in-depth research in the subject area. To implement it, it was necessary to rewrite the animation of all banners implemented in JavaScript. As a result, we created a converter module that meets the customer’s requirements.
Our team took part in the development of the customer’s internal product, which grew into a public service.
We managed to create a modern, competitive product that meets the customer’s requirements.