# StuVe IT Frontend

## Übersicht

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

### Verwendete Technologien

- [React ❤️](https://reactjs.org/) [&]() [Typescript](https://www.typescriptlang.org/) - Code Library
- [Vite](https://vitejs.dev/) - Build Tool
- [Mantine](https://mantine.dev/) [&]() [Postcss](https://postcss.org/) - UI Library
- [Tabler Icons](https://tablericons.com/) - Icon Library
- [Pocketbase js](https://github.com/pocketbase/js-sdk) - SDK für die Pocketbase API (Backend)
- [React Router](https://reactrouter.com/) - Routing
- [React Query](https://react-query.tanstack.com/) - Data Fetching
- [Docker](https://www.docker.com/) - Containerization

## Backend

Als Backend wird ein selbst erweitertes Pocketbase verwendet. Dieses ist in diesem [Repo](https://gitlab.uni-ulm.de/stuve-it/it-tools/backend/)
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.

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

const {pb} = usePB();
```

#### Pocketbase Modell Types