FUNKTION

⚙️ Feature-Prompts. Atomar verdrahten.

Atomare Prompts, nach Kategorie sortiert. Suche oder filtere – kopiere, was du brauchst.

34 Treffer

🔐 Foundation – Auth & Accounts

E-Mail/Passwort-Login

Klassische Anmeldung mit Registrierung, Login und Logout.

Add Supabase email/password authentication. Create sign-up, log-in and log-out flows with form validation, error states, and protected routes that redirect logged-out users to the login page.

Social Login

Anmeldung über Google/GitHub statt Passwort.

Add social login with Google and GitHub via Supabase OAuth. Show provider buttons on the login screen and create the user profile automatically on first sign-in.

Rollen & Rechte

Unterschiedliche Zugriffe für Admin vs. Nutzer.

Implement role-based access control with 'admin' and 'user' roles stored in the database. Hide admin-only UI for normal users and guard admin routes server-side.

Nutzerprofil

Profilseite mit Avatar und editierbaren Daten.

Create a user profile page where users can edit their name, avatar (image upload to Supabase storage) and bio. Show a loading state while saving and a success toast on completion.

Passwort zurücksetzen

Vergessen-Flow per E-Mail-Link.

Add a 'forgot password' flow: a request form that sends a reset email via Supabase, and a reset page that lets the user set a new password with validation.

🧭 Core UX & UI

Responsive Navigation

Navbar mit Mobile-Menü und aktivem Zustand.

Create a responsive navigation bar with a logo, links, and a CTA button. On mobile, collapse links into a hamburger menu with a smooth slide-in drawer. Highlight the active route.

Dashboard-Layout

Sidebar + Topbar + Content-Bereich.

Build a dashboard layout with a collapsible sidebar, a top bar with search and user menu, and a main content area with stat cards in a responsive grid.

Datentabelle

Tabelle mit Sortierung, Filter und Pagination.

Create a data table with column sorting, a search filter, pagination, and row actions (edit/delete). Use a clean shadcn/ui table with hover states.

Empty States

Hilfreiche Leerzustände statt leerer Seiten.

Add empty states for lists and tables: a friendly illustration, a one-line explanation, and a primary CTA to create the first item. Also add skeleton loaders for the loading state.

Toasts & Feedback

Erfolgs- und Fehlermeldungen als Toast.

Add toast notifications for success and error feedback across the app (e.g. after save, delete, or failed network request). Use a non-blocking toast in the bottom-right corner.

🤝 Collaboration & Growth

Kommentare

Threaded Kommentare an Inhalten.

Add a comments section to items: users can post, edit and delete their own comments, with author avatar, timestamp and optimistic UI updates.

Benachrichtigungen

In-App-Notifications mit Ungelesen-Zähler.

Add an in-app notification system with a bell icon, an unread badge count, and a dropdown listing recent notifications that mark as read on open.

Teams & Einladungen

Nutzer in Workspaces einladen.

Add teams/workspaces: a user can create a team and invite members by email. Show pending invites and let members accept to join the shared workspace.

Activity Feed

Chronik der letzten Aktionen.

Create an activity feed that logs key actions (created, updated, commented) with actor, action, target and relative timestamp, grouped by day.

Empfehlungs-Programm

Teilen per persönlichem Link.

Add a referral program: each user gets a unique invite link, a copy-to-clipboard button, and a simple counter showing how many people signed up through their link.

💳 Monetization

Stripe Checkout

Bezahlung über Stripe.

Integrate Stripe Checkout for one-time payments. Add a 'Buy' button that creates a checkout session via an edge function and handles the success and cancel redirects.

Pricing-Seite

Drei Tarife mit Highlight.

Create a pricing page with three tiers (Starter, Pro, Business) in cards, a highlighted recommended plan, a monthly/yearly toggle, and a feature comparison list.

Abos & Tiers

Wiederkehrende Zahlungen mit Stufen.

Add Stripe subscriptions with monthly and yearly plans. Gate premium features behind an active subscription and show the current plan on the account page.

Billing-Portal

Selbstverwaltung von Zahlung & Rechnungen.

Add a Stripe customer billing portal link on the account page so users can update their payment method, view invoices, and cancel their subscription.

🔌 Integrations

Transaktions-E-Mails

E-Mails über Resend versenden.

Send transactional emails via Resend (welcome email on sign-up, notification on key events). Use an edge function and a clean HTML email template.

Datei-Upload

Dateien & Bilder in Storage ablegen.

Add file upload to Supabase storage with drag-and-drop, image preview, progress indicator, file-type and size validation, and a list of uploaded files with delete.

Kalender-Ansicht

Termine in Monats-/Wochenansicht.

Add a calendar view that shows events in month and week layouts, lets users click a day to create an event, and displays event details in a popover.

Webhooks

Externe Events empfangen.

Create a webhook endpoint via an edge function that receives external events, verifies the signature, and updates the database accordingly.

Karten

Standorte auf einer Karte.

Add an interactive map that displays location markers from the database, with a popup on click showing the item name and a link to its detail page.

🏗️ Advanced Systems

Globale Suche

Schnelle Suche über alle Inhalte.

Add a global search with a command palette (Cmd/Ctrl+K) that searches across items, debounces input, and shows grouped results with keyboard navigation.

Audit-Log

Nachvollziehbare Änderungs-Historie.

Add an audit log that records who changed what and when for important records, with a filterable admin view.

Multi-Tenancy

Datentrennung pro Organisation.

Implement multi-tenant data isolation: scope all records to an organization and enforce it with Supabase row-level security policies.

Daten-Export

Inhalte als CSV exportieren.

Add a CSV export button that exports the currently filtered table data, with proper headers and a generated filename including the date.

Hintergrund-Jobs

Geplante/asynchrone Aufgaben.

Add a scheduled background job via a Supabase cron edge function (e.g. a daily summary email) and log each run for monitoring.

AI Superpowers

KI-Assistent

Chat-Assistent im Produkt.

Add an AI chat assistant in a side panel that answers questions about the user's data, streams responses token by token, and keeps conversation history.

Semantische Suche

Suche nach Bedeutung statt Stichwort.

Add semantic search over content using embeddings stored in Supabase pgvector, returning the most relevant items ranked by similarity.

Zusammenfassen

Lange Inhalte auf Knopfdruck kürzen.

Add a 'Summarize' button on long content that calls an AI model and shows a concise bullet-point summary in a dialog.

Content-Generierung

Texte per KI entwerfen.

Add AI content generation: a button that drafts text from a short prompt and lets the user insert, regenerate, or refine the result.

Bild-Generierung

Bilder aus Text erzeugen.

Add AI image generation from a text prompt, show a loading state while generating, and let the user save the result to their storage.