Skip to content

cwaits6/small-group-hub

Repository files navigation

Small Group Hub

Next.js TypeScript Tailwind CSS Supabase License Deploy with Vercel Open Source

A purpose-built web app for church small groups — replacing Facebook groups with a warm, simple community platform.

Small Group Hub was originally built for the Incouragers Sunday small group class at First Redeemer Church — a group of ~150 members who needed a better home than Facebook. Designed for all ages and comfortable on any device, it gives your group a dedicated space for events, announcements, lectures, and community — without the noise of social media.

It's open source and fully configurable, so any small group or church class can fork it, swap in their name and colors, and have it running in under an hour.


Origin Story

The Incouragers class at First Redeemer Church needed a simple, welcoming space to replace their Facebook group. Members ranged widely in age and tech comfort — so everything had to be large, readable, and dead-simple to use. No cluttered feeds. No distracting algorithms. Just the group, their events, and their faith.

Small Group Hub was built to solve exactly that. It has since been open-sourced so other groups can benefit from the same foundation.


Why Small Group Hub?

  • Simplicity — Easy to navigate for all ages, no distracting social media noise
  • Warmth — Large fonts, readable text, and an inviting design that welcomes everyone
  • Affordability — Runs for ~$10–15/year (domain name only — everything else is free)
  • Privacy — Your community's data stays yours, not a tech company's
  • Customizable — Fork it and brand it as your own with a single config file change

Features

For Members

  • Public Home Page — Welcoming hero, upcoming events, latest announcement, and a donation button
  • Events Calendar — Browse upcoming gatherings and RSVP (Going / Maybe / Can't Go)
  • Lecture Library — Watch past teachings with embedded YouTube videos
  • Magic Link Sign-In — No passwords to remember; sign in with just your email
  • Member Dashboard — See what's coming up and manage your RSVPs in one place
  • Announcements Feed — Members-only updates and community news

For Admins

  • Join Request Workflow — Review and approve new members before they get access
  • Member Management — Assign roles (member / admin) and manage the roster
  • Event Administration — Create, edit, and manage events with public or members-only visibility
  • Announcement Posting — Share updates with the whole community instantly
  • Lecture Management — Add YouTube video links to build a searchable lesson library
  • Site Settings — Update donation URL, directory link, and other settings — no code changes needed
  • Email Notifications — Automatic welcome emails on approval and event reminders via scheduled edge functions

Accessibility First

  • Large, readable fonts (18px base) designed for all ages
  • Mobile-first layout — works great on phones, tablets, and desktops
  • High contrast, clear hierarchy, and minimal navigation (3–4 items max)
  • Warm, welcoming color palette — not cold or corporate

Tech Stack

Layer Choice
Framework Next.js 16 (App Router) + TypeScript
Styling Tailwind CSS v4 + shadcn/ui v4
Auth + Database Supabase (PostgreSQL, RLS, Edge Functions)
Hosting Vercel (free tier)
Email Resend (free tier: 3,000 emails/month)
Scheduling Supabase pg_cron (event reminders)

Getting Started

Prerequisites

Installation

  1. Clone the repository

    git clone https://github.com/codyhinz/incouragers.git
    cd incouragers
    npm install
  2. Set up Supabase

    • Create a new project at supabase.com/dashboard
    • Open the SQL Editor and run the migrations in order:
      1. supabase/migrations/001_schema.sql
      2. supabase/migrations/002_rls.sql
    • Find your keys at Settings → API
  3. Configure authentication redirect URLs

    • In Supabase: Authentication → URL Configuration
    • Set Site URL to http://localhost:3000
    • Add to Redirect URLs:
      • http://localhost:3000/api/auth/callback
      • https://yourdomain.com/api/auth/callback (add when deploying)
  4. Set up Google Maps API (for event location autocomplete)

    • Go to Google Cloud Console
    • Create a new project or select an existing one
    • Enable the Places API
    • Create an API key at Credentials → Create Credentials → API Key
    • (Optional) Restrict it to your domain(s) under Application restrictions
  5. Set up environment variables

    cp .env.example .env.local

    Fill in .env.local:

    NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
    NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_...
    SUPABASE_SECRET_KEY=sb_secret_...
    RESEND_API_KEY=re_...
    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your-api-key-from-google-cloud
    NEXT_PUBLIC_SITE_URL=http://localhost:3000
  6. Start the dev server

    npm run dev

    Open http://localhost:3000.

Bootstrap Your First Admin

Since there are no admins yet, you need to manually promote the first one:

  1. Go to Supabase → Authentication → Users → Invite user and invite your email
  2. Click the magic link in the email to sign in
  3. In Table Editor → profiles, find your row and change role to admin
  4. Refresh — you'll now have access to the Admin Panel at /admin

Customizing for Your Group

All group-specific branding lives in one file — lib/config.ts:

export const siteConfig = {
  name: "Your Group Name",
  description: "A welcoming community of faith, growing together in God's Word.",
  tagline: "Encouraging one another daily",
  url: process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000",
  email: {
    from: "Your Group <noreply@yourgroup.org>",
  },
} as const;

Change name and you're done. Colors can be adjusted in app/globals.css. Everything else — events, announcements, donation links — is managed through the admin panel at runtime.


Deploying to Production

Deploy with Vercel

  1. Push your code to GitHub
  2. Connect the repo at vercel.com/new
  3. Add all 5 environment variables (same as .env.local, with your production domain for NEXT_PUBLIC_SITE_URL)
  4. Click Deploy

Then update your Supabase redirect URLs to include your production domain.

Cost Breakdown

Service Cost
Domain name ~$10–15/yr
Vercel Hobby Free
Supabase Free Free
Resend Free Free
Total ~$1/month

Project Structure

├── app/
│   ├── page.tsx                  # Public home page
│   ├── events/                   # Events calendar
│   ├── lectures/                 # Lecture library
│   ├── join/                     # Join request form
│   ├── login/                    # Magic link sign-in
│   ├── dashboard/                # Member dashboard
│   ├── announcements/            # Announcements feed
│   └── admin/                    # Admin panel
├── components/
│   ├── layout/                   # Header, Footer
│   ├── events/                   # EventCard, RsvpButton
│   └── announcements/            # AnnouncementCard
├── lib/
│   ├── config.ts                 # ← Customize your group here
│   ├── types.ts
│   └── supabase/                 # Auth clients
├── supabase/
│   ├── migrations/               # Run these in Supabase SQL Editor
│   └── functions/                # Edge Function for email reminders
└── .env.example

Contributing

Found a bug or have a feature idea? Contributions are welcome!

  1. Fork the repo
  2. Create a branch: git checkout -b feature/your-feature
  3. Commit your changes and open a Pull Request

For significant changes, please open an issue first to discuss.


License

MIT — free to use, fork, and adapt for your own group. See LICENSE.


Originally built with love for the Incouragers class at First Redeemer Church. May it serve many communities well.

About

Replace your church small group's Facebook group with a purpose-built, mobile-first web app. Self-hostable, ~$1/month to run. Features events, RSVPs, announcements, video lectures, and an admin panel.

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors