ImpactHub

Technical Overview

Live Site: Production

Tech Stack: React, TailwindCSS, Flask, Docker, OpenAI API, Render

Last Updated: December 31, 2024

Project Summary

ImpactHub is a specialized opportunity board connecting professionals with opportunities in disaster relief, emergency response, and humanitarian work. The platform integrates data from the UN’s ReliefWeb API with AI-powered summaries, creating an intuitive interface for discovering humanitarian career opportunities.

Initial Research & Problem Discovery

While exploring humanitarian aid datasets, I identified a gap in ReliefWeb’s current offering. Despite providing comprehensive humanitarian services, news, and blogs, their platform lacked a focused job discovery experience. This presented an opportunity to create a dedicated solution for connecting talent with humanitarian opportunities.

Design Challenges & Solutions

1. Intuitive Opportunity Filtering

The first challenge involved creating an effective system for browsing humanitarian opportunities, which often arise from acute events like natural disasters or political crises. The solution features:

• Chronological sorting by posting date
• Country-based filtering prioritizing high-demand areas
• Real-time updates reflecting current global events

Opportunities Filter

2. AI-Powered Description Enhancement

To leverage current AI capabilities, I implemented:

• Custom Flask API endpoints integrating with OpenAI
• Specialized prompt engineering for consistent summaries
• Automated extraction of key details:
  • Concise role descriptions
  • Experience requirements
  • Salary information (when available)

Technical Implementation

Frontend Architecture

• React for component-based UI development
• TailwindCSS for responsive styling
• Modern UI elements including country emojis for visual identification
• First-responder inspired color scheme with bold reds and modern typography

Backend Integration

• Flask API for OpenAI integration
• Custom /summarize endpoint for job description processing
• Docker containerization
• Render.com deployment pipeline

Responsive Design Strategy

With mobile traffic exceeding 60% (Exploding Topics), I implemented a comprehensive responsive design strategy:

Desktop Experience

• F-shaped layout pattern for optimal content scanning
• Fixed right sidebar containing AI summary
• Scrollable main content area
• Clear visual hierarchy

Desktop Layout

Mobile Experience

• Strategic placement of AI summarizer
• Custom accordion interface for description access
• Persistent apply button
• Specialized layout considerations:
  • Challenge: Initial flex layout caused AI summary displacement
  • Solution: Implemented conditional media queries with expandable accordion
  • Result: Maintained feature discovery while preserving content accessibility

Mobile Design Goals Achieved

1. Prominent AI summarizer placement
2. Persistent summary tool visibility
3. Seamless job description scrolling
4. Optimized content hierarchy

Current Status

The platform is currently in active development with:

• Live development build
• Ongoing user feedback collection via Google Analytics
• Active user testing with friends and family focus groups

Future Development Roadmap

1. Organization Hubs

   • Custom spaces for organizations
   • Enhanced organization profiles

2. Monetization Features

   • Paid opportunity listings
   • Sponsored content integration

3. Enhanced User Experience

   • Advanced filtering capabilities
   • Expanded AI summary features
   • Improved mobile interactions

Impact & Next Steps

ImpactWorks demonstrates how modern technology can improve access to humanitarian opportunities. The platform continues to evolve based on user feedback, with a focus on creating an efficient pathway for connecting humanitarian organizations with qualified candidates.