feat: initial SchwarmbLog monorepo setup

- React + Vite + TanStack Router/Query frontend
- Hono + Prisma + MySQL backend
- Prisma schema mit allen Entitäten
- Docker + docker-compose Setup
- Tailwind mit Salm/Ozean Farbpalette
This commit is contained in:
Sebastian
2026-03-29 15:19:47 +00:00
commit ab76f207ae
28 changed files with 768 additions and 0 deletions

4
.env.example Normal file
View File

@@ -0,0 +1,4 @@
MYSQL_ROOT_PASSWORD=supersecret
MYSQL_USER=schwarmblog
MYSQL_PASSWORD=schwarmblog_pw
JWT_SECRET=change-me-in-production

7
.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
node_modules/
dist/
.env
.env.local
.DS_Store
*.log
.turbo/

47
README.md Normal file
View File

@@ -0,0 +1,47 @@
# 🐟 SchwarmbLog
**Gemeinsam die Welt entdecken**
BNE-Reiseblog-Portal der SALM Bremerhaven.
## Stack
- **Frontend:** React + Vite + TanStack Router + TanStack Query + Tailwind CSS
- **Backend:** Hono + Prisma + MySQL
- **Deployment:** Docker + Dokploy
## Monorepo-Struktur
```
schwarmblog/
├── apps/
│ ├── api/ # Hono Backend
│ └── web/ # React Frontend
├── packages/ # Shared code (zukünftig)
└── docker-compose.yml
```
## Lokale Entwicklung
```bash
# Abhängigkeiten installieren
pnpm install
# .env anlegen
cp .env.example .env
cp apps/api/.env.example apps/api/.env
# .env Werte anpassen
# Datenbank starten (Docker)
docker compose up db -d
# Migrationen ausführen
pnpm --filter @schwarmblog/api db:migrate
# Dev-Server starten
pnpm dev
```
## Deployment (Dokploy)
Zwei Services in Dokploy anlegen:
- `schwarmblog-api` → apps/api/Dockerfile
- `schwarmblog-web` → apps/web/Dockerfile
Subdomain z.B. `schwarmblog.science-teaching.de` auf web zeigen lassen.

3
apps/api/.env.example Normal file
View File

@@ -0,0 +1,3 @@
DATABASE_URL="mysql://user:password@localhost:3306/schwarmblog"
JWT_SECRET="change-me-in-production"
PORT=3001

24
apps/api/Dockerfile Normal file
View File

@@ -0,0 +1,24 @@
FROM node:20-alpine AS base
RUN corepack enable pnpm
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-workspace.yaml ./
COPY apps/api/package.json ./apps/api/
RUN pnpm install --frozen-lockfile
FROM base AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY --from=deps /app/apps/api/node_modules ./apps/api/node_modules
COPY . .
WORKDIR /app/apps/api
RUN pnpm db:generate
RUN pnpm build
FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=build /app/apps/api/dist ./dist
COPY --from=build /app/apps/api/node_modules ./node_modules
EXPOSE 3001
CMD ["node", "dist/index.js"]

32
apps/api/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "@schwarmblog/api",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc",
"typecheck": "tsc --noEmit",
"db:generate": "prisma generate",
"db:migrate": "prisma migrate dev",
"db:studio": "prisma studio"
},
"dependencies": {
"@prisma/client": "^5.14.0",
"hono": "^4.4.0",
"@hono/node-server": "^1.12.0",
"bcryptjs": "^2.4.3",
"jsonwebtoken": "^9.0.2",
"uuid": "^10.0.0",
"dotenv": "^16.4.5"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.6",
"@types/jsonwebtoken": "^9.0.6",
"@types/uuid": "^10.0.0",
"@types/node": "^20.14.0",
"prisma": "^5.14.0",
"tsx": "^4.15.0",
"typescript": "^5.4.5"
}
}

View File

