Valentin Kolb
329b5ba5ff
Build and Push Docker image / build-and-push (push) Successful in 4m42s
Details
|
||
---|---|---|
.gitea/workflows | ||
nginx | ||
public | ||
src | ||
.dockerignore | ||
.eslintrc.cjs | ||
.gitignore | ||
Dockerfile | ||
README.md | ||
config.ts | ||
index.html | ||
package.json | ||
postcss.config.cjs | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts | ||
yarn.lock |
README.md
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