Gatherly

Community discovery platform with server-rendered listings and multi-provider auth.

Overview

Built on Next.js 14 App Router with a deliberate Server/Client Component boundary: community and event listing pages render server-side for fast initial load, while auth-gated interactions (join buttons, create form, manage table) are isolated to Client Components to avoid shipping unnecessary JS for static content. NextAuth.js handles credential and Google OAuth flows, session persistence, and CSRF protection. The mobile-first layout was designed around 360px as the baseline viewport — the majority of the Bangladesh audience accesses the web on mid-range Android devices.

Key Features

• • NextAuth.js with credentials provider and Google OAuth — session persisted via JWT strategy
• • Server Component rendering for community and event listing pages — fast TTFB without client JS overhead
• • Full-text search across community names, tags, and descriptions
• • Mobile-first responsive layout — 360px viewport as design baseline
• • Protected community creation form and manage-communities table behind NextAuth session guard
• • Middleware-level route protection for /add-club and /manage-clubs routes

Tech Stack

Challenges

• • NextAuth.js session not available in Server Components without explicit server-side session fetching
• • localStorage used for some state — unavailable during SSR, causing hydration mismatches on initial render

Solutions

• • Used getServerSession from next-auth/next in auth-gated Server Components; Client Components use the useSession hook — both patterns are consistent across the codebase
• • Wrapped all localStorage reads in a useEffect with an isMounted guard; longer term this would move to cookie-based or database-backed storage

Future Improvements

• • Replace localStorage with a Prisma + PostgreSQL backend for persistent community data
• • Real-time RSVP counts with Socket.IO for live event attendance tracking
• • Push notifications for upcoming gatherings in joined communities