@@ -0,0 +1,260 @@
// SchwarmbLog Prisma Schema
// Stack: Hono + Prisma + MySQL
// Conventions: camelCase in Prisma, snake_case in DB, cuid() for IDs
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
// ─────────────────────────────────────────────
// USERS & AUTH
// ─────────────────────────────────────────────
model User {
id String @id @default(cuid())
name String
email String? @unique
role Role @default(STUDENT)
// Auth
passwordHash String?
qrToken String? @unique @map("qr_token")
qrTokenCreated DateTime? @map("qr_token_created")
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
// Relations
classMemberships ClassMembership[]
swarmMemberships SwarmMembership[]
blog Blog?
assignedTodos Todo[] @relation("AssignedTodos")
reactions Reaction[]
comments Comment[]
@@map("users")
}
enum Role {
ADMIN
TEACHER
STUDENT
PARENT
}
// ─────────────────────────────────────────────
// CLASSES & SWARMS
// ─────────────────────────────────────────────
model Class {
id String @id @default(cuid())
name String // z.B. "7a"
schoolYear String @map("school_year") // z.B. "2025/26"
createdAt DateTime @default(now()) @map("created_at")
memberships ClassMembership[]
swarms Swarm[]
blogs Blog[]
@@map("classes")
}
model ClassMembership {
id String @id @default(cuid())
user User @relation(fields: [userId], references: [id])
userId String @map("user_id")
class Class @relation(fields: [classId], references: [id])
classId String @map("class_id")
role ClassRole @default(STUDENT)
@@unique([userId, classId])
@@map("class_memberships")
}
enum ClassRole {
TEACHER
STUDENT
}
// Schwarm = Sichtbarkeitsgruppe (Klasse oder ganzer Jahrgang)
model Swarm {
id String @id @default(cuid())
name String // z.B. "Schwarm 7a" oder "Schwarm Jahrgang 7"
scope SwarmScope
class Class? @relation(fields: [classId], references: [id])
classId String? @map("class_id")
createdAt DateTime @default(now()) @map("created_at")
memberships SwarmMembership[]
@@map("swarms")
}
enum SwarmScope {
CLASS // nur eine Klasse
YEAR // ganzer Jahrgang
}
model SwarmMembership {
id String @id @default(cuid())
swarm Swarm @relation(fields: [swarmId], references: [id])
swarmId String @map("swarm_id")
user User @relation(fields: [userId], references: [id])
userId String @map("user_id")
@@unique([swarmId, userId])
@@map("swarm_memberships")
}
// ─────────────────────────────────────────────
// STATIONEN & TEMPLATES
// ─────────────────────────────────────────────
model Station {
id String @id @default(cuid())
name String // z.B. "Lagos"
country String
latitude Float
longitude Float
bneTopic String @map("bne_topic") // z.B. "Elektroschrott"
description String? @db.Text
orderIndex Int @map("order_index") // optimale Reihenfolge
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
templates EntryTemplate[]
blogEntries BlogEntry[]
@@map("stations")
}
// Vorstrukturierter Eintrag (Lückentext, Bildblock, etc.)
// blocks: JSON-Array von Block-Objekten
// Beispiel: [{ type: "gap_text", content: "Ich bin in ___ angekommen..." }, { type: "image" }, { type: "free_text" }]
model EntryTemplate {
id String @id @default(cuid())
station Station @relation(fields: [stationId], references: [id])
stationId String @map("station_id")
title String
blocks Json // Block-Struktur des Templates
isOptional Boolean @default(false) @map("is_optional")
orderIndex Int @default(0) @map("order_index")
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
todos Todo[]
blogEntries BlogEntry[]
@@map("entry_templates")
}
// ─────────────────────────────────────────────
// BLOG & EINTRÄGE
// ─────────────────────────────────────────────
model Blog {
id String @id @default(cuid())
student User @relation(fields: [studentId], references: [id])
studentId String @unique @map("student_id")
class Class @relation(fields: [classId], references: [id])
classId String @map("class_id")
title String @default("Mein Reiseblog")
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
entries BlogEntry[]
todos Todo[]
@@map("blogs")
}
model BlogEntry {
id String @id @default(cuid())
blog Blog @relation(fields: [blogId], references: [id])
blogId String @map("blog_id")
station Station? @relation(fields: [stationId], references: [id])
stationId String? @map("station_id")
template EntryTemplate? @relation(fields: [templateId], references: [id])
templateId String? @map("template_id") // null = freier Eintrag
title String
blocks Json // Ausgefüllte Block-Inhalte (Text, Bildpfad, etc.)
status EntryStatus @default(DRAFT)
visibility Visibility @default(PRIVATE)
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
reactions Reaction[]
comments Comment[]
@@map("blog_entries")
}
enum EntryStatus {
DRAFT
PUBLISHED
}
enum Visibility {
PRIVATE // nur Schüler + Lehrkraft
CLASS // Klassen-Schwarm
YEAR // Jahrgangs-Schwarm
PARENTS // zusätzlich Eltern
}
// ─────────────────────────────────────────────
// TODOS
// ─────────────────────────────────────────────
// Lehrkraft weist Schüler einen vorstrukturierten Eintrag zu
model Todo {
id String @id @default(cuid())
blog Blog @relation(fields: [blogId], references: [id])
blogId String @map("blog_id")
template EntryTemplate @relation(fields: [templateId], references: [id])
templateId String @map("template_id")
assignedBy User @relation("AssignedTodos", fields: [assignedById], references: [id])
assignedById String @map("assigned_by")
dueDate DateTime? @map("due_date")
completedAt DateTime? @map("completed_at")
createdAt DateTime @default(now()) @map("created_at")
@@map("todos")
}
// ─────────────────────────────────────────────
// SOZIALES
// ─────────────────────────────────────────────
model Reaction {
id String @id @default(cuid())
entry BlogEntry @relation(fields: [entryId], references: [id])
entryId String @map("entry_id")
user User @relation(fields: [userId], references: [id])
userId String @map("user_id")
type ReactionType @default(LIKE)
@@unique([entryId, userId]) // pro Eintrag nur eine Reaktion pro User
@@map("reactions")
}
enum ReactionType {
LIKE
}
model Comment {
id String @id @default(cuid())
entry BlogEntry @relation(fields: [entryId], references: [id])
entryId String @map("entry_id")
user User @relation(fields: [userId], references: [id])
userId String @map("user_id")
text String @db.Text
createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime @updatedAt @map("updated_at")
@@map("comments")
}

