Component Architecture Overview

The NJ Rajat Mahotsav platform follows a strict Atomic Design methodology for organizing components. This approach creates a clear hierarchy from simple building blocks to complex page layouts.

Design Philosophy

Atomic Design breaks UI components into five distinct levels:

Atoms

Basic building blocks - buttons, inputs, labels, and other primitives

Molecules

Simple component groups combining multiple atoms

Organisms

Complex UI sections combining molecules and atoms

UI Components

shadcn/ui components and custom effects

Directory Structure

All components are organized under /components with clear separation:

components/
├── atoms/           # Basic primitives
├── molecules/       # Composite components
├── organisms/       # Complex sections
├── templates/       # Page layouts (minimal)
└── ui/             # shadcn/ui components

Import Patterns

The project provides index files for cleaner imports:

Recommended
Alternative

// Clean imports using index files
import { LoadingScreen, Typewriter } from '@/components/atoms'
import { GuruCard, ProgressCounter } from '@/components/molecules'
import { Navigation, StickyFooter } from '@/components/organisms'

// Direct imports (still valid)
import LoadingScreen from '@/components/atoms/loading-screen'
import GuruCard from '@/components/molecules/guru-card'
import Navigation from '@/components/organisms/navigation'

Component Categories

Atoms (18 components)

The foundation layer includes:

Form controls: Button, Input, Label, Checkbox, Textarea, Select
Layout: Card, ScrollArea, Popover
Feedback: LoadingScreen, Toast, TagBadge
Effects: Typewriter, ThemeProvider
Navigation: ScrollToTop, FloatingButton, AudioChoiceButton

See the Atoms documentation for details.

Molecules (23 components)

Composite components that combine atoms:

Cards: GuruCard, EventCard, ScheduleCard, TransportCard
Inputs: PhoneInput, DatePicker variants, CountrySelector
UI Elements: CountdownTimer, ProgressCounter, Carousel
Media: IphoneMock, 3DPin
Navigation: Command, Dialog, Toaster

See the Molecules documentation for details.

Organisms (40+ components)

Complex sections and page-level components:

Navigation: Navigation, DesktopNavigation, FloatingMenuButton, TubelightNavigation
Forms: SevaSubmissionForm, EventDetailsModal
Media: VideoSection, ImageMarquee, ImageCarouselModal, AashirwadVideoPlayer
Layout: Header, StickyFooter, StandardPageHeader, ShaderBackground
Content: AnimatedTextSection, BentoInitiatives, PathOfServiceStory
Timeline: MobileTimeline, GuruCarousel

See the Organisms documentation for details.

UI Components

The /ui directory contains:

shadcn/ui components: Accordion, Button, and other Radix UI-based primitives
Custom effects: InfiniteSlider, FloatingParticles, GradientMeshBackground
Registries: Components from @magicui, @aceternity, @skiper-ui

See the UI Components documentation for details.

Technology Stack

Core Libraries

React 19 with Next.js 15 App Router
TypeScript for type safety
Tailwind CSS v4 for styling
Framer Motion for animations
Radix UI for accessible primitives

Form Handling

react-hook-form with zod validation
react-phone-number-input for international phone fields
react-day-picker for date selection
chrono-node for natural language date parsing

Media & Assets

Cloudflare CDN for static assets and images
Supabase for backend data storage
GSAP for advanced animations
locomotive-scroll for scroll effects

Key Features

Type Safety

All components use TypeScript interfaces for props:

components/molecules/guru-card.tsx

interface GuruCardProps {
  imageId: string
  name: string
  className?: string
}

Responsive Design

Components use Tailwind’s responsive utilities:

<div className="w-72 sm:w-80 md:w-[26rem] h-[28rem] sm:h-[32rem] md:h-[34rem]">
  {/* Responsive sizing */}
</div>

Animation Support

Framer Motion provides declarative animations:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6 }}
>
  {/* Animated content */}
</motion.div>

CDN Integration

Cloudflare CDN helpers optimize image delivery:

import { getCloudflareImage } from '@/lib/cdn-assets'

const imageUrl = getCloudflareImage(imageId)

Component Guidelines

When creating new components:

Place them in the appropriate atomic design level
Export from the level’s index.ts file
Use TypeScript interfaces for all props
Follow existing naming conventions
Prefer composition over prop drilling

Next Steps

Explore each component category in detail:

Atoms - Basic building blocks
Molecules - Composite components
Organisms - Complex sections
UI Components - shadcn/ui and effects

Component Library

Custom Hooks

Component Architecture Overview

Component Architecture Overview

Design Philosophy

Atoms

Molecules

Organisms

UI Components

Directory Structure

Import Patterns

Component Categories

Atoms (18 components)

Molecules (23 components)

Organisms (40+ components)

UI Components

Technology Stack

Key Features

Type Safety

Responsive Design

Animation Support

CDN Integration

Component Guidelines

Next Steps

Build docs developers (and LLMs) love

Component Library

Custom Hooks

​Component Architecture Overview

​Design Philosophy

Atoms

Molecules

Organisms

UI Components

​Directory Structure

​Import Patterns

​Component Categories

​Atoms (18 components)

​Molecules (23 components)

​Organisms (40+ components)

​UI Components

​Technology Stack

​Key Features

​Type Safety

​Responsive Design

​Animation Support

​CDN Integration

​Component Guidelines

​Next Steps

Build docs developers (and LLMs) love

Component Architecture Overview

Design Philosophy

Directory Structure

Import Patterns

Component Categories

Atoms (18 components)

Molecules (23 components)

Organisms (40+ components)

UI Components

Technology Stack

Key Features

Type Safety

Responsive Design

Animation Support

CDN Integration

Component Guidelines

Next Steps