sikhaid-overview
Use when needing project architecture, tech stack info, folder structure, or setup instructions for SikhAid Charitable Trust website. Covers SvelteKit configuration, build tools, environment variables, and overall project organization.
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- Updated: 2025-11-22
Download the latest version (v1.0.0) from this page.
SKILL.md
---
name: sikhaid-overview
description: Use when needing project architecture, tech stack info, folder structure, or setup instructions for SikhAid Charitable Trust website. Covers SvelteKit configuration, build tools, environment variables, and overall project organization.
allowed-tools: Read, Glob, Grep
---
# 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: `/routes/donate/+page.svelte` → `/donate`
- 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
```bash
npm install # Install dependencies
npm run dev # Start dev server (http://localhost:5173)
```
### Type Checking
```bash
npm run check # Check types across all files
npm run check:watch # Watch mode for type checking
```
### Build & Deploy
```bash
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