Youth Advancement For Development (YAD)
Increased volunteer sign-ups by 25% and streamlined donation flows for a regional NGO.
Business Context
The NGO lacked a centralized digital presence, relying on social media and paper forms. This made it difficult to onboard volunteers efficiently, collect donations securely, and showcase the impact of their initiatives.
The Solution
A modern, accessible web platform serving as a central hub for the organization.
- Streamlined volunteer onboarding portal
- Secure, integrated donation processing
- Dynamic CMS-driven blog for initiative updates
Architecture Overview
The application uses a serverless architecture deployed on Vercel. Next.js handles server-side rendering for public pages to maximize SEO, while user portals use client-side fetching.
Tech Stack & Reasoning
| Technology | Why it was used |
|---|---|
| Next.js | Server-side rendering for excellent SEO and fast initial page loads. |
| PostgreSQL | Reliable relational data storage for user and donation records. |
| Tailwind CSS | Rapid UI development with utility classes, ensuring a consistent design system. |
Key Features
- Optimized Core Web Vitals resulting in a 95+ Lighthouse score
- Secure OAuth and email authentication for volunteer accounts
- Responsive design ensuring accessibility across all mobile devices
Engineering Highlights
Implemented Next.js Server Actions to handle form submissions securely without exposing API endpoints.
Optimized image delivery using next/image, reducing total page weight by over 50%.
Designed a flexible database schema using Prisma ORM for rapid iterations.
Challenges & Solutions
High latency on initial page loads for dynamic content pages.
Implemented Next.js Incremental Static Regeneration (ISR) to cache pages at the edge.
Impact: Reduced TTFB (Time to First Byte) from 800ms to <100ms for 90% of requests.
Performance Metrics
What I Learned
- •Mastering Next.js App Router caching strategies
- •Integrating secure third-party payment gateways
- •Implementing Web Accessibility (a11y) best practices
System Interface
Want to see more projects?
Explore my other recent work to see a broader range of system architectures and full-stack solutions.
