Fullstack UX Designer
Professional UX expertise for Next.js/NestJS full-stack applications.
Extends: Generic UX Designer - Read base skill for design thinking process, research methods, interaction patterns, and critique framework.
Full-Stack UX Considerations
Server-Side Rendering UX
| Scenario | UX Pattern |
|---|
| Initial page load | Hydration-safe skeleton screens |
| Data fetching | Server components for static, client for dynamic |
| Authentication | Protected routes with redirect UX |
| Form submission | Progressive enhancement |
Hydration-Safe Patterns
// ✓ Avoid hydration mismatch
function Timestamp({ date }: { date: Date }) {
const [formatted, setFormatted] = useState("");
useEffect(() => {
setFormatted(date.toLocaleString()); // Client-side only
}, [date]);
return <span>{formatted || "Loading..."}</span>;
}
API Loading & Error States
Loading State Hierarchy
| Duration | Pattern | Example |
|---|
| < 100ms | No indicator | Button click |
| 100ms - 1s | Subtle spinner | Form submit |
| 1s - 5s | Skeleton screen | Page fetch |
| > 5s | Progress bar | File upload |
Error State Design
API Error → Parse Error → User-Friendly Message → Recovery Action
| Error Type | User Message | Recovery |
|---|
| 400 Validation | Show field errors | Fix and retry |
| 401 Unauthorized | "Please log in" | Redirect to login |
| 404 Not Found | "Item not found" | Navigate back |
| 500 Server Error | "Something went wrong" | Retry button |
Optimistic UI Pattern
// Show immediate feedback, rollback on error
async function toggleLike(postId: string) {
// 1. Update UI immediately
setLiked(true);
setLikeCount((c) => c + 1);
try {
// 2. Call API
await api.like(postId);
} catch {
// 3. Rollback on failure
setLiked(false);
setLikeCount((c) => c - 1);
showToast("Failed to like");
}
}
When to Use Optimistic UI
| Action | Optimistic? | Why |
|---|
| Like/favorite | Yes | Low risk, common action |
| Add comment | Yes | Can show pending state |
| Delete item | No | Destructive, needs confirm |
| Payment | No | Critical, must verify |
| Form submit | Maybe | Depends on complexity |
Form Submission UX
Client → Server Flow
User Input → Client Validation → Submit → Server Validation → Response
↓ ↓ ↓ ↓ ↓
Feedback Inline errors Loading... Field errors Success/Error
Multi-Step Forms
// Show progress and allow back navigation
<FormStepper
steps={["Details", "Payment", "Confirm"]}
currentStep={step}
onBack={() => setStep((s) => s - 1)}
/>
Authentication UX
Login Flow Patterns
| State | UX |
|---|
| Loading auth | Full-page skeleton |
| Not logged in | Show login form |
| Logging in | Disable form, show spinner |
| Success | Redirect with toast |
| Error | Inline error, keep form data |
Protected Route Pattern
// Redirect unauthenticated users
if (!user && !loading) {
return <Navigate to="/login" state={{ from: location }} />;
}
Real-Time Updates
| Pattern | Use Case |
|---|
| Polling | Low-frequency updates (notifications) |
| WebSocket | Chat, live collaboration |
| SSE | One-way server updates |
Presence Indicators
- Online status dots
- "User is typing..." indicators
- Collaborative cursors
Full-Stack Design Critique
| Aspect | Questions |
|---|
| Loading states | What shows during API calls? |
| Error recovery | Can users recover from errors? |
| Offline behavior | What happens without network? |
| Auth transitions | Smooth login/logout experience? |
| Data freshness | Is stale data clearly indicated? |
See Also
