majiayu000 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 servernpm run build- Build for productionnpm run preview- Preview production buildnpm 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/viteplugin - Default Vite configuration
Architecture Patterns
Component Architecture
- Layout Components - Root layout with Header/Footer
- Page Components - Route-specific pages in
/routes - Feature Components - Reusable sections (Hero, CampaignCarousel)
- 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.sveltefiles 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 organizationsikhaid-routing- Routes and navigationsikhaid-data- Firebase, Firestore, and state management