Skip to main content

​
NJ Rajat Mahotsav Event Platform

The Shree Swaminarayan Temple in Secaucus needed a platform for their 25th Anniversary celebration to handle event registration, admin workflows, display media content, share event schedules, and keep the community up to date on the latest information. Not just a brochure site, but a productionized product.

​
Overview

This project showcases a modern, full-featured event website built with Next.js 15, React, TypeScript, and various modern web technologies. The platform serves as the digital hub for the Shree Ghanshyam Maharaj Rajat Pratishtha Mahotsav (July 27 - August 2, 2026).

Get Started

Set up your local development environment in minutes

Installation Guide

Detailed environment setup and configuration

​
Key Features

Event Registration

Multi-step registration form with Zod validation and Supabase backend storage

Admin Dashboard

Protected admin portal with Google OAuth authentication for registration management

Interactive Schedule

Dynamic timeline view with mobile and desktop variants showcasing 50+ years of history

Media Galleries

Image carousels and video players with custom controls powered by Cloudflare CDN

Seva Submission

Forms for spiritual and community service contributions

Background Audio System

Auto-playing prayer audio with fade controls and user consent management

Responsive Design

Fully responsive with mobile-first approach using Tailwind CSS 4

Smooth Animations

Scroll animations using Framer Motion, GSAP, and Locomotive Scroll

​
Tech Stack

​
Core Technologies

{
  "dependencies": {
    "next": "^15.5.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5"
  }
}
  • Next.js 15 - React framework with App Router
  • React 18 - UI library with server components
  • TypeScript 5 - Type safety and developer experience
  • Tailwind CSS 4 - Utility-first styling framework

​
Backend & Storage

  • Supabase - Backend as a service
    • PostgreSQL database for event registrations
    • Google OAuth authentication
    • Row Level Security (RLS) for data protection
  • Cloudflare R2 - S3-compatible object storage for static assets
  • Cloudflare Images - Image optimization and delivery with responsive variants
  • AWS SDK - S3-compatible operations for R2 integration

​
UI Components

  • shadcn/ui - Accessible component library built on Radix UI
  • Radix UI - Unstyled, accessible component primitives
  • Framer Motion - Production-ready animation library
  • GSAP - Professional-grade animation toolkit
  • Locomotive Scroll - Smooth scrolling experiences

​
Forms & Validation

  • React Hook Form - Performant form state management
  • Zod - TypeScript-first schema validation
  • react-phone-number-input - International phone input with validation
  • react-day-picker - Flexible date selection
  • chrono-node - Natural language date parsing

​
Project Structure

The project follows atomic design principles for component organization: 
.
├── app/                          # Next.js 15 App Router
│   ├── admin/                    # Admin portal (OAuth protected)
│   │   └── registrations/        # Registration management dashboard
│   ├── api/                      # API routes
│   │   ├── download/             # File download endpoints
│   │   └── registrations/        # Registration data endpoints
│   ├── auth/                     # Authentication callback handlers
│   ├── registration/             # Event registration page
│   ├── schedule/                 # Event schedule timeline
│   ├── community-seva/           # Community service submissions
│   ├── spiritual-seva/           # Spiritual service submissions
│   └── guest-services/           # Guest services information
├── components/                   # React components (Atomic Design)
│   ├── atoms/                    # Basic building blocks
│   │   ├── loading-screen.tsx
│   │   ├── theme-provider.tsx
│   │   └── scroll-to-top.tsx
│   ├── molecules/                # Simple composites
│   │   ├── guru-card.tsx
│   │   ├── date-picker.tsx
│   │   └── phone-input.tsx
│   ├── organisms/                # Complex sections
│   │   ├── navigation.tsx
│   │   ├── event-carousel.tsx
│   │   └── registration-form.tsx
│   ├── templates/                # Page layouts
│   └── ui/                       # shadcn/ui components
├── contexts/                     # React context providers
│   └── audio-context.tsx         # Background audio state
├── hooks/                        # Custom React hooks
│   ├── use-audio.ts              # Audio playback controls
│   ├── use-device-type.ts        # Device detection
│   └── use-loading.tsx           # Global loading state
├── lib/                          # Utility functions and data
│   ├── cdn-assets.ts             # CDN helper functions
│   └── timeline-data.ts          # Event schedule data
├── utils/                        # Helper utilities
│   └── supabase/                 # Supabase client setup
│       ├── client.ts             # Browser client
│       ├── server.ts             # Server-side client
│       └── middleware.ts         # Session refresh middleware
├── styles/                       # Theme CSS files
│   ├── registration-theme.css
│   ├── admin-theme.css
│   └── community-theme.css
└── middleware.ts                 # Next.js middleware for auth

​
Architecture Highlights

​
Global State Management

1

LoadingProvider

Manages global loading states across the application
2

AudioProvider

Controls background prayer audio playback with fade effects
3

ThemeProvider

Forced to light mode for consistent branding

​
CDN Asset Management

The platform leverages Cloudflare’s global network for optimal asset delivery: 
const CDN_BASE_URL = 'https://cdn.njrajatmahotsav.com'
const CLOUDFLARE_IMAGES_BASE = 'https://imagedelivery.net/vdFY6FzpM3Q9zi31qlYmGA/'

// Standard responsive image
export const getCloudflareImage = (imageId: string) => 
  `${CLOUDFLARE_IMAGES_BASE}${imageId}/bigger?format=auto&quality=90`

// Mobile optimized
export const getCloudflareImageMobileWp = (imageId: string) => 
  `${CLOUDFLARE_IMAGES_BASE}${imageId}/mobileWP?format=auto&quality=90`

// High quality variant
export const getCloudflareImageBiggest = (imageId: string) => 
  `${CLOUDFLARE_IMAGES_BASE}${imageId}/biggest?format=auto&quality=100`

​
Security Features

The platform implements comprehensive security measures:

Google OAuth

Domain-restricted admin access via Supabase Auth

Row Level Security

Database-level access control for registration data

Domain Validation

Admin routes verify user email domains before granting access

Security Headers

X-Frame-Options, X-Content-Type-Options, CSP, and more
Before deploying to production:
  • Configure Supabase RLS policies for your domain
  • Update allowed admin email domains in lib/admin-auth.ts
  • Implement rate limiting to prevent abuse
  • Enable CSRF protection for forms
  • Add server-side input validation

​
Component Organization

The project follows Atomic Design principles for maintainability and scalability:
  • Atoms (components/atoms/) - Basic UI elements like loading screens and theme providers
  • Molecules (components/molecules/) - Simple combinations like cards, inputs, and pickers
  • Organisms (components/organisms/) - Complex sections like navigation, forms, and galleries
  • Templates (components/templates/) - Page-level layouts
  • UI (components/ui/) - shadcn/ui components (maintained separately for easy updates)
Always import from index files when available for cleaner, more maintainable imports.

​
Next Steps

Quickstart

Get your development environment running

Installation

Complete setup with all environment variables

Architecture

Deep dive into the application architecture

API Reference

Explore API endpoints and data schemas

Build docs developers (and LLMs) love

Get started for freeTalk to us