generic-fullstack-ux-designer

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

• Generic UX Designer - Base methodology
• UX Principles - Research methods, heuristics
• Design Patterns - Visual patterns