NeighborHub: Real-Time Community Connection for Local Neighborhoods

This is a submission for the DEV Weekend Challenge: Community

The Community

NeighborHub is built for local neighborhood communities — residents, block associations, and neighborhood groups who want a centralized digital space to stay connected. Whether it's organizing a block party, posting a safety announcement, requesting help with groceries, or starting a discussion about local parks, NeighborHub brings neighbors together in a meaningful way. The platform eliminates the fragmentation of group chats and social media by providing a purpose-built, category-driven community feed.

What I Built

NeighborHub — a real-time community connection platform where neighbors can:

• 📢 Post announcements — share important neighborhood updates


• 🎉 Organize events — create events with date, time, and location


• 🤝 Request help — ask neighbors for assistance


• 💬 Start discussions — open community conversations


• ❤️ Like & comment — engage with posts in real-time via Supabase Realtime (WebSocket subscriptions)


• 👤 View profiles — click any avatar/username to visit their public profile and see their posts

Key highlights:

• 
  Optimistic UI: Actions feel instant — likes toggle and comments appear immediately, then reconcile with the server


• 
  Category filtering: Filter the feed by Events, Announcements, Help Requests, or Discussions


• 
  Skeleton loaders: Every route has a shimmer loading state for smooth perceived performance


• 
  Global navigation progress bar: Animated gradient bar at the top during page transitions


• 
  Fully responsive: Works beautifully on mobile, tablet, and desktop=

Demo

🔗 Live Demo: https://neighbor-hub-phi.vercel.app/

Code

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

How I Built It

Tech Stack

Architecture Decisions

• 
  Server Components by default — pages fetch data on the server with zero client-side waterfalls. Only interactive elements (like buttons, comment forms, realtime subscriptions) are Client Components.


• 
  Server Actions for all mutations — no API routes needed. Form submissions for auth, posts, comments, likes, and profile updates all use Next.js Server Actions with revalidatePath for cache invalidation.


• 
  Row Level Security (RLS) — every table has granular policies. Users can only modify their own data. Public read access for community transparency.


• 
  Database triggers — likes_count and comments_count are maintained automatically via PostgreSQL triggers, avoiding N+1 queries.


• 
  Supabase Realtime subscriptions — LikeButton and CommentSection subscribe to postgres_changes events. A localActionRef prevents double-counting the user's own actions while still receiving updates from other users.


• 
  Middleware — refreshes Supabase auth sessions on every request and protects /profile, /posts/new routes from unauthenticated access.


• 
  Migration-based schema — 8 ordered SQL migrations handle tables, RLS policies, triggers, indexes, realtime config, and seed data. Fully reproducible with supabase db push.