🫀 Organ & Body Donation | Interactive Information Portal

A modern, interactive medical information platform about organ and body donation built with React, Next.js, TailwindCSS, and ShadCN UI components.

📋 Table of Contents

• 🌟 Project Overview
• ✨ Key Features
• 📚 Content Structure
• 🔧 Technologies
• 🚀 Getting Started
• 🎨 Design System
• 🧩 Project Structure
• 🌐 Deployment
• 📄 License

🌟 Project Overview

This website provides comprehensive information on organ and body donation in an interactive, user-friendly format. The platform is designed to present complex medical and ethical topics in an accessible way, enabling users to make informed decisions.

Users can switch between two main topics, each marked by different color schemes:

• Organ Donation (blue color scheme) - Information about donating organs after death or as a living donor
• Body Donation (red color scheme) - Information about donating your entire body for medical education and research

The website is fully responsive and offers both light and dark modes for optimal readability under different conditions.

✨ Key Features

• Interactive Scroll Storytelling: Smooth scrolling between sections with animated transitions powered by Framer Motion
• Theme Switching: Easy toggle between organ donation and body donation topics
• Dark Mode: Full support for light and dark themes with automatic system preference detection
• 3D Organ Visualization: Interactive 3D models of organs using Three.js and React Three Fiber
• Responsive Design: Fully responsive layout that works on all devices from mobile to desktop
• Accessibility: WCAG compliant with keyboard navigation and screen reader support
• Statistics Visualizer: Real-time visualization of organ donation statistics
• Interactive Map: Map showing body donation institutions across Germany
• FAQ Section: Frequently asked questions about both topics
• Call to Action: Information on decision-making and links to official resources
• Performance Optimized: Vercel Speed Insights and Analytics integration for optimal performance monitoring

📚 Content Structure

The portal is organized into several key sections for each donation type:

Organ Donation

• Introduction and importance
• Process and requirements
• Legal framework in Germany
• Ethical considerations
• Scientific background

Body Donation

• What is body donation
• Process and requirements
• Scientific use and importance
• Ethical considerations

🔧 Technologies

This project leverages modern web technologies to deliver a seamless user experience:

• Frontend Framework: Next.js 15 with React 19
• Language: TypeScript
• Styling: TailwindCSS for utility-first CSS
• UI Components: shadcn/ui for accessible, customizable components
• Animations: Framer Motion for smooth animations and transitions
• 3D Rendering: Three.js and React Three Fiber for 3D visualizations
• Icons: Lucide Icons for consistent iconography
• Fonts: Geist Sans and Mono by Vercel
• Analytics: Vercel Analytics and Speed Insights for performance monitoring
• Deployment: Vercel for seamless deployment and hosting

🚀 Getting Started

Follow these steps to run the project locally:

# Clone the repository
git clone https://github.com/yourusername/organ-body-donation.git

# Navigate to the project directory
cd organ-body-donation

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 in your browser to see the result.

🎨 Design System

The project uses a consistent design system with:

• Color Schemes:

  • Organ Donation: Blue-based palette (#3B82F6 primary)
  • Body Donation: Red-based palette (#EF4444 primary)
  • Neutral: Gray-based palette for shared components

• Typography:

  • Headings: Geist Sans with appropriate sizing hierarchy
  • Body: Geist Sans for readability
  • Code: Geist Mono for technical information

• Components:

  • Consistent spacing and sizing
  • Accessible focus states
  • Smooth hover transitions
  • Responsive adaptations for all screen sizes

🧩 Project Structure

organ-body-donation/
├── public/           # Static assets
├── src/              # Source code
│   ├── app/          # Next.js app router pages
│   ├── components/   # React components
│   │   ├── sections/ # Page sections
│   │   ├── ui/       # UI components from shadcn
│   │   └── ui-custom/# Custom UI components
│   ├── lib/          # Utility functions
│   └── styles/       # Global styles
├── .eslintrc.json    # ESLint configuration
├── next.config.js    # Next.js configuration
├── package.json      # Dependencies and scripts
├── tailwind.config.js# Tailwind CSS configuration
└── tsconfig.json     # TypeScript configuration

🌐 Deployment

The project is deployed on Vercel with:

• Continuous deployment from the main branch
• Automatic preview deployments for pull requests
• Performance monitoring with Vercel Speed Insights
• User analytics with Vercel Analytics
• Edge-optimized delivery for fast global access

Visit the live site: Organ & Body Donation Portal

📄 License

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

---

Developed with ❤️ for better medical education and awareness