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 "@/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"
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