Saulius Kolesinskas

In 2017, we decided to move away from Backbone and embrace a relatively new tool which was taking the industry by storm, React. Since Backbone was no longer actively maintained and its popularity was falling, it made sense to adopt a tool that was on the rise and promised improved performance, developer experience and delivery speed. In addition, it became easier to hire Frontend Engineers as the talent pool greatly increased. Nowadays, React is the framework of choice across Vinted.

Typescript entered the picture at a later stage. We placed our initial bet on Flow but it soon became obvious that the industry prefers Typescript. In 2019, we migrated to Typescript and never looked back. Having a strongly typed language in our frontend brought confidence to the engineers and greatly reduced the number of bugs.

Next.js is the newest addition to the stack. Vinted is currently a Rails monolith and React on Rails is used to render views. In order to transform Vinted to a single-page application (SPA) and split backend from frontend, we decided to adopt Next.js. Among the options considered, Next.js offered the most comprehensive feature set, good support for Server Side Rendering (SSR) and a vibrant community. We also expect that splitting the client-side would lead to improved developer experience and faster builds.

pnpm is one of the newer additions to our frontend stack. We used yarn for a relatively long time but recently decided to reevaluate its usefulness. pnpm caught our eye for its speed and more efficient disk usage, and even though it is less popular than its competitors, we decided to place a bet on it.

We extensively use Sass and CSS Modules as our styling solution at Vinted. Even though we considered adopting a CSS-in-JS library, we ultimately leaned towards the flexibility that Sass and CSS Modules offer.

Vinted also has an internal design system where Storybook is used for development and documentation.

Vinted uses Webpack module bundler and Babel transpiler for web apps, while rollup is used for internal libraries (e.g. monitoring).

There were some considerations to move to the new generation of build tools (e.g. snowpack) but ultimately the maturity of Webpack and rollup won.

Prettier and ESLint are used at Vinted to maintain good coding practices and standards.

In addition, we have developed a custom ESLint configuration and plugin to codify internal conventions and practices, thus reducing overhead for engineers.