Frontend Development of Pixel-Perfect Site with Built-In Marketing Tools for US Customer

The service for which the website was created allows you to localize software, apps, games and documents into more than 70 languages. Also, with its help, the user can create promotional videos with voice acting. The website provides information (on more than 40 pages) describing the capabilities of the service. The main SEO analytics tools are added there, as well as the possibility of placing contextual advertising. All content on the website is presented in 6 languages.

The Crowdin platform is used to keep the website’s content up to date in 6 languages. This platform allows you to automate the process of content localization management. The developer only deals with creating just one version of the content. This original version is then uploaded to the platform where copies of it are automatically created for all language versions required for a particular product. A user-friendly interface, a glossary, and the ability to restore translations from memory have been introduced for translators.

The following information can be found on the website:

On each page of the website there is a contact form for communication with the company’s managers, who process each request in the shortest possible time and offer the clients the most convenient way to get their services.

Since the main purpose of the website is to attract new customers, it is crucial to ensure that the content of all pages is available for analysis by search crawlers. In recent years, the crawlers have learned to execute JavaScript, but there are still limitations in their page rendering engines. In order for search robots to easily interpret the content of all pages, static generation technology was added to the website’s development process. It allows pre-forming pages during the project’s building on the server.

There are many frameworks that allow creating server-generated pages. In this project, Next.js was chosen. It is a framework that lets you handle static, hybrid and server rendering.

During the development process, all three rendering options were tested. This allowed us to evaluate the pros and cons of each option.

Server-side rendering made it possible to make pages that are friendly to crawlers, but its speed was low.

When Next.js library provided the possibility of hybrid rendering, it became possible for us to improve the page loading speed.

Then we switched to completely static generation. Firebase hosting was chosen for the website.This service hosts your static assets distributing them between its global CDNs (Content Delivery Network). This provides the fastest access to your assets from anywhere in the world. The server part of the website, which handles forms and redirects, was placed in the cloud functions of Firebase.

Container (hosting): Firebase.

Stack: React, Node.js, CSS, HTML.

Infrastructure: Git, IntelliJ IDEA, Trello, InVision, Sentry.

Frameworks: Next.js.

Other libraries: Express.js, GSAP, Lodash, nodemailer.