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

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

Error State Design

API Error → Parse Error → User-Friendly Message → Recovery Action

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

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

Protected Route Pattern

// Redirect unauthenticated users
if (!user && !loading) {
  return <Navigate to="/login" state={{ from: location }} />;
}

Real-Time Updates

Presence Indicators

• Online status dots
• "User is typing..." indicators
• Collaborative cursors

Full-Stack Design Critique

See Also

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