lingo.dev VS extensive-react-boilerplate

If you've read my previous articles on HTML5 elements you didn't know you need or CSS modal windows, you know we like unusual tech at Lingo.dev. These upcoming JavaScript features solve real problems that have annoyed developers for years.

At Lingo.dev, we've been using this a lot deep inside our localization API, and it's dramatically simplified our text processing pipeline. What used to require multiple specialized libraries and server-side processing can now be handled directly in the browser with just a few lines of code.

As you know, we love unusual tech at Lingo.dev. So when in my last essay, David commented he was surprised to not see "dialog" HTML element, it hit me - wait, but there's so many HTML5 elements that we don't even know about!

Wait, you can build modal windows without JavaScript? Yep, that's CSS secretly laughing at JavaScript behind its back. At Lingo.dev, we love diving into weird engineering rabbit holes that make other devs do a double-take.

At lingo.dev, we're always on top of the latest models to ensure our translations are perfect. So when Meta released Llama 4, I immediately dug into what makes it special and how we developers can leverage its power without the infrastructure headaches.

In this post, I'll walk you through how to build an automated CI/CD translation pipeline using Lingo.dev and Knock that will handle localized notifications for your app without requiring any manual translation work from your team. We’ll introduce some tools that can help you scale your application to a global audience, automate translations locally using Lingo.dev's CLI, and finally integrate that CLI into a CI/CD pipeline so that translations are automatically created when developers open a pull request.

Hey! Max here, one of the co-founders - great question!

Technically - it's a compiler plugin: it augments build artifacts, so that extracting text from the app into JSON files for further translation is no longer required.

Since we're solving the problem at compile time, React code remains the same, but the app becomes just one cli command away from being fully translated into other languages!

Here's me speedrunning (~2min?) the localization of a typical next js app from english to spanish: https://github.com/replexica/replexica/blob/main/getting-sta...

As we know, the acronym CRUD stands for Create, Read, Update, and Delete. This concept represents the fundamental operations that can be performed on any data. Let's consider working with CRUD operations using the example of the administrative panel user, where functionalities like adding, editing, and deleting users are implemented, along with retrieving information about them. The custom React hooks discussed below, handling data processing in React Query, pagination, error management, and more, are already integrated into the Extensive-React-Boilerplate. Naturally, you can leverage this boilerplate directly. In the following sections, we’ll share our insights on implementing these features.

Let's go step-by-step on how to start your project using a boilerplate. Choose a Boilerplate: Choose the boilerplate that suits your needs. In this review, we’ll use the extensive-react-boilerplate as an example, which we use in our company. We wrote about reasons why we created and use it in this article. Clone the Repository: Clone the boilerplate repository to your local machine using Git.

Some changes apply simultaneously to extensive-react-boilerplate and nestjs-boilerplate:

The efficiency of using ESLint rules during the development of your project is also manifested in writing custom rules. Since ESLint has extensive functionality and flexibility, you can create not only formatting and rules but also consider internal project decisions. For example, working with forms, it is possible to control and warn developers about possible unnecessary renders, incorrect solutions when working with objects, or simply point out unused imports. For example, extensive-react-boilerplate addresses such issues as follows:

How much time do we typically spend on project setup? We're talking about configuring installed libraries and writing boilerplate code to structure and implement best practices for achieving optimal website performance. At Brocoders, we often start new projects from scratch. That's why over 3 years ago, we created a NestJS boilerplate for the backend so that we wouldn't have to spend time developing core functionality that the end user doesn't see but is crucial for developers. Over this time, the boilerplate has received 1.9k stars on GitHub and has gained significant popularity beyond our company. Now, we've decided to take it a step further and created the Extensive React Boilerplate for the frontend. Its purpose is to keep our best practices in project development together, avoiding familiar pitfalls and reducing development time.