Zum Inhalt springen
    WingoUI
    KomponentenVorlagenDokuPreiseKI-AgentenBlogChangelog
    1. Startseite
    2. Blog
    3. Praxis: Screens und Apps
    Blog

    Praxis: React-Screens und Apps Schritt für Schritt bauen

    Einzelne Komponenten sind nur die halbe Arbeit. Echte Produkte bestehen aus Screens: Anmeldung, Onboarding, Einstellungen, Abrechnung, ein Dashboard, eine Datentabelle mit Filtern, ein Chat. Diese Kategorie baut solche Screens von Anfang bis Ende, so wie du sie für einen Kunden oder dein eigenes Produkt bauen würdest.
    EmpfohlenPraxis: Screens und Apps

    Nextjs Admin Dashboard: 5 Screens, fit fürs Smartphone

    Bau ein Nextjs Admin Dashboard mit dem App Router: App Shell, KPI-Startseite, serverseitige Datentabelle, Settings und Team, alles fit fürs Smartphone.

    SR
    Serban Rusu
    9. Okt. 2026 · 21 Min. Lesezeit

    Alle Artikel

    /Slash
    Praxis: Screens und Apps

    Next.js Blog Template: Markdown, Live-Demos und JSON-LD

    So haben wir ein Next.js Blog Template auf Markdown gebaut: zod-Frontmatter, Live-Demos, Sticky-Inhaltsverzeichnis, JSON-LD, Feeds und ein strenger Validator.

    SRSerban Rusu·16. Okt. 2026·10 Min. Lesezeit
    Praxis: Screens und Apps

    Next.js SaaS Landing Page: Was jeder Abschnitt beweisen muss

    Bau eine Next.js SaaS Landing Page Abschnitt für Abschnitt: was Hero, Social Proof, Features, Preise und FAQ beweisen müssen, was rausfliegt, was mobil zählt.

    SRSerban Rusu·16. Okt. 2026·11 Min. Lesezeit
    Praxis: Screens und Apps

    Nextjs Status Page: 90-Tage-Uptime-Balken und Störungen

    Bau eine nextjs status page aus deinen Monitoring-Daten: ehrliche 90-Tage-Uptime-Balken, Störungen, Wartung, ISR per Webhook und Hosting, das online bleibt.

    SRSerban Rusu·16. Okt. 2026·12 Min. Lesezeit
    Praxis: Screens und Apps

    Nextjs Waitlist Page: Countdown, Empfehlungen, echte Zahlen

    Bau eine Nextjs Waitlist Page mit Countdown, E-Mail-Feld, Platz auf der Liste und Empfehlungslink auf Postgres, dazu eine Anmeldezahl, die nie gefälscht ist.

    SRSerban Rusu·16. Okt. 2026·10 Min. Lesezeit
    Praxis: Screens und Apps

    React 404 Seite: 5 Fehlerseiten für den Next.js App Router

    React 404 Seite, die Besuchern weiterhilft, plus Screens für 500, Wartung, Offline und fehlenden Zugriff, sauber im Next.js App Router mit echtem Statuscode.

    SRSerban Rusu·16. Okt. 2026·12 Min. Lesezeit
    Praxis: Screens und Apps

    React Checkout Page: Warenkorb, Schritte, Gutscheine

    Bau eine React Checkout Page vom Warenkorb bis zur Bestätigung: vier Schritte, neu geprüfte Gutscheine, eine Sticky Bar am Smartphone und weniger Kaufabbrüche.

    SRSerban Rusu·16. Okt. 2026·12 Min. Lesezeit
    Praxis: Screens und Apps

    React CRM Template: Pipeline, Prognose, Firmenseiten

    Bau ein React CRM Template in Next.js aus Blöcken: ein Pipeline-Kanban mit gewichteter Prognose, ein Deal-Sheet, Firmenseiten und ein Layout fürs Smartphone.

    SRSerban Rusu·16. Okt. 2026·11 Min. Lesezeit
    Praxis: Screens und Apps

    React Invoice Template: Positionen, MwSt. und Druckansicht

    Bau ein React Invoice Template in Next.js: Positionen wie in Excel, Rabatte mit exakter MwSt., Steuer pro Satz und eine Druckansicht als sauberes PDF.

    SRSerban Rusu·16. Okt. 2026·10 Min. Lesezeit
    Praxis: Screens und Apps

    React Marketplace Template, das sich wie eine App anfühlt

    Bau ein React Marketplace Template mit Next.js: Suche nach Was und Wo, Filter in der URL, Inseratskarten und Detailseite, die am Smartphone wie eine App wirken.

    SRSerban Rusu·16. Okt. 2026·15 Min. Lesezeit
    Praxis: Screens und Apps

    React Onboarding Flow: Slides, Berechtigungen, Installation

    React Onboarding Flow in Next.js: Slides mit Skip, Push- und Standortabfragen, die man ablehnen kann, gespeicherter Fortschritt, am Ende die PWA-Installation.

    SRSerban Rusu·16. Okt. 2026·10 Min. Lesezeit
    Praxis: Screens und Apps

    React Settings Page: Navigation, Save Bar und Danger Zone

    Bau eine React Settings Page mit Seitennavigation am Desktop, iOS-Liste auf dem Smartphone, Save Bar für offene Änderungen und abgesicherter Danger Zone.

    SRSerban Rusu·16. Okt. 2026·11 Min. Lesezeit
    Praxis: Screens und Apps

    React Workflow Builder: Trigger, Zweige und KI-Schritte

    Bau einen React Workflow Builder auf React Flow: Schrittkatalog, Ja/Nein-Zweige, KI-Schritte, Validierung, Live-Status und eine Regelliste für einfache Abläufe.

    SRSerban Rusu·16. Okt. 2026·13 Min. Lesezeit
    Praxis: Screens und Apps

    Shadcn Login Page: Magic Link, Codes, 2FA und Reset

    So baust du eine shadcn login page in Next.js: Passwort, Magic Link, E-Mail-Codes, Social Login, 2FA und Passwort-Reset, inklusive aller Fehlerzustände.

    SRSerban Rusu·16. Okt. 2026·12 Min. Lesezeit
    Praxis: Screens und Apps

    Shadcn Pricing Page: Jahres-Toggle, Tabelle, Mobile-Layout

    So baust du eine shadcn pricing page in React: Monatlich / Jährlich mit rollenden Preisen, Vergleichstabelle mit Sticky Header und Pläne fürs Smartphone.

    SRSerban Rusu·16. Okt. 2026·10 Min. Lesezeit
    Praxis: Screens und Apps

    E-Factura MwSt berechnen in TypeScript und React

    E-Factura MwSt berechnen in TypeScript: Rumäniens Sätze 21 % und 11 %, MwSt. einmal pro Satz runden, Summen, die ANAF auf den Cent prüft, plus React-Editor.

    SRSerban Rusu·9. Okt. 2026·11 Min. Lesezeit
    Praxis: Screens und Apps

    Rumänische Adresse: Format, Regeln und ein React-Formular

    Die rumänische Adresse Teil für Teil: Kreis oder Sektor in Bukarest, Ort, Straße, bl. sc. et. ap., die sechsstellige Postleitzahl und ein React-Formular dafür.

    SRSerban Rusu·9. Okt. 2026·10 Min. Lesezeit

    Über Praxis: Screens und Apps

    Jedes Tutorial beginnt mit einem konkreten Ziel, wählt die passenden Komponenten und Blocks und verbindet sie mit echtem State, Validierung sowie Lade- und Leerzuständen. Formulare nutzen react-hook-form und zod, Tabellen nutzen TanStack Table, und jeder Screen wird in Smartphone-Breite geprüft, denn ein Backoffice, das nur auf dem Laptop funktioniert, ist nicht fertig. Wo es hilft, erklären die Artikel auch die Entscheidungen hinter einem Screen, etwa warum eine Filterleiste auf dem Smartphone zum Bottom Sheet wird oder wie eine Einstellungsseite Änderungen speichert, ohne zu verlieren, was jemand getippt hat.

    Der Code nutzt Next.js App Router, React 19 und Tailwind CSS v4 mit Komponenten und Blocks von Wingo UI. Du kannst also im eigenen Projekt mitbauen oder mit der passenden Vorlage starten.

    Weitere Themen

    • Mobile UI mit React

      So baust du React-Oberflächen, die sich auf dem Smartphone nativ anfühlen: Bottom Sheets, Touch-Ziele, Safe Areas und Tabellen, die zu Karten werden.

      23 Artikel

    • UI mit KI-Agenten bauen

      Praxisnahe Guides für React-UI mit Claude Code, Cursor und Codex: MCP-Server, Rules-Dateien, llms.txt und Komponenten-Registries.

      13 Artikel

    • Komponenten-Guides

      Guides zu einzelnen React-Komponenten: wann du welche nutzt, die wichtigen Props, Barrierefreiheit, Verhalten auf dem Smartphone und typische Fehler.

      57 Artikel

    • Vergleiche und Alternativen

      Ehrliche, datierte Vergleiche von React-Komponentenbibliotheken und Tools, mit Quellen, Preisen und einer klaren Empfehlung für jeden Anwendungsfall.

      14 Artikel

    • Next.js und Tailwind CSS

      Guides zu Next.js App Router, React 19 und Tailwind CSS v4 für alle, die UI-Komponenten und Designsysteme bauen und pflegen.

      11 Artikel

    Newsletter

    Neue Artikel per E-Mail

    Neue Guides, Tutorials und Vergleiche aus dem Wingo UI Blog, sobald sie erscheinen. Die meisten Artikel sind auf Englisch.

    Kein Spam. Du kannst dich jederzeit abmelden.

    WingoUI

    Animierte, konfigurierbare, mobile-first React-Komponenten und Blöcke. Kopier den Quellcode, pass ihn an und lass deinen Coding-Agenten damit bauen.

    Produkt

    • Komponenten
    • Vorlagen
    • Preise
    • KI-Agenten
    • Theme-Generator

    Ressourcen

    • Doku
    • Blog
    • Changelog
    • Changelog-RSS
    • llms.txt

    Rechtliches

    • AGB
    • Datenschutz
    • Rückerstattung
    • Lizenz
    • Impressum

    Komponenten-Kategorien

    • Buttons & Actions
    • Inputs
    • Forms
    • Navigation
    • Overlays
    • Feedback
    • Data Display
    • Tables & Lists
    • Charts & Stats
    • Layout
    • Media
    • AI Kit
    • Text & Effects
    • Mobile
    • Commerce
    • Marketing Sections
    • Blocks
    • Hooks & Utilities

    © 2026 Wingo UI

    Wingo UI