The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
How I Built a 60 FPS Real-Time Esports HUD Builder & WebGL Broadcast Engine for BLOB
Live esports broadcasts don’t forgive dropped frames.
When competitive titles like Valorant, Counter-Strike 2, and Rocket League stream tournament telemetry at 60 updates per second, standard React virtual DOM reconciliation simply chokes under the load in OBS Studio. I was brought on by BLOB Productions following a competitive head-to-head architectural evaluation to completely re-engineer their broadcast overlay infrastructure from the ground up.
What We Built:
- 60 FPS Headless HUD Engine: Built a renderer-independent JSON scene graph with Figma/Rive-grade interaction math (multi-selection, aspect-ratio locked transforms, boolean operations, and 360° pivot rotations).
- Complete Vector & Style Stack: Multi-fills with linear/radial gradients, multi-strokes, inner/drop shadows, per-corner radiuses, blend modes, and Gaussian blurs.
- Reactive Data & Motion Logic Engine (Core IP): Continuous value mapping (e.g., player health mapped to visual bar width), dynamic scope inheritance across duplicated player cards, repeaters, and event-driven trigger animations.
- Ultra-Low Latency OBS Runtime: A lightweight PixiJS (WebGL) runtime with signal-based direct node mutations and a jitter-smoothing dead reckoning buffer—maintaining $<16ms Time-to-Glass.
- Zero-Egress Client-Side Edge Merge: Merged high-frequency P2P/WebSocket telemetry directly on the client edge with static tournament metadata, eliminating expensive cloud compute bottlenecks.
- Cloud Persistence & Publishing Pipeline: CockroachDB/PostgreSQL draft-versus-live isolation, version rollback, and an automated P0 verification test suite.
Read the full case study with architectural diagrams and demo breakdown here: 60 FPS Real-Time Esports HUD Builder
Looks rrally cool!
Beautiful UI shouldn't require messy code. ✨
A while ago, I built this feature section for TipMi. Looking at the varied card sizes, you might think it requires complex positioning or endless Flexbox containers. The secret weapon? CSS Grid with grid-template-areas.
Using Grid for this specific architecture is the easiest, most scalable approach. You get complete two-dimensional control, allowing you to span items across multiple columns and rows seamlessly while keeping the underlying HTML structure incredibly clean and readable.
Take a look at the live build here: https://tipmi-dev.vercel.app/
Great design 👍
Zenvyra is a professional education website design created for edtech startups, schools, coaching centers, tutoring businesses, mentoring platforms, and online course brands that want to build trust and increase enrollments.
The homepage focuses on clear navigation, strong calls-to-action, social proof, and a clean learning-focused layout to help students explore courses easily. Perfect for brands building an online school, e learning platform, course website, or education platform.
Designed with a bold, elegant, and conversion-focused UI style.
Looking for a conversion-focused, user-friendly design?
Course DeveloperResponsive DesignGo High LevelKajabiKitkajabicoursekajabiexpertkajabiwebsiteWeb Design
The harder part of a template like this is that schools, coaching centers, tutoring businesses & mentoring platforms all sell trust differently. a school leans on curriculum and outcomes. a coaching center leans on the person running it. same layout will not carry the same...
