Time for the OTHER half of our full-stack system: aufgaben-manager-web, a standalone React project ALONGSIDE aufgaben-manager-api, that consumes EXACTLY that API.

Top-level project structure

aufgaben-manager/
├── aufgaben-manager-api/    ← from chapters 2-6
└── aufgaben-manager-web/    ← NEW, this chapter

DELIBERATELY TWO separate projects instead of a monorepo – EXACTLY the separation typical in real full-stack teams too: the backend team works on aufgaben-manager-api, the frontend team on aufgaben-manager-web, connected EXCLUSIVELY via the HTTP API.

Creating the project

npm create vite@latest aufgaben-manager-web -- --template react-ts
cd aufgaben-manager-web
npm install

react-ts instead of just react from the earlier React courses – THIS course uses TypeScript THROUGHOUT, since chapter 80 uses automatically generated TypeScript types from the API specification, and that benefit would be lost without TypeScript.

Already now: installing dependencies for later

npm install react-router-dom
npm install @tanstack/react-query axios

react-router-dom (from chapter 81), @tanstack/react-query (from chapter 73), and axios (from chapter 74) – we install them ALREADY here, so the base structure is ready for the coming chapters, without repeatedly interrupting later with npm install.

Cleaning up the Vite template

function App() {
  return (
    <div>
      <h1>aufgaben-manager-web</h1>
    </div>
  );
}

export default App;

npm run dev
# opens at http://localhost:5173

A preview of the target structure

aufgaben-manager-web/
├── .env
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── api/
│   │   └── client.ts
│   ├── types/
│   │   └── api.ts       ← generated from the OpenAPI specification (chapter 80)
│   ├── hooks/
│   ├── components/
│   └── pages/
└── package.json