Zeit für die ANDERE Hälfte unseres Full-Stack-Systems: aufgaben-manager-web, ein eigenständiges React-Projekt NEBEN aufgaben-manager-api, das GENAU diese API konsumiert.

Projektstruktur auf oberster Ebene

aufgaben-manager/
├── aufgaben-manager-api/    ← aus Kapitel 2-6
└── aufgaben-manager-web/    ← NEU, dieses Kapitel

BEWUSST ZWEI getrennte Projekte statt eines Monorepos – GENAU die Trennung, die auch in echten Full-Stack-Teams üblich ist: das Backend-Team arbeitet an aufgaben-manager-api, das Frontend-Team an aufgaben-manager-web, verbunden AUSSCHLIESSLICH über die HTTP-API.

Das Projekt erstellen

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

react-ts statt nur react aus den früheren React-Schulungen – DIESE Schulung nutzt TypeScript DURCHGEHEND, da Kapitel 80 automatisch generierte TypeScript-Typen aus der API-Spezifikation nutzt und dieser Vorteil OHNE TypeScript verloren ginge.

Bereits jetzt: Abhängigkeiten für später installieren

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

react-router-dom (ab Kapitel 81), @tanstack/react-query (ab Kapitel 73) und axios (ab Kapitel 74) – wir installieren sie BEREITS hier, damit die Grundstruktur für die kommenden Kapitel bereitsteht, OHNE später immer wieder npm install unterbrechen zu müssen.

Die Vite-Vorlage aufräumen

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

export default App;

npm run dev
# öffnet auf http://localhost:5173

Die Zielstruktur im Vorgriff

aufgaben-manager-web/
├── .env
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── api/
│   │   └── client.ts
│   ├── types/
│   │   └── api.ts       ← generiert aus der OpenAPI-Spezifikation (Kapitel 80)
│   ├── hooks/
│   ├── components/
│   └── pages/
└── package.json