NeighborHub: Real-Time Community Connection for Local Neighborhoods

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=

Code

sameer-frontend / neighbor-hub

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

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

Open http://localhost:3000 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

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

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

Check out our Next.js deployment documentation for more…

View on GitHub

How I Built It

Tech Stack

Layer	Technology
Framework	Next.js 15 (App Router, React 19, Server Components, Server Actions)
Backend / Database	Supabase (PostgreSQL, Row Level Security, Auth, Realtime)
Authentication	Supabase Auth (email/password with SSR cookie sessions)
Styling	Tailwind CSS 4 with custom design system
Icons	Lucide React
Deployment	Vercel
Database Migrations	Supabase CLI (`supabase db push`)

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.

DEV Community