Build shopping cart system with these requirements:

Guest Experience: Store cart in localStorage with unique session ID. Persist for 30 days. Handle multiple tabs syncing via storage events. Show item count badge in header.

Cart Operations: Add/remove items, update quantities, apply promo codes, calculate tax and shipping in real-time. Optimistic UI updates with rollback on errors.

Checkout Flow: Offer guest checkout (email + shipping) OR account creation. For new accounts, use magic link authentication (email with 6-digit code, 15-minute expiration). On successful auth, migrate localStorage cart to database and associate with user account.

Returning Users: On login, check for localStorage cart. If exists, merge with server cart (keep higher quantity for duplicates). Show confirmation modal before merge.

Edge Cases: Handle out-of-stock during checkout, price changes since cart addition, expired promo codes, concurrent cart modifications, network failures with retry logic.

Tech Stack: Next.js App Router, React Server Components for cart display, Server Actions for mutations, Prisma + PostgreSQL for database, Redis for session management, Resend for magic link emails.

Build infinite feed with these requirements:

Pagination: Load 20 items initially, fetch next 20 when user reaches 80% scroll depth. Use cursor-based pagination (last item timestamp) not offset-based. Implement intersection observer for scroll detection, not scroll event listeners.

Loading States: Show skeleton screens during initial load. Display "loading more" spinner at bottom during pagination. Prevent duplicate fetches with request deduplication.

Optimistic Updates: Like/unlike, bookmark, repost actions update UI immediately before server confirmation. Show subtle loading indicator on item during mutation. Roll back on error with toast notification.

Real-time: Use WebSocket or Server-Sent Events to receive new items. Show "5 new posts" banner at top instead of auto-injecting (prevents scroll jumping). Click banner to smoothly scroll to top and insert new items.

Performance: Virtualize list if >100 items (use react-window). Lazy load images with blur placeholder. Cache feed data in React Query with 5-minute stale time. Prefetch next page when user reaches 50% scroll.

Empty States: Show onboarding if feed is empty. Display "You're all caught up!" at end with suggestions to follow more accounts.

Tech Stack: React, TanStack Query (React Query) for data fetching, Intersection Observer API, react-window for virtualization, Supabase Realtime or Pusher for live updates.

Build real-time collaboration with these requirements:

Presence Awareness: Show avatar bubbles of active users (max 5 visible, +N for overflow). Display colored cursor with username label tracking remote users' positions. Show "User X is typing..." indicator. Auto-remove user after 30 seconds of inactivity.

Conflict Resolution: Use Operational Transformation (OT) or CRDT (Conflict-free Replicated Data Type) for text editing. Implement last-write-wins for form fields with visual indicator showing who made last change and when. Lock editing on specific sections when user is actively typing (release after 3 seconds of no input).

Change Broadcasting: Send changes via WebSocket with 50ms debounce. Include operation type (insert/delete/update), position, content, user ID, and timestamp. Handle offline mode by queuing changes and syncing on reconnect.

Version History: Create snapshot every 5 minutes or 100 operations. Store diffs not full copies. Allow restore to any point with visual diff preview. Show timeline slider with user avatars marking who made changes.

Permissions: Support view-only, comment-only, and edit modes. Show permission badge next to user avatars. Allow document owner to change permissions in real-time (immediately revoke access).

Network Resilience: Show connection status indicator. Buffer changes during disconnect. On reconnect, replay buffered operations with conflict resolution. Show "Syncing..." state with retry count.

Tech Stack: Yjs or Automerge for CRDT, Liveblocks or Partykit for real-time infrastructure, TipTap or ProseMirror for rich text editing, WebSocket for transport layer, Redis for presence tracking.

Build multi-step onboarding with these requirements:

Step Management: Create wizard with 4-7 steps. Show progress bar with step titles. Support back/next navigation. Validate current step before allowing progression. Store completed step numbers in state.

Data Persistence: Save form data to localStorage after each step. Persist for 7 days. On page reload or return visit, restore user to last completed step with all previous data. Show "Resume where you left off" banner if incomplete onboarding detected.

Conditional Branching: Show/hide steps based on previous answers. Example: If user selects "Business" account, show company details step. If "Personal", skip to preferences. Update progress bar dynamically when steps are added/removed.

Exit Intent: Detect when user tries to leave (beforeunload event). Show modal: "Save progress and finish later?" with options to Continue or Exit. Send reminder email after 24 hours if onboarding incomplete.

Validation: Real-time validation per field with debouncing. Show field-level errors immediately. Block progression if current step has errors. Summarize all errors at top if user tries to skip.

Final Submission: On last step, show summary of all answers with Edit buttons. Submit all data at once with loading state. On success, clear localStorage and redirect to dashboard. On error, keep data and show specific error message.

Tech Stack: React Hook Form for validation, Zustand or Context for step state, localStorage for persistence, Framer Motion for step transitions, Zod for schema validation.

Build search with filters with these requirements:

Search Input: Debounce search queries by 300ms. Show loading indicator in search box during fetch. Display result count: "Showing 43 of 1,203 results". Highlight search terms in results.

Filter System: Support multiple filter types: checkboxes (categories), range sliders (price), dropdowns (location), date pickers. Show active filter count badge. Display active filters as removable chips above results. "Clear all" button when multiple filters active.

URL Synchronization: Encode all filters and search query in URL params. Update URL without page reload (pushState). Parse URL on load to restore exact search state. Enable back/forward browser navigation through search history. Make URLs shareable—clicking link shows identical results.

