Geoperf Frontend

Next.js Frontend für die Geoperf Performance Monitoring Platform.

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Linting: ESLint

Erste Schritte

1. Dependencies installieren

cd frontend
npm install

2. Environment-Variablen einrichten

cp .env.example .env

Passe die .env Datei nach Bedarf an:

NEXT_PUBLIC_API_URL=http://localhost:8080

3. Development Server starten

npm run dev

Das Frontend ist nun erreichbar unter: http://localhost:3000

Verfügbare Scripts

• npm run dev - Startet den Development Server
• npm run build - Erstellt einen Production Build
• npm start - Startet den Production Server
• npm run lint - Führt ESLint aus
• npm run type-check - Prüft TypeScript Typen

Projektstruktur

frontend/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Root Layout
│   ├── page.tsx           # Homepage
│   ├── globals.css        # Globale Styles
│   └── dashboard/         # Dashboard Seite
├── components/            # Wiederverwendbare UI-Komponenten
│   └── Button.tsx
├── lib/                   # Utility-Funktionen und Konfiguration
│   └── api-client.ts      # API Client für Backend-Kommunikation
├── types/                 # TypeScript Type Definitionen
│   └── index.ts
└── public/               # Statische Assets

API Integration

Der API Client (lib/api-client.ts) bietet eine typisierte Schnittstelle zum Go Backend:

import { api } from "@/lib/api-client";

// Beispiel: Events abrufen
const events = await api.get("/api/v1/events");

// Beispiel: Projekt erstellen
const project = await api.post("/api/v1/projects", {
  name: "Mein Projekt",
  tenantId: "tenant-123",
});

Features

• ✅ TypeScript für Type Safety
• ✅ Tailwind CSS für schnelles Styling
• ✅ Dark Mode Support
• ✅ API Client für Backend-Integration
• ✅ Responsive Design
• ✅ ESLint Konfiguration

Backend Connection

Das Frontend verbindet sich standardmäßig mit dem Backend unter http://localhost:8080.

Stelle sicher, dass das Go Backend läuft:

cd ..
make serve

Deployment

Production Build erstellen

npm run build
npm start

Docker (optional)

# Beispiel Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

Nächste Schritte

• Authentication implementieren
• Dashboard mit echten Daten verbinden
• Event Monitoring UI
• Execution Pipeline Visualisierung
• Billing Integration mit Stripe
• Testing Setup (Jest/Vitest + React Testing Library)

Dokumentation

• Next.js Dokumentation
• TypeScript Dokumentation
• Tailwind CSS Dokumentation