Back to Projects

Seeds of Goodness - Charity Donation Website

Technologies:Next.js, Typescript, Tailwind CSS, Netlify
View on GitHub

Seeds of Goodness Charity Website

Table of Contents

Introduction

Seeds of Goodness is a modern, humanitarian focused charity website built to promote urgent causes, humanitarian projects and raise support for the people of Gaza and other communities in need. This project demonstrates my ability to build clean, accessible and professional websites tailored for real-world charitable organisations.

The platform is designed to display active causes, news updates and guide users towards donating via bank transfer and in-person contributions, while providing internal tools for future administrative growth.

Features

  • Responsive Design: Fully responsive layout that works seamlessly across all devices
  • Causes Management (Static) Showcase multiple causes with progress bars
  • News Updates (Static): Share recent activities and project highlights with embedded videos
  • WhatsApp Chat Integration: Direct WhatsApp messaging button for instant communication
  • SEO Optimisation Dynamic metadata, Open Graph tags and JSON-LD structured data
  • Admin-Ready Frontend: Built reusable admin templates (news/article creation pages) structured for seamless future integration with any CMS or custom API
  • Offline Donation Handling: Donation instructions provided for bank transfer and in-person giving
  • Performance Focused: Fast page loads, optimised assets and clean, maintainable code
  • Contact Integration: Email contact functionality as per client requirement

Tech Stack

This project leverages the following modern technologies:

  • Next.js 14: App Router, Server Components
  • TypeScript: Type safety throughout the app
  • Tailwind CSS: Responsive, utility-first styling
  • Shadcn UI: Customisable UI components
  • Lucide React: Lightweight icon library
  • SEO Optimisation: Custom metadata, JSON-LD structured data
  • Responsive Images: Next.js Image component for optimised image loading

Getting Started

  1. Clone this repository to your local machine:
git clone https://github.com/SadmanKibria/Seed-of-Goodness.git
  1. Navigate to the project directory:
cd seedsofgoodness
  1. Install dependencies:
npm install
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser to see the application.

Usage

The website is structured to provide a seamless user experience:

  1. Homepage: Overview of the charity mission, featured causes and recent news
  2. Causes Section: Displays urgent humanitarian causes with donation progress tracking
  3. News Section: Lists latest distribution updates with video confirmations
  4. Cause Detail Pages: In-depth description and donation progress
  5. Manual Donations: Visitors are guided to donate via bank transfer
  6. Contact: Direct email contact functionality

Project Structure

The project follows a clean, modular architecture:

/
├── app/                  # Pages and routes (Next.js App Router)
│   ├── causes/           # Causes pages
│   ├── news/             # News pages
│   ├── donate/           # Donation guidance
│   └── layout.tsx        # Global layout and metadata
├── components/           # Reusable components (navbar, footer, quote card, UI buttons)
├── lib/                  # Utility functions (SEO config, data models)
├── public/               # Static assets
└── styles/               # Tailwind and global styles

Challenges and Solutions

  1. Handling Donations Without Online Payments

  2. Challenge: The charity accepts only offline donations (bank transfer, cash).

  3. Solution: Designed a clear manual donation flow that still builds user trust and transparency without a payment gateway.

  4. Responsive Navigation:

  5. Challenge: Creating an intuitive navigation system that works across all devices

  6. Solution: Developed a responsive navbar with dropdown menus for desktop and a slide-out menu for mobile

  7. Performance Optimisation:

  8. Challenge: Ensuring fast load times with image-heavy content

  9. Solution: Utilized Next.js Image component, code splitting and lazy loading techniques

Key Learning

  • Designing scalable architecture even for static projects
  • Applying real-world SEO strategies in humanitarian sectors
  • Structuring apps with future backend upgrades in mind
  • Balancing user-friendliness and professionalism in charity projects
  • Handling offline-only donation flows smoothly

Future Enhancements

  • Authentication System: Add user authentication for client portals
  • Dynamic Admin Panel: Build a full CMS system for managing causes, news, and campaigns
  • Multi-language Support: Expand reach to non-English speaking donors
  • Analytics Dashboard: Track visitor interactions and donation interests
  • Donation Gateway: Integrate Stripe or PayPal for online donations (with Islamic compliance checks)
  • Newsletter Integration: Collect emails and send automatic updates
  • Newsletter Integration: Collect emails and send automatic updates

Contact

For any inquiries about this project or to discuss potential opportunities, please contact me at:

This client project demonstrates my ability to deliver high-quality, performant web applications that meet specific business requirements. I pride myself on creating solutions with attention to detail, clean code architecture and modern development practices while ensuring exceptional user experiences.