SaaS-Dashboard Framework Entwicklung
Budget: €1,500 – €3,000 EUR
Entwicklung eines modularen SaaS-Dashboard-Frameworks (React/TypeScript)
Projektübersicht
Wir suchen einen erfahrenen Freelancer, der ein modernes SaaS-Dashboard als technisches Framework entwickelt. Die Webanwendung soll eine Scan-Funktion, Ergebnisanzeige, Export-Möglichkeiten und Nutzerverwaltung bieten. Wichtig: Es geht um die Erstellung der technischen Struktur und Grundfunktionen, ohne die geschäftsspezifische Logik zu implementieren. Die eigentliche KI-Logik und Geschäftsregeln fügt der Auftraggeber später selbst hinzu.
Aufgaben und Funktionsumfang
Dashboard UI: Entwicklung eines übersichtlichen Dashboards mit Navigation und responsivem Design (Tailwind CSS).
Authentifizierung & Nutzerverwaltung: Integration von Clerk für User-Auth (Login/Registrierung, Rollenverwaltung).
Scan-Funktion: Implementierung einer Funktion „Scan starten“ (z.B. zum automatisierten Auslesen von Websites) mittels Playwright/Puppeteer.
Ergebnisanzeige: Darstellung der Scan-Ergebnisse im Dashboard in Tabs (Reiter) mit Übersichten als Tabellen oder Karten
Export-Funktion: Implementierung eines PDF-Exports der Ergebnisse (Report-Download).
Datenbank: Anbindung einer PostgreSQL-Datenbank (Supabase oder Neon) zur Speicherung von Scan-Aufträgen, Ergebnissen, Nutzerdaten etc.
KI-Integration: Anbindung der GPT-API als vorbereitete Funktion (Analyse der erfassten Daten; Logik folgt später durch uns).
Storage: Nutzung eines S3-Storage für Dateien (z.B. Berichte, Uploads oder Zwischenergebnisse).
Logging & Alerting: Grundlegendes Logging von Aktionen und Alerting (Benachrichtigung bei Fehlern oder Abschluss eines Scans).
Workflow-Integration: Optional: Anbindung an Make / n8n / Zapier (z.B. Webhook bei abgeschlossenem Scan für externe Benachrichtigung).
Technologie-Stack
Frontend: React + TypeScript (Next.js auf Vercel) mit UI in Tailwind CSS.
Backend: Node.js/TypeScript (Serverless Functions auf Vercel). Nutzung von v0.dev für schnelles Prototyping und Service-Integration.
Datenbank: PostgreSQL (Cloud-DB via Supabase oder Neon).
Auth: Clerk für Nutzer-Authentifizierung und -verwaltung.
Automation: Playwright / Puppeteer für Browser-Automation im Scan-Prozess.
KI-Service: Einbindung einer GPT-API (OpenAI o.ä.) via Serverless Function.
Storage: S3-kompatibler Speicher (z.B. AWS S3) für Dateiablage.
Workflows: Webhooks/Integrationen für Make, n8n oder Zapier.
Hosting: Deployment auf Vercel (Front- & Backend). Cloudflare für DNS, Caching und Sicherheit.
Architektur und Modulstruktur
Angestrebt wird ein modularer Aufbau, der eine leichte Erweiterbarkeit ermöglicht:
Klare Trennung: Frontend, Backend und Services (Scan-Engine, Ergebnis-UI, Auth, Export etc.) klar getrennt.
Projektstruktur: z.B. separate Verzeichnisse für pages (Dashboard, Login, Ergebnisse), components (UI-Bausteine), api/functions (Serverless-APIs für Scan, GPT, Export) und services (DB-Zugriff, Logging, Notifikationen).
Erweiterbarkeit: Saubere Interfaces zwischen Modulen, sodass später eigene KI-Logik und Regeln einfach eingefügt werden können.
Qualität: Verwendung von TypeScript für Typisierung, Code-Dokumentation und grundlegende Tests für Kernfunktionen.
Projektübersicht
Wir suchen einen erfahrenen Freelancer, der ein modernes SaaS-Dashboard als technisches Framework entwickelt. Die Webanwendung soll eine Scan-Funktion, Ergebnisanzeige, Export-Möglichkeiten und Nutzerverwaltung bieten. Wichtig: Es geht um die Erstellung der technischen Struktur und Grundfunktionen, ohne die geschäftsspezifische Logik zu implementieren. Die eigentliche KI-Logik und Geschäftsregeln fügt der Auftraggeber später selbst hinzu.
Aufgaben und Funktionsumfang
Dashboard UI: Entwicklung eines übersichtlichen Dashboards mit Navigation und responsivem Design (Tailwind CSS).
Authentifizierung & Nutzerverwaltung: Integration von Clerk für User-Auth (Login/Registrierung, Rollenverwaltung).
Scan-Funktion: Implementierung einer Funktion „Scan starten“ (z.B. zum automatisierten Auslesen von Websites) mittels Playwright/Puppeteer.
Ergebnisanzeige: Darstellung der Scan-Ergebnisse im Dashboard in Tabs (Reiter) mit Übersichten als Tabellen oder Karten
Export-Funktion: Implementierung eines PDF-Exports der Ergebnisse (Report-Download).
Datenbank: Anbindung einer PostgreSQL-Datenbank (Supabase oder Neon) zur Speicherung von Scan-Aufträgen, Ergebnissen, Nutzerdaten etc.
KI-Integration: Anbindung der GPT-API als vorbereitete Funktion (Analyse der erfassten Daten; Logik folgt später durch uns).
Storage: Nutzung eines S3-Storage für Dateien (z.B. Berichte, Uploads oder Zwischenergebnisse).
Logging & Alerting: Grundlegendes Logging von Aktionen und Alerting (Benachrichtigung bei Fehlern oder Abschluss eines Scans).
Workflow-Integration: Optional: Anbindung an Make / n8n / Zapier (z.B. Webhook bei abgeschlossenem Scan für externe Benachrichtigung).
Technologie-Stack
Frontend: React + TypeScript (Next.js auf Vercel) mit UI in Tailwind CSS.
Backend: Node.js/TypeScript (Serverless Functions auf Vercel). Nutzung von v0.dev für schnelles Prototyping und Service-Integration.
Datenbank: PostgreSQL (Cloud-DB via Supabase oder Neon).
Auth: Clerk für Nutzer-Authentifizierung und -verwaltung.
Automation: Playwright / Puppeteer für Browser-Automation im Scan-Prozess.
KI-Service: Einbindung einer GPT-API (OpenAI o.ä.) via Serverless Function.
Storage: S3-kompatibler Speicher (z.B. AWS S3) für Dateiablage.
Workflows: Webhooks/Integrationen für Make, n8n oder Zapier.
Hosting: Deployment auf Vercel (Front- & Backend). Cloudflare für DNS, Caching und Sicherheit.
Architektur und Modulstruktur
Angestrebt wird ein modularer Aufbau, der eine leichte Erweiterbarkeit ermöglicht:
Klare Trennung: Frontend, Backend und Services (Scan-Engine, Ergebnis-UI, Auth, Export etc.) klar getrennt.
Projektstruktur: z.B. separate Verzeichnisse für pages (Dashboard, Login, Ergebnisse), components (UI-Bausteine), api/functions (Serverless-APIs für Scan, GPT, Export) und services (DB-Zugriff, Logging, Notifikationen).
Erweiterbarkeit: Saubere Interfaces zwischen Modulen, sodass später eigene KI-Logik und Regeln einfach eingefügt werden können.
Qualität: Verwendung von TypeScript für Typisierung, Code-Dokumentation und grundlegende Tests für Kernfunktionen.