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

checklist
  • Duration: 3 years
  • Industries: IT Industry; Marketing, Advertising, Sales
  • Services: Product Development; Frontend Development
  • Software Categories and Types: Websites and Portals
  • Technical Expertise: Web Development
  • DevOps Expertise: Advanced build organization
  • Technologies: Node.JS; Project Management, Collaboration and Bug Tracking; IntelliJ IDEA; Google Firebase; Git; CSS; ReactJS; Sentry; Trello; Operating Systems; Frontend; Next.js; IDE; Backend; JavaScript; JavaScript Frameworks; JavaScript Libraries; Android; Development Infrastructure and Tools; Lodash; Source Code Management (SCM); Express.js; Nodemailer; Software Engineering and Management Tools; Other Technologies; InVision; GSAP (GreenSock Animation Platform); log4js
project-team
  • Team size (1):
  • 1 Frontend

Project summary

thumbnail-image

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:

  • Description of localization processes, testing.
  • Examples of work on the creation of video and voice acting.
  • Reviews of customers who used the service.

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.

Technical description of the project

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.

JazzTeam responsibilities

  • Working closely with the designer, marketers, translators and project managers.
  • Implementation of interfaces developed by the designer.
  • Optimization of the website page loading speed.
  • Connecting analytics tools.
  • Implementation of the backend part on Node.js for organizing redirects and order processing.

Technologies used

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.

Project features

  • Multiplatform layout: pages are adapted for different browsers and screen sizes, they work in different operating systems. The minimum supported width is 320px. The maximum is unlimited.
  • The implementation of all tasks was carried out with a focus on improving the website’s productivity.

Project results

  • The translation service website has been completely rewritten from scratch.
  • Automatic optimization of images for different devices during the building was configured on the website.
  • The main SEO analytics tools were connected to the website (Google Analytics, Yandex Metrika).
  • Static page generation on the server side.
  • The backend part was done in Node.js.
  • The website is fully optimized for SEO.
  • A tag manager has been added, which allows you to perform global website analytics on a variety of metrics.
  • Page loading speed was optimized by switching to Firebase hosting.

Company’s achievements on the project

  • Since entering the project, we have maintained close and active interaction between the development team and the customer.
  • The team adapted to changing requirements during the development process.
  • The customer was satisfied with the result.

Screenshots

Clients about cooperation with JazzTeam

Related projects

Recent Work

    Contact Us

    What happens next?
    • 1

      Leave your project request. We will contact you and schedule a call.

    • 2

      Signing of the NDA to ensure the project info confidentiality.

    • 3

      Negotiation of your request and the required services.

    • 4

      Team forming, coordination of workstages.

    • 5

      Contract signing and project start.