DONATION PLATFORM
Qalb Giving Platform
A donation experience designed around Sharia-compliant giving, transparent project progress, and a calm path from discovery to donation.
Project details
- Project type
- Donation product experience
- Services
- Web Development
- Web Design
- Industry
- Charitable Giving
- Project status
- Live project
Designed and developed by Ghulam Hussain. Selected portfolio work demonstrating donation-focused product design and frontend engineering.
OVERVIEW
The situation.
Qalb Giving presents charitable projects to Muslim donors with an emphasis on clarity and respectful visual language. Project cards and progress signals help visitors understand what needs funding, while API integration supports project and donation data.
THE CHALLENGE
What was getting in the way.
The constraints that shaped every decision that followed.
- Make project status easy to understand before a donor commits.
- Provide a clear donation path without a crowded interface.
- Respect the cultural and religious context of the intended audience.
APPROACH
The implementation approach.
Start with the projects
Project listings and progress signals provide visible context for donor decisions.
Clarify the giving journey
Readable content and a straightforward donation path support a focused experience.
Connect the interface to data
Typed frontend contracts and API integration hooks support project payloads and donation form state.
SOLUTION
What was built.
- Project discovery and donation-oriented interface.
- Visible project progress and donor-facing status information.
- Responsive layouts for mobile visitors.
- API integration points for project and donation data.
DESIGN SYSTEM
The visual foundation.
The visual direction and interface choices reflected in the published project.
- Direction
- Calm, trust-oriented interface
- Hierarchy
- Project information and progress first
- Components
- Project cards, progress states, and donation forms
- Layout
- Responsive presentation for mobile donors
TECHNICAL IMPLEMENTATION
How it is engineered.
Frontend
React.js composes listings, progress states, and donation flows; TypeScript defines payload and form contracts.
Presentation
Tailwind CSS provides consistent spacing and typography across responsive views.
Integration
API integration connects the interface to project and donation data.
FINAL RESULT
What changes.
- Published a live donation-focused product experience.
- Made charitable project progress visible within the giving journey.
- Combined responsive layout and respectful visual language for the intended audience.
SCREENS
The work, in view.
Project imagery from Ghulam Hussain's portfolio. Portrait and detail frames show crops of the same source screenshot.
TECHNOLOGIES
Built with.
Chosen for this brief rather than applied to every project by default.
- React.js
- TypeScript
- Tailwind CSS
- API Integration
Related services
START SOMETHING
Got a project that needs this kind of thinking?
Tell us what you are trying to fix or build. We will come back with a scope, a timeline, and a straight answer on whether we are the right studio for it.