Go to file

Valentin Kolb 1afa7596d0 Build and Push Docker image / build-and-push (push) Successful in 1m43s Details fix(app): added legal pages and made formUtil description HTML		2024-05-13 18:41:56 +02:00
.gitea/workflows	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
nginx	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
public	inital commit	2024-03-26 17:07:08 +01:00
src	fix(app): added legal pages and made formUtil description HTML	2024-05-13 18:41:56 +02:00
.dockerignore	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
.eslintrc.cjs	inital commit	2024-03-26 17:07:08 +01:00
.gitignore	inital commit	2024-03-26 17:07:08 +01:00
Dockerfile	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
README.md	fix(app): trigger action	2024-05-13 16:24:06 +02:00
config.ts	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
index.html	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
package.json	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
postcss.config.cjs	inital commit	2024-03-26 17:07:08 +01:00
tsconfig.json	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
tsconfig.node.json	inital commit	2024-03-26 17:07:08 +01:00
vite.config.ts	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00
yarn.lock	feat(app): added Docker and CI/CD	2024-05-13 16:22:31 +02:00

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

const {pb} = usePB();