/SOMCSMA
/PROJECT OVERVIEW
Purpose
To transition the website for the Somali Community Self-Management Agency (SOMCSMA) from a outdated site to a responsive, well-structured site that emphasizes user action through volunteering and donations.
My Role
Lead Developer responsible for end-to-end redesign, frontend optimization, and serverless backend integration.
- Modernize UI/UX with mobile-first CSS and custom typography
- Integrate Cloudflare Workers to handle serverless form submissions
- Optimize performance through image preloading (WebP) and minified css
- Manage deployments and DNS configurations through Cloudflare
- Improve SEO and accessibility in order to increase user experience and traffic
/TECHNICAL IMPLEMENTATION
Architecture
The site leverages Cloudflare Pages and Workers for lightning-fast edge delivery. Instead of a traditional heavy backend, I utilized Cloudflare Workers to process volunteer applications and Airtable to automate email notifications
Form Data Pipeline
To streamline administrative work for the non-profit, I built a custom integration using the Airtable API. When a user submits a form, a JavaScript fetch request triggers a Worker that validates the data and pushes it directly into the SOMCSMA Airtable base. This eliminated the need for manual data entry and provided the team with real-time notifications of new volunteers.
Challenges & Solutions
A major pitfall of the original site was low performance evaluations when testing using Google Lighthouse. Given actionable steps, I implemented preloading for the hero section background and used modern image formats to ensure the site loads quickly. In addition, styling was minified to use up less space.
Features
Automated Volunteer Portal
A custom-built form that validates user input in real-time and uses serverless functions to sync data with Airtable CRM instantly.
Improved Design
Accounts for all devices spanning mobile phones and desktop computers to provide a pleasing experience for all users. Fixed color contrast issues and made clear separations between sections, while keeping the site theme consistent.
Dynamic Event & Resource Cards
Implemented robust security headers, CSRF protection for forms, and environment variable masking for API keys to protect community data.
Structured Text Content
Categorized large, hard to digest blocks of information into organized categories. Narrowed down text to convey only essential information with no fillers.
Successfully designed and developed a low-maintenance website for a non-profit, demonstrating adaptability and real-world problem-solving.
- Increased Google Lighthouse evaluation scores by over 50% for all categories
- Simplified volunteer onboarding, reducing administrative overhead
- Established a professional, trustworthy brand identity for donors and partners
Future improvements that I intend to implement throughout my time here are:
- Multi-language toggle (English/Somali) to better serve the diverse local population.
- A dedicated About Us page with data-driven statistics to demonstrate program effectiveness
- Social proof through impact stories and testimonies