ImpactWorks.io

Technical overview

Live Site: Production

Tech Stack: React, Tailwind CSS, Flask, Docker, OpenAI API, Render

Project summary

ImpactWorks.io is a job board for disaster relief, emergency response, and humanitarian work. I built a browsing experience around listings from the UN’s ReliefWeb API, with AI-generated summaries of role descriptions, experience requirements, and salary information when available.

Initial research & problem discovery

While exploring humanitarian aid datasets, I saw an opportunity to build a focused job-discovery experience using ReliefWeb’s listings. The design brings country filters and concise role summaries into the browsing flow, so people can compare opportunities before opening a full description.

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 summarize listings within the job-detail view, 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

Front-end architecture

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

Back-end integration

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

Responsive design strategy

On a phone, a fixed summary sidebar would compete with the job description for space. I adapted the layout so both remain available:

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

Development snapshot

This case study describes the December 2024 build. During development, I used:

• Live development build
• Google Analytics for usage signals
• Testing with friends and family for direct feedback

Ideas for further development

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

The project brings job discovery and AI-generated summaries into one responsive interface. The next step is to evaluate whether the summaries help people assess a role and whether the filters match how they search for humanitarian work.