Charity&Donation Site Template

Overview

A modern, responsive fundraising campaign landing page built with React, TypeScript, and Tailwind CSS. This frontend component showcases a donation campaign with interactive elements, progress tracking, and donor engagement features. It includes a complete page layout with hero section, story progression, impact metrics, donation interface, testimonials, and call-to-action sections.

Features

• Responsive Design: Mobile-first approach with breakpoints for tablet and desktop
• Donation Interface: Preset donation amounts with custom input option, frequency toggle (one-time vs. monthly)
• Progress Tracking: Real-time campaign progress bar with funding goal visualization
• Animated Counters: Count-up animations for raised funds, donor count, and impact metrics
• Scroll Reveal Animations: Elements animate into view as users scroll
• Campaign Metrics: Display of funds raised, goal amount, donor count, and days remaining
• Matching Gift Highlight: Prominent display of 1:1 matching offer from foundation
• Testimonials Section: Donor testimonials with smooth carousel/grid layout
• Story Progression: Multi-step narrative about campaign impact
• Impact Metrics: Visual display of campaign outcomes and beneficiaries
• Error Handling: Built-in error boundary with user-friendly error display and timeout detection
• Loading State: Custom branded loading screen with spinner and status messages
• SEO Meta Tags: Open Graph and Twitter card metadata for social sharing

Tech Stack

• React 19.0.0 — UI framework
• TypeScript 5.6 — Type safety
• Tailwind CSS 4.2.2 — Utility-first styling
• Vite 6.0.0 — Build tool and dev server
• React Router DOM 7.14.1 — Client-side routing
• ESLint 9.39.4 — Code linting
• Tailwind CSS Vite Plugin 4.2.2 — Vite integration

Setup & Usage

Installation

npm install

Development

npm run dev

Starts the Vite dev server at http://localhost:5173 with hot module replacement.

Build

npm run build

Creates an optimized production build in the dist/ directory.

Preview

npm run preview

Serves the production build locally for testing.

Type Checking

npm run typecheck

Runs TypeScript compiler without emitting files to check for type errors.

Linting

npm run lint

Runs ESLint on the src/ directory with zero-warning policy.

npm run lint:fix

Automatically fixes linting issues.

Project Structure

src/
├── App.tsx                 # Main app component
├── main.tsx               # Entry point
├── components/
│   ├── Navbar.tsx         # Navigation header
│   ├── Hero.tsx           # Hero section
│   ├── StoryProgression.tsx # Campaign narrative
│   ├── ImpactMetrics.tsx  # Outcome statistics
│   ├── CampaignDonation.tsx # Donation form & progress
│   ├── Testimonials.tsx   # Donor testimonials
│   ├── FinalCTA.tsx       # Final call-to-action
│   └── Footer.tsx         # Footer
└── hooks/
    ├── useScrollReveal.ts # Scroll animation hook
    └── useCountUp.ts      # Number counter animation hook

Key Components

CampaignDonation

Main donation interface with:

• Preset donation amounts ($25, $60, $120, $500)
• Custom amount input
• Frequency selection (one-time or monthly)
• Live progress bar toward $250,000 goal
• Animated counters for raised amount and donor count
• Matching gift notification

Hooks

• useScrollReveal: Triggers animations when elements enter viewport
• useCountUp: Animates number increments over specified duration

Customization

• Campaign Goal: Edit GOAL constant in CampaignDonation.tsx
• Donation Presets: Modify PRESETS array with custom amounts and labels
• Colors: Tailwind CSS custom properties (CSS variables) control the color scheme
• Typography: Uses serif font for headings via CSS variable --font-serif

Error Handling

The application includes:

• Global error event listener for runtime errors
• Unhandled promise rejection handler
• Timeout detection (60 seconds) for slow-loading apps
• User-friendly error display with actionable messaging
• Parent window communication for preview environments

License

Tetrees License