Project Summary:

The Pulse is a Next.js 15 social feed dashboard engineered for maximum perceived performance, staying fast and responsive even under poor network conditions. The app features a feed of trending creator profiles with follow/like interactions, backed by Supabase for real email authentication and state persistence. Rather than relying solely on API speed, every interaction is designed to feel instant through aggressive client-side caching strategies.

Tech Stack: Next.js 15 (App Router), TypeScript, Tailwind CSS v4, TanStack React Query, Supabase, Zod

The Strategy

Instead of only optimizing the API, the project focused on five core caching patterns that work together to create an instant feel:

1. Stale-While-Revalidate (SWR): Serves cached data immediately while fetching fresh data in the background. Users never stare at loading screens to see content.

2. Optimistic Updates: Updates the UI the moment a user clicks Follow or Like before the server responds, with graceful rollback handling on network failure.

3. Prefetching on Intent (Hover): Prefetches creator detail data when the cursor hovers over a card, ensuring the route payload is already cached if they click.

4. Manual Cache Invalidation: Features a Refresh Feed action that invalidates the query cache on demand, triggering a background refetch without blocking the UI.

5. Background Refetch on Window Focus: Automatically revalidates stale data when the user returns to the tab, keeping content updated without full page reloads.