What we are building and why

Welcome. Over this course we build Ledgerly, a small expense dashboard. It is deliberately ordinary: a list, a form, filters and a couple of charts. Ordinary apps are where most React work happens, and they are where structure and data handling matter most.

Here is what the finished app does:

• Signs a user in and keeps the session in memory
• Lists expenses with search and category filters stored in the URL
• Lets you add, edit and delete expenses with instant feedback
• Shows totals and a chart per category
• Has tests for the parts most likely to break

The stack and why

We use Vite to create and run the project because it starts fast and needs almost no configuration. React 19 is the UI library. TypeScript catches mistakes such as passing a string where a number is expected before the browser ever runs the code. TanStack Query handles server data: fetching, caching, refetching and invalidation. For tests we use Vitest with React Testing Library.

We do not use a meta framework such as Next.js in this course. That is not because it is bad, it is excellent and there is a separate course for it. Building a client rendered app first makes it much easier to see what React itself does and what a framework adds on top.

The back end

You do not need to write a server. The course repository includes a small mock API that runs locally with one command and stores data in a JSON file. It has realistic delays and occasional errors, so you have to deal with loading and failure states just like in production.

How to follow along

Each lesson ends with a commit tagged with the lesson number. If you get stuck, check out the tag and compare. I recommend typing the code yourself rather than copying it, because the small mistakes you make are the ones that teach you how React behaves.

In the next lesson we create the project and look at what Vite generates.