stuve-it-frontend/README.md

# 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 "@/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"
import {useQuery} from "@tanstack/react-query";

const {pb,user} = usePB()

const query = useQuery({
    queryKey: ["collection", id],
    queryFn: async () => {
        return await pb.collection("collection").getOne(id)
    },
    enabled: !!id && !!user
})
```

#### Pocketbase Modell Types

#### Todo

- todo api rules so that only event admins can set status
- todo api rules so that only entries for future events can be created
- todo api rule so that entries for past events cant be edited or deleted