Projekt: "Made in ..."
1. Projektübersicht
Eine mehrsprachige Webseite, auf der Nutzer unbegrenzt Werbung ansehen können, gegen Spende werbefrei sind und Anbieter ihre Produkte/Dienstleistungen gegen Gebühr listen können. Hauptslogan: made in ... (Browser-Sprache erkennbar, manuell wechselbar).
Technologie-Stack:
- Frontend: SvelteKit
- Backend / DB: Supabase (PostgreSQL)
- Zahlungsintegration: Stripe oder Revolut
- Werbeeinblendung: Ad-Server / Ad Networks
- Übersetzung: DB-basiert oder maschinell
Design: minimalistisch, responsive, fokus auf Content.
2. Datenbankstruktur (Supabase / PostgreSQL)
Users
| Feld | Typ | Bemerkung |
|---|
| id | UUID | PK |
| email | text | unique |
| password_hash | text | (Supabase Auth) |
| is_ad_free | boolean | nach Spende |
| preferred_language | text | z. B. "de", "fr" |
| created_at | timestamp | auto |
Providers / Anbieter
| Feld | Typ | Bemerkung |
|---|
| id | UUID | PK |
| user_id | UUID | FK Users |
| name | text | Name der Firma/Person |
| description | text | Kurzbeschreibung |
| price | numeric | Listing-Gebühr |
| language | text | Hauptsprache |
| category | text | z. B. Dienstleistungen |
| created_at | timestamp | auto |
Services / Artikel
| Feld | Typ | Bemerkung |
|---|
| id | UUID | PK |
| provider_id | UUID | FK Providers |
| title | text | Titel |
| description | text | Beschreibung |
| price | numeric | optional |
| language | text | Übersetzungssprache |
| created_at | timestamp | auto |
Payments
| Feld | Typ | Bemerkung |
|---|
| id | UUID | PK |
| user_id | UUID | FK Users |
| amount | numeric | in EUR |
| type | text | "donation" / "listing_fee" |
| status | text | "pending"/"completed" |
| created_at | timestamp | auto |
Ads / Werbung
| Feld | Typ | Bemerkung |
|---|
| id | UUID | PK |
| provider_id | UUID | optional |
| content | text | HTML/JS-Code |
| impressions | int | optional |
| created_at | timestamp | auto |
3. Dynamischer Slogan
import { browser } from "$app/environment";
let userLang = "en"; // default
if (browser) {
userLang = navigator.language.split("-")[0];
}
$: slogan = `made in ${userLang}`;
- Sprache manuell wechselbar über UI
4. Zahlungsintegration
- Stripe: einmalige Spenden, wiederkehrende Zahlungen, Anbieter-Listings
- Revolut: alternative für europäische Nutzer, ähnlich wie Stripe
- Webhooks zum Aktualisieren von
Users.is_ad_free und Payments.status
5. Werbeeinblendung
- Externe Netzwerke: Google AdSense, AdButler
- Eigene Ads: Datenbankbasiert, Impressionen zählen
- Werbefrei für Spender im Frontend:
{#if !user.is_ad_free}
<AdComponent ads={ads} />
{/if}
6. Frontend-Struktur (SvelteKit)
src/routes/
├─ +layout.svelte # global layout, Header/Footer, Ads, Slogan
├─ +page.svelte # Homepage
├─ /providers/
│ ├─ +page.svelte # Liste aller Anbieter
│ └─ [id]/+page.svelte # Detailseite Anbieter
├─ /services/
│ └─ [id]/+page.svelte # Detailseite Artikel/Dienstleistung
├─ /auth/
│ └─ login/+page.svelte
├─ /donate/+page.svelte # Spendenformular
├─ /admin/
│ └─ +page.svelte # Anbieterverwaltung, Ads-Upload
7. Grundlegende Features
- Multilingual: Browser-Sprache erkennen, manuell wechselbar, Übersetzungen in DB
- Werbung & Spenden: Ads anzeigen, Spender werbefrei, Spendenformular mit Stripe/Revolut
- Anbieter-Listings: Anbieter zahlen Gebühr → Listing freigeschaltet, filterbar nach Kategorie/Sprachen
- Minimalistisches Design: Klarer Header mit Slogan, Grid für Anbieter & Services, Footer mit Impressum & Datenschutz
Nächster Schritt
- Konkrete SvelteKit-Projektstruktur
- Supabase-Setup inkl. Tabellen
- Beispiel-Routen für Providers, Services, Donate, Auth, Ads