2024-03-26 16:07:08 +00:00
|
|
|
# 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
|
|
|
|
|
|
2024-05-13 14:22:31 +00:00
|
|
|
Um die Kommunikation mit dem Backend zu erleichtern ist in der Datei "s@/lib/pocketbase.ts" ein Pocketbase Client implementiert.
|
2024-03-26 16:07:08 +00:00
|
|
|
|
|
|
|
|
Dieser Client ist ein React Hook und kann in jeder React Komponente verwendet werden.
|
|
|
|
|
|
|
|
|
|
```typescript
|
2024-05-13 14:22:31 +00:00
|
|
|
import {usePB} from@/lib/pocketbase";
|
2024-03-26 16:07:08 +00:00
|
|
|
|
|
|
|
|
const {pb} = usePB();
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-13 14:22:31 +00:00
|
|
|
#### Pocketbase Modell Types
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Todo
|
|
|
|
|
|
|
|
|
|
- New Liste erstellen focus name field on +-Click
|
