Building an Expense Tracker Frontend - Part 1: Setup & UI Framework

Welcome to the frontend series of our Expense Tracker tutorial! In this series, we will build a sleek, modern user interface using React, TypeScript, TailwindCSS, and TanStack Query.

We are choosing this stack for specific reasons:

• React: The industry standard for building interactive UIs.
• TypeScript: Adds type safety, reducing bugs and improving developer experience.
• TailwindCSS: A utility-first CSS framework that speeds up styling and ensures consistency.
• TanStack Query (React Query): The best tool for managing server state (fetching, caching, updating data). It eliminates the need for complex global state management (like Redux) for API data.

Prerequisites

Ensure you have Node.js 18+ installed. You can check by running node -v in your terminal.

Project Initialization

We'll use Vite to scaffold our project. Vite is a modern build tool that is significantly faster than Create React App (CRA) because it leverages native ES modules in the browser during development.

npm create vite@latest expense-tracker-ui -- --template react-ts
cd expense-tracker-ui
npm install

Installing Dependencies

We need a few key libraries to build our app.

Styling & UI

We'll use TailwindCSS for styling. It allows us to build custom designs without leaving our HTML (JSX).

State Management & Data Fetching

TanStack Query handles all our data fetching needs. It provides caching, background updates, and error handling out of the box. Axios is a promise-based HTTP client that works well with TypeScript.

Routing

React Router is the standard routing library for React, allowing us to create a single-page application (SPA) with multiple views.

Install them all:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install @tanstack/react-query axios react-router-dom

Configuring TailwindCSS

We need to tell Tailwind where to look for our class names so it can generate the CSS. Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // We can extend the default theme here (colors, fonts, etc.)
      colors: {
        primary: '#3b82f6', // Example custom color
      }
    },
  },
  plugins: [],
}

And add the Tailwind directives to the top of src/index.css. This injects Tailwind's base styles, component classes, and utility classes.

@tailwind base;
@tailwind components;
@tailwind utilities;

Setting up TanStack Query

To use TanStack Query, we need to wrap our application with the QueryClientProvider. This makes the queryClient available to all components.

Open src/main.tsx and update it:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// Create a client
const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
)

Running the App

Now we are ready to start the development server!

npm run dev

You should see your React app running at http://localhost:5173. It will look basic for now, but we have a powerful foundation to build upon.

Next Steps

In the next part, we will integrate Authentication. We'll build a login form and connect it to our Scala backend using Axios and JWTs.

Continue to Part 2: Auth Integration