
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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.
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.
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
Praxisnahe Guides für React-UI mit Claude Code, Cursor und Codex: MCP-Server, Rules-Dateien, llms.txt und Komponenten-Registries.
13 Artikel
Guides zu einzelnen React-Komponenten: wann du welche nutzt, die wichtigen Props, Barrierefreiheit, Verhalten auf dem Smartphone und typische Fehler.
57 Artikel
Ehrliche, datierte Vergleiche von React-Komponentenbibliotheken und Tools, mit Quellen, Preisen und einer klaren Empfehlung für jeden Anwendungsfall.
14 Artikel
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
Kein Spam. Du kannst dich jederzeit abmelden.