SikhAid Project Overview

SikhAid Project Overview

Project Identity

Name: SikhAid Charitable Trust - Landing Page Application Type: Non-profit charity website with donation, volunteering, and campaign management Repository: /​Users/​ayushj/​Desktop/​SikhAidSinglePage

Tech Stack

Frontend Framework

• Svelte 5.0.0 - Reactive component framework
• SvelteKit 2.22.0 - Meta-framework with file-based routing and SSR
• TypeScript 5.0.0 - Type-safe JavaScript

Styling & UI

• Tailwind CSS 3.4.17 - Utility-first CSS framework
• PostCSS 8.5.6 + Autoprefixer 10.4.21 - CSS processing
• Iconify Svelte 5.0.2 - Icon system
• Custom CSS animations - fade-in, slide-up, bounce-in with delays

Backend & Database

• Firebase 12.4.0 - Backend as a Service
  • Firestore - Cloud NoSQL database
  • Firebase Auth - Authentication system
  • Cloud Storage - File storage

Payment Integration

• Razorpay - Indian payment gateway for donations
  • Loaded via CDN in layout
  • Configured with environment variables

Build Tools

• Vite 7.0.4 - Fast build tool and dev server
• SvelteKit Adapter Auto - Automatic deployment adapter

Project Structure

SikhAidSinglePage/
├── .claude/
│   └── skills/              # Claude Code skills (this folder)
│
├── src/
│   ├── lib/
│   │   ├── components/      # Reusable UI components
│   │   │   ├── home/        # Home page specific components
│   │   │   ├── admin/       # Admin-specific components
│   │   │   ├── Header.svelte
│   │   │   ├── Footer.svelte
│   │   │   ├── PaymentForm.svelte
│   │   │   └── ...
│   │   ├── stores/          # Svelte stores for state management
│   │   │   ├── donation.ts
│   │   │   ├── contact.ts
│   │   │   ├── volunteering.ts
│   │   │   └── csr.ts
│   │   ├── data/            # Static data (campaigns, blogs)
│   │   ├── types/           # TypeScript type definitions
│   │   ├── assets/          # Images and static assets
│   │   ├── firebase.ts      # Firebase initialization
│   │   ├── firestore.ts     # Firestore database functions
│   │   └── razorpay.ts      # Payment integration
│   │
│   ├── routes/              # SvelteKit file-based routing
│   │   ├── +layout.svelte   # Root layout (Header/​Footer wrapper)
│   │   ├── +page.svelte     # Home page
│   │   ├── about/
│   │   ├── campaigns/
│   │   ├── blog/
│   │   ├── contact/
│   │   ├── donate/
│   │   ├── volunteering/
│   │   ├── csr/
│   │   ├── payment/
│   │   └── admin/           # Protected admin routes
│   │
│   ├── app.css              # Global styles & design tokens
│   ├── app.html             # HTML entry point
│   └── app.d.ts             # App type definitions
│
├── static/                  # Static assets (favicon, robots.txt)
├── package.json             # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite build configuration
├── svelte.config.js         # SvelteKit configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── postcss.config.js        # PostCSS configuration
└── .env                     # Environment variables (not committed)

Key Configuration Files

package.json

Scripts:

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Type check Svelte components

Environment Variables (.env)

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

VITE_RAZORPAY_KEY_ID=...
VITE_ORGANIZATION_NAME=Sikh Aid Charitable Trust
VITE_SITE_URL=www.sikhaid.ngo
VITE_ENVIRONMENT=production

tsconfig.json

• Strict mode enabled
• Module resolution: bundler
• Extends SvelteKit's generated config

vite.config.ts

• Uses @sveltejs/​kit/​vite plugin
• Default Vite configuration

Architecture Patterns

Component Architecture

1. Layout Components - Root layout with Header/​Footer
2. Page Components - Route-specific pages in /​routes
3. Feature Components - Reusable sections (Hero, CampaignCarousel)
4. UI Components - Small reusable elements (PaymentForm, Modal)

Data Flow Pattern

User Input → Svelte Store → Component Reactivity → UI Update
                ↓
        Firestore Write → Async Feedback

Routing Pattern

• File-based routing: /​routeshttps://donate.sikhaid.ngo//+page.svelte → https://donate.sikhaid.ngo/
• Dynamic routes: /​routes/​campaigns/[slug]/​+page.svelte → /​campaigns/:slug
• Nested layouts: +layout.svelte files for shared wrappers

State Management Pattern

• Svelte writable stores for form data
• Store functions for actions (e.g., setDonationAmount())
• Direct Firestore integration from components

Development Workflow

Setup

npm install              # Install dependencies
npm run dev             # Start dev server (http://localhost:5173)

Type Checking

npm run check           # Check types across all files
npm run check:watch     # Watch mode for type checking

Build & Deploy

npm run build           # Build for production (outputs to .svelte-kit/​output)
npm run preview         # Preview production build locally

Git Information

• Current branch: main
• Recent commits:
  • 545b459: admin route added. form submissions connected to firestore
  • 7c79783: firestore setup done and tested
  • 5424583: added volunteering and csr routes

Design Philosophy

• Mobile-first responsive design with Tailwind breakpoints
• Component reusability - DRY principle throughout
• Type safety - TypeScript interfaces for all data structures
• Progressive enhancement - Works without JavaScript for core content
• Accessibility - Semantic HTML, ARIA labels, keyboard navigation

Security Notes

⚠️ Known Issues:

• Admin password hardcoded in Footer.svelte (should use env var)
• Client-side session authentication (consider backend auth)
• Firebase config visible in browser (requires Firestore security rules)

When to Use This Skill

• Setting up the project for the first time
• Understanding the overall architecture
• Locating where specific functionality lives
• Adding new major features or routes
• Configuring build tools or environment variables
• Onboarding new developers or AI assistants

Related Skills

• sikhaid-components - Component patterns and organization
• sikhaid-routing - Routes and navigation
• sikhaid-data - Firebase, Firestore, and state management