YardımKöprüsü - Ultra-Modern Turkish Charity Platform

Türkiye'nin yeni nesil bağış platformu
Premium fintech-inspired design meets charity with glassmorphism, 3D effects, and seamless UX

---

✨ Features

🎨 Ultra-Modern Design System

• Glassmorphism UI - Frosted glass cards with backdrop blur effects
• Animated Gradients - Dynamic mesh backgrounds and floating orbs
• Circular Progress Rings - SVG-based animated progress indicators
• 3D Parallax Effects - GPU-accelerated scroll animations
• Micro-interactions - Hover states, scale transforms, and glow effects

🚀 Core Functionality

• Campaign Discovery - Browse and filter charity campaigns by category
• Real-time Stats - Animated counters showing platform impact
• NGO Verification - Verified badge system for trusted organizations
• Campaign Details - Immersive parallax hero sections with sticky donation sidebars
• Responsive Design - Mobile-first with tablet and desktop optimizations

⚡ Performance & Accessibility

• 148KB First Load - Optimized bundle size with code splitting
• 60 FPS Animations - GPU-accelerated transforms with translate3d
• Reduced Motion Support - Respects prefers-reduced-motion for accessibility
• Intersection Observers - Lazy animation triggers on scroll
• Type-safe - Full TypeScript coverage with strict mode

---

🛠️ Tech Stack

Category	Technologies
Framework	Next.js 13.5 (App Router)
Language	TypeScript 5.2
Styling	Tailwind CSS 3.3, Custom CSS animations
UI Components	Radix UI primitives, shadcn/ui
Database	Supabase (PostgreSQL + Row Level Security)
Icons	Lucide React
Animations	Native CSS animations + Web Animations API

---

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Supabase account and project

Installation

1. Clone the repository

   git clone https://github.com/yourusername/yardimkoprusu.git
   cd yardimkoprusu

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Set up the database

   Run the migration file in your Supabase SQL editor:

   supabase/migrations/20250930191947_create_charity_platform_schema.sql

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:3000

---

📁 Project Structure

yardimkoprusu/
├── app/                          # Next.js App Router pages
│   ├── page.tsx                  # Homepage with hero & featured campaigns
│   ├── kampanyalar/              # All campaigns listing
│   ├── kampanya/[slug]/          # Individual campaign detail page
│   └── kuruluslar/               # Organizations listing
├── components/
│   ├── ui/                       # shadcn/ui components (Button, Badge, etc.)
│   ├── animated-counter.tsx      # Intersection-triggered number animation
│   ├── circular-progress.tsx     # SVG circular progress ring
│   ├── glass-card.tsx            # Reusable glassmorphism card
│   ├── campaign-card.tsx         # Campaign preview card component
│   ├── navbar.tsx                # Premium navigation bar
│   └── footer.tsx                # Footer with social links
├── hooks/
│   ├── use-intersection-animation.ts  # Reusable intersection observer hook
│   └── use-toast.ts              # Toast notification hook
├── lib/
│   ├── supabase.ts               # Supabase client configuration
│   ├── types.ts                  # TypeScript type definitions
│   ├── constants.ts              # Platform statistics & category labels
│   ├── format.ts                 # Currency & date formatting utilities
│   ├── animation-constants.ts    # Animation timing constants
│   └── utils.ts                  # Helper functions (cn, etc.)
├── supabase/
│   └── migrations/               # Database schema migrations
├── tailwind.config.ts            # Tailwind + custom animations config
└── app/globals.css               # Global styles & glassmorphism classes

---

🗄️ Database Schema

Tables

ngos - Non-governmental organizations

• Verified badge system
• Category classification
• Follower counts

campaigns - Charity campaigns

• Goal tracking (current_amount / goal_amount)
• Featured flag for homepage
• Rich media support (images, videos, galleries)
• Status management (active, completed, paused)

donations - Donation records

• Anonymous support
• Payment status tracking
• Optional donor messages

campaign_comments - Supporter testimonials

• Linked to donations
• Public appreciation system

Security

All tables use Row Level Security (RLS) policies to ensure:

• Authenticated users can only access permitted data
• Public read access for campaigns and NGOs
• Write restrictions on donations and comments

---

🎨 Design System

Color Palette

/* Primary Colors */
Midnight:  #0F172A (Deep blue-black backgrounds)
Crimson:   #DC2626 (CTA buttons, urgent actions)
Teal:      #14B8A6 (Progress, success states)
Emerald:   #10B981 (Completed goals)

/* Glassmorphism */
backdrop-blur-xl + bg-white/10 + border-white/20

Typography

• Headings: Inter, 700-900 weight, 48-80px for heroes
• Body: Inter, 16-18px, 1.6 line-height
• Numbers/Stats: System monospace for impact

Animations

Animation	Duration	Easing	Use Case
fade-in-up	600ms	ease-out	Content reveals
pulse-glow	2s	ease-in-out infinite	CTA emphasis
gradient-shift	3s	ease infinite	Background meshes
float	6s	ease-in-out infinite	Floating orbs

---

🧪 Testing

Unit Tests (Proposed)

npm run test

Key test coverage:

• AnimatedCounter: Turkish currency formatting, invalid input handling
• CircularProgress: Percentage calculation accuracy
• useIntersectionAnimation: Observer cleanup on unmount

Build Verification

npm run build

Expected output:

• Homepage: ~6.8 KB (148 KB First Load)
• Campaign detail: ~17 KB (155 KB First Load)
• All campaigns: ~26 KB (171 KB First Load)

---

🌐 Environment Variables

Variable	Description	Required
NEXT_PUBLIC_SUPABASE_URL	Your Supabase project URL	✅
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase anonymous public key	✅

---

📱 Browser Support

Browser	Version
Chrome	90+
Firefox	88+
Safari	14.1+
Edge	90+

Note: Glassmorphism effects (backdrop-filter) require modern browsers (2020+).

---

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Style

• Use TypeScript strict mode
• Follow ESLint rules (npm run lint)
• Use Prettier for formatting
• Write semantic commit messages
• Add JSDoc comments for public APIs

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Design Inspiration: Stripe, Revolut, modern fintech UIs
• Icons: Lucide React
• UI Components: shadcn/ui
• Database: Supabase
• Stock Photos: Pexels

---

📞 Contact & Support

• Issues: GitHub Issues
• Email: destek@yardimkoprusu.org
• Website: yardimkoprusu.org

---

Built with ❤️ for the Turkish charity community
_{Making digital charity experiences premium and accessible}