Faceted Counts: Show result counts next to each filter option: "Electronics (234)". Update counts dynamically when other filters applied. Disable options with 0 results (gray out). Recalculate counts with each filter change.

Recent Searches: Store last 5 searches in localStorage. Show dropdown of recent searches below input on focus. Include search query and filter state. Allow clicking to restore exact search. Clear individual history items or all at once.

Performance: Implement server-side filtering with indexed database queries. Paginate results (20 per page). Cache filter options that rarely change. Use React Query with staleTime for repeated searches.

Tech Stack: Next.js with useSearchParams hook, React Query for search caching, Algolia or Typesense for advanced search, PostgreSQL with GIN indexes for full-text, Zustand for filter state.

Build file upload flow with these requirements:

Drop Zone: Create drag-and-drop area with hover state. Support click to browse files. Accept multiple files simultaneously. Show file type icons and names immediately. Validate file types and sizes before upload (reject if invalid).

Upload Progress: Show individual progress bar for each file with percentage. Display upload speed (MB/s) and time remaining. Support pausing and resuming uploads. Show all files uploading in a queue (process 3 at a time). Thumbnail preview for images during upload.

Cloud Storage: Use presigned URLs for direct browser-to-S3 uploads (skip your server). Generate unique filenames with UUID prefix. Store metadata in database: original filename, size, MIME type, upload timestamp, user ID. Set appropriate CORS and bucket policies.

Error Handling: Retry failed uploads automatically (3 attempts with exponential backoff). Show specific error messages: "File too large (max 50MB)" or "Invalid format (PDF only)". Allow manual retry with button. Don't lose progress on network disconnect.

Preview Generation: Generate thumbnails server-side for images using Sharp or Cloudinary. Extract first page for PDFs. Show loading skeleton while generating. Store preview URLs in database. Lazy load previews in galleries.

File Management: Allow deleting uploaded files (remove from storage + database). Download original file button. Copy shareable link to clipboard. Show file metadata: size, upload date, dimensions for images.

Tech Stack: AWS S3 or Vercel Blob for storage, Next.js API routes for signed URLs, react-dropzone for drag-drop, Sharp for image processing, Uppy or Filepond as alternative full solutions.

Build notification system with these requirements:

Toast Queue: Display toasts in bottom-right corner stacked vertically (max 3 visible). Auto-dismiss after 5 seconds (error toasts stay until dismissed). Support success, error, warning, info types with color coding. Swipe to dismiss on mobile. Show newest on top, push older down.

Notification Center: Bell icon in header with unread count badge. Dropdown panel showing last 20 notifications. Group similar notifications: "John and 5 others liked your post". Show timestamps: "2 minutes ago" vs "Mar 15". Infinite scroll for older notifications.

Real-time Delivery: Use WebSocket or Server-Sent Events for instant delivery. Show toast for high-priority notifications (mentions, DMs). Update notification center badge count without toast for low-priority (likes, follows). Batch notifications: if 5 likes in 30 seconds, group into one.

Read/Unread State: Mark as read when notification clicked or when notification center opened. Bold unread notifications. Show blue dot indicator for unread. "Mark all as read" button. Track read status per user in database.

Notification Types: Support multiple types: likes, comments, mentions, follows, system alerts, marketing messages. Each type has icon, color, and action (navigate to post/profile). Allow filtering by type in notification center. User preferences for which types to receive.

Persistence: Store notifications in database with: type, content, timestamp, read status, user ID, reference ID (post/comment ID). Fetch last 30 days on load. Paginate older history. Delete read notifications after 90 days automatically.

Tech Stack: Sonner or react-hot-toast for toasts, Pusher or Supabase Realtime for WebSocket, PostgreSQL for storage, React Query for fetching, Zustand for unread count state.

Build payment flow with these requirements:

Checkout Flow: Embed Stripe Payment Element (handles cards, Apple Pay, Google Pay). Show order summary with line items and total. Validate billing address if required. Disable submit button during processing. Show loading spinner on button: "Processing..."

Payment Intent: Create PaymentIntent on server with amount and currency. Return clientSecret to frontend. Confirm payment with Stripe.js. Handle 3D Secure authentication modal (redirect user if needed). Poll payment status after redirect return.

Error Handling: Show specific error messages: "Card declined - insufficient funds" or "Invalid CVC". Allow retry without recreating PaymentIntent. Handle network failures gracefully (don't double-charge). Timeout after 60 seconds with clear message. Log all errors to monitoring service.

Webhook Processing: Listen for payment_intent.succeeded event. Verify webhook signature with Stripe. Use idempotency keys to prevent duplicate processing. Update order status in database atomically. Send confirmation email only after webhook confirms payment. Handle failed webhooks with manual reconciliation.

Receipt Generation: Create PDF receipt with: company logo, invoice number, line items, subtotal, tax, total, payment method (last 4 digits). Store in S3 with secure URL. Email receipt immediately after webhook confirmation. Allow downloading from order history. Include refund policy and support email.

Subscription Support: For recurring billing, create Stripe Customer and Subscription. Handle trial periods, proration, plan changes. Show next billing date and amount. Allow canceling subscription (cancel at period end). Send reminder email 3 days before renewal.

Tech Stack: Stripe SDK (backend + frontend), Next.js API routes for server-side operations, React for payment form, PDFKit or Puppeteer for receipts, Resend for emails, PostgreSQL for orders.