Back to Projects

Gather

Events Application

A full-stack event management platform that handles everything from event creation to ticketing, payments, and post-event communication. Built with modern web technologies and designed for seamless user experiences.

Next.js 16 React 19 Sanity CMS Stripe Clerk Resend Tailwind CSS 4
Gather Events Application Interface

Project Overview

Gather was born from the need for a simple, elegant event management solution that doesn't sacrifice functionality for aesthetics. The platform handles the complete event lifecycle from creation and promotion to ticketing, payments, and attendee communication.

The architecture supports both free and paid events with a seamless checkout experience. Event organizers can manage capacity, track RSVPs, send newsletter campaigns, and analyze attendance data all from a protected admin dashboard.

Built with a headless CMS approach, Gather separates content management from presentation, allowing for flexible content editing through Sanity Studio while maintaining a fast, statically-generated frontend with Next.js.

Key Features

A comprehensive feature set designed for both event organizers and attendees

Dual Payment Models

Seamlessly handle both free RSVPs and paid ticketing. Free events use a simple form submission while paid events integrate Stripe checkout with automatic webhook processing.

Capacity Management

Real-time tracking of event capacity with guest count validation. Display remaining spots, show "Low Tickets" warnings at 50% capacity, and prevent overbooking with server-side validation.

Newsletter System

Full-featured email marketing with campaign creation, subscriber management, and analytics. Track opens and clicks with tracking pixels and redirect links.

Analytics Dashboard

Admin reporting with event summaries, RSVP breakdowns, and capacity utilization. Separate views for upcoming and past events with confirmed vs. pending guest tracking.

Rich Media Support

Event galleries with drag-and-drop reordering, client-side image compression, and hotspot-based hero image cropping. Sanity CDN delivers optimized images.

Secure Admin Routes

Clerk authentication protects all admin functionality via middleware. Input sanitization and Stripe webhook signature verification ensure data integrity.

System Architecture

How the different components work together to deliver the experience

Payment & RSVP Flow

User
Event Page
RSVP Form
Validates Input
Free Event
/api/rsvp
Paid Event
/api/create-checkout
Sanity
Store RSVP
Stripe
Checkout Session
Resend
Confirmation Email
Webhook
Update Status

Technology Stack

Frontend
Next.js 16
React 19
Tailwind CSS 4
Auth
Clerk
Middleware Protection
CMS
Sanity.io
GROQ Queries
Portable Text
Payments
Stripe
Webhooks
Cron Sync
Email
Resend
Open Tracking
Click Tracking

Technology Deep Dive

The tools and libraries that power Gather

Frontend

Next.js 16 (App Router)

Server components, API routes, and static generation with ISR

React 19

Latest React with concurrent features and improved performance

Tailwind CSS 4

Utility-first styling with custom design tokens

dnd-kit

Drag-and-drop for gallery image reordering

Backend Services

Sanity.io

Headless CMS with real-time collaboration and GROQ queries

Stripe

Payment processing with checkout sessions and webhooks

Clerk

Authentication and user management for admin routes

Resend

Transactional email for confirmations and newsletters

Developer Experience

TypeScript

Type safety throughout with strict mode enabled

React Hook Form

Performant form handling with validation

TipTap

Rich text editor for event descriptions

browser-image-compression

Client-side image optimization before upload

Interested in Learning More?

Feel free to reach out if you'd like to discuss the technical decisions, architecture choices, or implementation details behind Gather.