30
apps/api/src/index.ts Normal file
View File

@@ -0,0 +1,30 @@
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { cors } from "hono/cors";
import { logger } from "hono/logger";
import "dotenv/config";
const app = new Hono();
// Middleware
app.use("*", logger());
app.use(
"*",
cors({
origin: process.env.FRONTEND_URL ?? "http://localhost:5173",
credentials: true,
})
);
// Health check
app.get("/health", (c) => c.json({ status: "ok", app: "SchwarmbLog API" }));
// Routes (werden schrittweise ergänzt)
// app.route("/auth", authRoutes);
// app.route("/stations", stationRoutes);
// app.route("/blogs", blogRoutes);
const port = Number(process.env.PORT ?? 3001);
console.log(`🐟 SchwarmbLog API läuft auf Port ${port}`);
serve({ fetch: app.fetch, port });

13
apps/api/src/lib/db.ts Normal file
View File

@@ -0,0 +1,13 @@
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const db =
globalForPrisma.prisma ??
new PrismaClient({
log: process.env.NODE_ENV === "development" ? ["query", "error"] : ["error"],
});
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = db;

View File

@@ -0,0 +1,26 @@
import { createMiddleware } from "hono/factory";
import jwt from "jsonwebtoken";
export type AuthUser = {
id: string;
role: string;
};
declare module "hono" {
interface ContextVariableMap {
user: AuthUser;
}
}
export const requireAuth = createMiddleware(async (c, next) => {
const token = c.req.header("Authorization")?.replace("Bearer ", "");
if (!token) return c.json({ error: "Unauthorized" }, 401);
try {
const payload = jwt.verify(token, process.env.JWT_SECRET ?? "") as AuthUser;
c.set("user", payload);
await next();
} catch {
return c.json({ error: "Invalid token" }, 401);
}
});

9
apps/api/tsconfig.json Normal file
View File

@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"moduleResolution": "node"
},
"include": ["src"]
}

21
apps/web/Dockerfile Normal file
View File

@@ -0,0 +1,21 @@
FROM node:20-alpine AS base
RUN corepack enable pnpm
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-workspace.yaml ./
COPY apps/web/package.json ./apps/web/
RUN pnpm install --frozen-lockfile
FROM base AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY --from=deps /app/apps/web/node_modules ./apps/web/node_modules
COPY . .
WORKDIR /app/apps/web
RUN pnpm build
FROM nginx:alpine AS runner
COPY --from=build /app/apps/web/dist /usr/share/nginx/html
COPY apps/web/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

13
apps/web/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SchwarmbLog Gemeinsam die Welt entdecken</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

15
apps/web/nginx.conf Normal file
View File

@@ -0,0 +1,15 @@
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://api:3001/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}

33
apps/web/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "@schwarmblog/web",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"typecheck": "tsc --noEmit",
"lint": "eslint src"
},
"dependencies": {
"@tanstack/react-query": "^5.45.0",
"@tanstack/react-router": "^1.42.0",
"@tanstack/router-devtools": "^1.42.0",
"@tanstack/react-query-devtools": "^5.45.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"lucide-react": "^0.395.0"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.4",
"typescript": "^5.4.5",
"vite": "^5.3.1",
"@tanstack/router-plugin": "^1.42.0"
}
}

