Setting up Vite, React and TypeScript

Let us create the project. In a terminal, run:

npm create vite@latest ledgerly -- --template react-ts
cd ledgerly
npm install
npm run dev

Vite prints a local address. Open it and you will see the starter page. Leave the dev server running; it reloads the page as soon as you save a file.

What Vite generated

• index.html is the real entry point. It loads src/main.tsx as a module.
• src/main.tsx finds the root element and renders the App component inside StrictMode.
• tsconfig.json and related files configure TypeScript. The template enables strict mode, which you should keep on.
• vite.config.ts registers the React plugin.

StrictMode renders components twice in development and runs effects twice. That is intentional. It surfaces code that depends on running exactly once, which is usually a bug. Do not remove it to make a warning go away.

A folder structure that scales

Delete the starter content and create this layout:

src/
  app/          routing, providers, layout
  features/
    expenses/   components, hooks and api for expenses
    auth/
  components/   shared UI such as Button and Dialog
  lib/          helpers such as formatMoney

Grouping by feature, rather than by file type, keeps related code close together. When you delete a feature, you delete one folder.

Linting and formatting

The template ships with ESLint. Add Prettier for formatting and enable format on save in your editor. Consistent formatting removes a whole category of review comments.

Finally, add path aliases so imports read @/lib/money instead of ../../../lib/money. Add a paths entry in tsconfig.app.json and the matching resolve.alias in vite.config.ts. Both must agree, otherwise TypeScript is happy but the build fails, or the other way around.

Commit this as your clean starting point.