StuVe IT Frontend

Übersicht

Dieses Repository enthält den Quellcode für die StuVe IT Frontend Webseite.

Verwendete Technologien

• React ❤️ & Typescript - Code Library
• Vite - Build Tool
• Mantine & Postcss - UI Library
• Tabler Icons - Icon Library
• Pocketbase js - SDK für die Pocketbase API (Backend)
• React Router - Routing
• React Query - Data Fetching
• Docker - Containerization

Backend

Als Backend wird ein selbst erweitertes Pocketbase verwendet. Dieses ist in diesem Repo zu finden.

Projekt Struktur

├── index.html          # html Datei die den React Code in die Seite einbindet
├── tsconfig.json       # Typescript Config Datei
├── vite.config.ts      # Vite Config Datei
├── package.json        # Package Datei (Node's Package Manager)
├── public/             # Öffentliche Dateien (favicon, logo, ...)
├── src/                # Source Code
│   ├── main.tsx        # Main React Datei
│   ├── Router.tsx      # React Router Datei
│   ├── components/     # Wiederfendbare React Komponenten
│   ├── lib/            # React Hooks etc.
│   ├── pages/          # React Seiten (der Dateibaum entspricht der URL)
│   └── models/         # Types für die Pocketbase API (Datenbank Modelle)
└── README.md           # Diese Datei

Code Patterns

Pocketbase API

Um die Kommunikation mit dem Backend zu erleichtern ist in der Datei "s@/lib/pocketbase.ts" ein Pocketbase Client implementiert.

Dieser Client ist ein React Hook und kann in jeder React Komponente verwendet werden.

import {usePB} from@/lib/pocketbase";

const {pb} = usePB();

Pocketbase Modell Types

Todo

• New Liste erstellen focus name field on +-Click