View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

9
apps/web/src/index.css Normal file
View File

@@ -0,0 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-ocean-50 text-gray-900 font-sans;
}
}

24
apps/web/src/lib/api.ts Normal file
View File

@@ -0,0 +1,24 @@
const BASE = "/api";
async function request<T>(path: string, init?: RequestInit): Promise<T> {
const token = localStorage.getItem("token");
const res = await fetch(`${BASE}${path}`, {
...init,
headers: {
"Content-Type": "application/json",
...(token ? { Authorization: `Bearer ${token}` } : {}),
...init?.headers,
},
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
export const api = {
get: <T>(path: string) => request<T>(path),
post: <T>(path: string, body: unknown) =>
request<T>(path, { method: "POST", body: JSON.stringify(body) }),
patch: <T>(path: string, body: unknown) =>
request<T>(path, { method: "PATCH", body: JSON.stringify(body) }),
delete: <T>(path: string) => request<T>(path, { method: "DELETE" }),
};

23
apps/web/src/main.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { routeTree } from "./routeTree.gen";
import "./index.css";
const queryClient = new QueryClient();
const router = createRouter({ routeTree, context: { queryClient } });
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>
</React.StrictMode>
);

View File

@@ -0,0 +1,18 @@
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import type { QueryClient } from "@tanstack/react-query";
interface RouterContext {
queryClient: QueryClient;
}
export const Route = createRootRouteWithContext<RouterContext>()({
component: () => (
<>
<Outlet />
<TanStackRouterDevtools />
<ReactQueryDevtools />
</>
),
});

View File

@@ -0,0 +1,15 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
component: Index,
});
function Index() {
return (
<div className="min-h-screen flex flex-col items-center justify-center gap-6">
<div className="text-6xl">🐟</div>
<h1 className="text-4xl font-bold text-ocean-800">SchwarmbLog</h1>
<p className="text-ocean-600 text-lg">Gemeinsam die Welt entdecken</p>
</div>
);
}

View File

@@ -0,0 +1,37 @@
import type { Config } from "tailwindcss";
export default {
content: ["./index.html", "./src/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
// SchwarmbLog Farbpalette Ozean/Lachs
salm: {
50: "#fff5f0",
100: "#ffe0d0",
200: "#ffb899",
300: "#ff8c5a",
400: "#ff6a2b",
500: "#e84d0e",
600: "#c43a07",
700: "#9c2d05",
800: "#7a2207",
900: "#631d09",
},
ocean: {
50: "#f0f9ff",
100: "#e0f2fe",
200: "#b9e6fd",
300: "#7dd3fc",
400: "#38bdf8",
500: "#0ea5e9",
600: "#0284c7",
700: "#0369a1",
800: "#075985",
900: "#0c4a6e",
},
},
},
},
plugins: [],
} satisfies Config;

11
apps/web/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"jsx": "react-jsx",
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"]
}

19
apps/web/vite.config.ts Normal file
View File

@@ -0,0 +1,19 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
export default defineConfig({
plugins: [
TanStackRouterVite(),
react(),
],
server: {
port: 5173,
proxy: {
"/api": {
target: "http://localhost:3001",
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});

40
docker-compose.yml Normal file
View File

@@ -0,0 +1,40 @@
services:
db:
image: mysql:8.0
restart: unless-stopped
environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: schwarmblog
MYSQL_USER: ${MYSQL_USER}
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
volumes:
- db_data:/var/lib/mysql
ports:
- "3306:3306"
api:
build:
context: .
dockerfile: apps/api/Dockerfile
restart: unless-stopped
environment:
DATABASE_URL: mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@db:3306/schwarmblog
JWT_SECRET: ${JWT_SECRET}
NODE_ENV: production
depends_on:
- db
ports:
- "3001:3001"
web:
build:
context: .
dockerfile: apps/web/Dockerfile
restart: unless-stopped
depends_on:
- api
ports:
- "80:80"
volumes:
db_data:

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "schwarmblog",
"version": "0.1.0",
"private": true,
"packageManager": "pnpm@9.0.0",
"scripts": {
"dev": "pnpm --parallel -r dev",
"build": "pnpm -r build",
"lint": "pnpm -r lint",
"typecheck": "pnpm -r typecheck"
},
"workspaces": [
"apps/*",
"packages/*"
]
}

3
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,3 @@
packages:
- 'apps/*'
- 'packages/*'

10
tsconfig.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"skipLibCheck": true,
"esModuleInterop": true
}
}