The command `plakar ui` spawns your browser and displays a nice interface to list your backups, view their content, and download them.

![Plakar UI, the open-source version](./ui-oss.png)

The commercial version of Plakar, that we call Plakar Control Plane which is targeting enterprise customers, has a more complex UI that also includes user management, multi-stores management, inventories of Cloud resources, and so on.

![Plakar Control Plane](./ui-pcp.png)

Behind the scenes, both are React applications written in TypeScript.

When backend developers at Plakar open the `plakar-ui` GitHub repository for the first time, they might be surprised by the complexity of the frontend codebase. They might see a `pnpm-workspace.yaml`, a `turbo.json`, seven `package.json` files, and a `node_modules` folder big enough to make `find` overflow their terminal scrollback.

That's the reason why I decided to write a few lines about the Plakar UI stack: to explain the rationale behind our choices, why we do things the way we do, what our dependencies are, and how they fit together.

## A few lines… turned into a series

Alright, I might have lied a bit in the previous sentence… "A few lines" turned into a whole series of articles. Each article will cover a specific aspect of our frontend stack.

Here's the list of topics we will cover:

- **pnpm and Turborepo** — why the monorepo is split the way it is, and how Turborepo keeps `pnpm build` from taking ten minutes
- **React** — for a backend developer, React might be like a unicorn: people talk about it all the time, but you've never actually seen one. We'll explain briefly why React changed the frontend landscape
- **TypeScript** — I know that most developers are allergic to anything related to frontend, but I'll try to convince you that TypeScript is a real game-changer in the way we write code
- **Zod** — TypeScript will lie to you at API boundaries: Zod is how we deal with that
- **TanStack Query** — probably the most important library we use. It's a server-state synchronization layer, and it's insanely cool
- **TanStack Form** — forms are at the heart of any application UI. Tanstack Form is what we use to build them, and it's a joy to work with
- **React Aria Components** — have you ever realized Plakar UI is accessible using your keyboard? That's thanks to React Aria, a library of accessible components that we use as building blocks for our UI
- **TanStack Table** — tables are nothing more than a `<table>` element, right? Lol. You bet.
- **TanStack Router** — how do we avoid having a 404 when we change the URL?
- **Storybook** — this article explains how we build our UI components in isolation, using Storybook as a playground and a documentation tool
- **Testing strategy** — let's explain how we test our UI, and why we don't try to achieve 100% test coverage… quite the opposite, actually
- **Build process** — this final article will explain how the code is shipped to production

## Who is this for?

This series was originally written for the backend developers at Plakar, to help them understand the frontend codebase. Quickly, I realized that it could be useful for people outside of Plakar as well: don't tell me you've always been in situations where there's no gap in knowledge between your frontend and backend teams.

## A word from a recovering backend developer

I'm originally mostly a backend/systems developer and a system administrator.

For years, I thought that the complexity comes from the backend, that frontend development is the "easy part" of a project, and something I would try to avoid as much as possible.

**I was wrong**, and I think that if you share these feelings I had and accept to be open-minded, you might change your mind and discover that frontend development comes with its own set of challenges — and not only related to the color of a button or the layout of a page.

[Let's start with pnpm and Turborepo](/posts/2026-05-25/plakar-ui-pnpm-turborepo/)