NeighborHub: Real-Time Community Connection for Local Neighborhoods

Source: Dev.to

DEV Weekend Challenge: Community

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 that want a centralized digital space to stay connected. Whether you’re 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 is 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 a public profile and see that user’s 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:

Code

This project is built with Next.js and was bootstrapped using create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto‑updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

Explore these resources to deepen your knowledge of Next.js:

• Next.js Documentation – Detailed guide to Next.js features and API.
• Learn Next.js – Interactive tutorial for hands‑on learning.
• Next.js GitHub Repository – View the source code, submit feedback, and contribute.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform – the creators of Next.js.

For more details, see the official Next.js deployment documentation.

How I Built It

Tech Stack

Architecture Decisions

• Server Components by default – Pages fetch data on the server, eliminating client‑side waterfalls. Only interactive parts (buttons, comment forms, realtime subscriptions) are marked as Client Components.
• Server Actions for all mutations – No separate API routes are needed. Form submissions for auth, posts, comments, likes, and profile updates use Next.js Server Actions together with revalidatePath for cache invalidation.
• Row‑Level Security (RLS) – Every table has granular policies; users can modify only their own data while public read access keeps the community transparent.
• Database triggers – likes_count and comments_count are kept up‑to‑date automatically via PostgreSQL triggers, preventing N+1 queries.
• Supabase Realtime subscriptions – LikeButton and CommentSection listen to postgres_changes events. A localActionRef avoids double‑counting the current user’s actions while still receiving updates from others.
• Middleware – Refreshes Supabase auth sessions on each request and protects routes such as /profile and /posts/new from unauthenticated access.
• Migration‑based schema – Eight ordered SQL migrations define tables, RLS policies, triggers, indexes, realtime config, and seed data. The schema is fully reproducible with supabase db push.