Skip to main content

​
Project Overview

NJ Rajat Mahotsav is a Next.js 15 application built for the Shree Swaminarayan Temple Secaucus Silver Jubilee celebration event (July 29 - August 2, 2026). The platform features event registration, scheduling, media galleries, and seva (service) submissions.

​
Tech Stack

Frontend Framework

  • Next.js 15 with App Router
  • React 18 with Server Components
  • TypeScript for type safety

Styling

  • Tailwind CSS v4 with custom configuration
  • Framer Motion for animations
  • GSAP and Locomotive Scroll for scroll effects

Backend & Storage

  • Supabase for data storage and authentication
  • Cloudflare R2 for static assets
  • Cloudflare Images for optimized image delivery

UI Components

  • shadcn/ui (New York style, RSC-enabled)
  • Radix UI primitives for accessibility
  • Custom component registries (@magicui, @aceternity, @skiper-ui)

​
App Structure

The application follows Next.js 15 App Router conventions: 
app/
├── page.tsx              # Main landing page
├── layout.tsx            # Root layout with providers
├── globals.css           # Global styles and CSS variables
├── registration/         # Event registration flow
├── schedule/             # Event schedule viewer
├── community-seva/       # Community service submissions
├── guest-services/       # Guest services information
├── spiritual-seva/       # Spiritual service information
└── api/download/         # File download API endpoint

​
Component Organization

Components follow Atomic Design principles for scalability and maintainability:
1

Atoms

Basic UI primitives that cannot be broken down further:
  • loading-screen, theme-provider, typewriter, scroll-to-top
  • Located in /components/atoms/
2

Molecules

Simple composites of atoms working together:
  • guru-card, date-picker, phone-input, countdown-timer
  • Located in /components/molecules/
3

Organisms

Complex sections combining molecules and atoms:
  • navigation, carousel, forms, galleries, timeline
  • Located in /components/organisms/
4

Templates

Page-level layouts and structures:
  • Currently minimal, focused on component composition
  • Located in /components/templates/
5

UI Components

shadcn/ui components kept separate for easy updates:
  • Located in /components/ui/

​
Root Layout Structure

The root layout (app/layout.tsx) implements a nested provider pattern:
app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${figtree.variable} ${instrumentSerif.variable} ${notoGujarati.variable}`}>
        <LoadingProvider>
          <AudioProvider>
            <ThemeProvider attribute="class" defaultTheme="light" forcedTheme="light">
              <Navigation />
              <div className="min-h-screen flex flex-col">
                <main className="flex-1">
                  {children}
                </main>
                <StickyFooter />
              </div>
              <ScrollToTop />
              <FloatingMenuButton />
              <AudioPlayer />
            </ThemeProvider>
          </AudioProvider>
        </LoadingProvider>
      </body>
    </html>
  )
}
All pages automatically include persistent components: Navigation, StickyFooter, ScrollToTop, FloatingMenuButton, and AudioPlayer.

​
Path Aliases

TypeScript path aliases are configured for clean imports:
tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/components/*": ["./components/*"],
      "@/lib/*": ["./lib/*"],
      "@/hooks/*": ["./hooks/*"],
      "@/contexts/*": ["./contexts/*"],
      "@/utils/*": ["./utils/*"]
    }
  }
}
Usage example: 
import { Navigation } from "@/components/organisms/navigation"
import { useAudioContext } from "@/contexts/audio-context"
import { getCloudflareImage } from "@/lib/cdn-assets"

​
CDN Asset Management

All static assets are served through Cloudflare for optimal performance:
Cloudflare R2 serves static files from https://cdn.njrajatmahotsav.com:
lib/cdn-assets.ts
export const CDN_ASSETS = {
  mainLogoNoText: 'https://cdn.njrajatmahotsav.com/main_logo_no_text.png',
  maningarLogo: 'https://cdn.njrajatmahotsav.com/maninagar_logo.png',
  // ... more assets
}

​
Build Configuration

Key build flags in next.config.mjs for optimized development:
next.config.mjs
{
  eslint: {
    ignoreDuringBuilds: true  // Fast builds during development
  },
  typescript: {
    ignoreBuildErrors: true   // Flexible type checking
  },
  images: {
    unoptimized: true         // External CDN handles optimization
  },
  experimental: {
    optimizePackageImports: ['framer-motion']  // Reduce bundle size
  }
}

​
Key Features

Background Audio System

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

Responsive Navigation

Desktop tubelight navbar with mobile floating menu button

Media Galleries

Image carousels and video players with custom controls

Event Registration

Multi-step forms with Supabase backend integration

Interactive Timeline

Event schedule with mobile and desktop variants

Scroll Animations

Intersection observer-based reveals and GSAP animations

​
Development Commands

# Start development server
npm run dev

# Production build
npm run build

# Start production server
npm start

# Run linting
npm run lint
This project was originally built with v0.app and synced to the repository.

​
Next Steps

Component Structure

Explore the atomic design pattern implementation

State Management

Learn about Context API and custom hooks

Styling System

Understand the Tailwind configuration and CSS variables

Getting Started

Set up your development environment

Build docs developers (and LLMs) love

Get started for freeTalk to us