A modern, offline-first NGO coordination platform designed to bridge the gap between central organizers and on-the-ground volunteers.
Designed originally for the Google Solution AI Challenge, ImpactHub addresses a critical data fragmentation issue in the social sector, enabling reliable field operations, intelligent task prioritization, resilient data collection, and community impact tracking even in environments with unstable or unavailable internet connectivity.
- 🎯 Vision
- ✨ Key Features
- 🏗️ Architecture Highlights
- 📸 Screenshots
- 🛠️ Tech Stack
- 🚀 Getting Started
- 📂 Project Structure
- 🔄 Current Development Status
- 🗺️ Roadmap
- 🤝 Contributing
- 📝 License
The Problem: Local social groups and NGOs collect a lot of important information about community needs through paper surveys and field reports. However, this valuable data is often scattered across different places, making it hard to see the biggest problems clearly. Additionally, traditional systems assume a constant internet connection, resulting in delayed reporting and synchronization issues in disaster zones or remote areas.
The Solution: ImpactHub is a powerful system that gathers scattered community information to clearly show the most urgent local needs. It features a smart matching system to quickly connect available volunteers with the specific tasks and areas where they are needed most, utilizing a resilient offline-first architecture that allows coordination to continue effectively regardless of network conditions.
- Local-first task management
- Offline data collection
- Sync queue simulation
- Automatic reconnection handling
- Conflict resolution workflows
- Automated urgency scoring
- Dynamic task prioritization
- Assigned and unassigned request tracking
- Visual risk indicators
- Live data pipeline simulation
- Field report monitoring
- Community impact analytics
- Volunteer performance insights
- Volunteer profiles
- Achievement badges
- Streak tracking
- Contribution metrics
- Leaderboards
- Skill matching system
- Needs heat map visualization
- Field report processing
- Regional coordination monitoring
- Responsive dashboard design
- Smooth animations with Framer Motion
- Reusable component architecture
- Type-safe frontend implementation
- React + TypeScript
- Strict type-safe domain models
- ViewModel-based UI architecture
- Centralized mock data simulation
- Reusable component-driven design
- Backend-ready service architecture
- Dashboard
- Skill Matcher
- Needs Heat Map
- Urgency Scoring Engine
- Data Pipeline
- Offline Field Application
- Volunteer Profile System
To accurately demonstrate the platform's capabilities without a live backend, I engineered several complex frontend simulations. The UI is completely decoupled from hardcoded text and is entirely driven by state logic and mock data structures.
- Automated Data Pipeline: The Data Pipeline dashboard utilizes
setIntervallogic to automatically generate and inject new field issues over time, simulating a live, high-traffic crisis center. - Offline Sync Simulation: The Offline Field App features a functioning local queue. When the "Offline" mode is toggled, form submissions are intercepted, stored in a local state array, and held. Once toggled back to "Online," the queue automatically unloads and syncs with the central mock database.
- Dynamic Heatmap Randomizer: The community needs heatmap isn't a static image. It utilizes a randomization algorithm to generate coordinate clusters based on severity, visually demonstrating how the app maps dynamic field reports.
- Strict State Management: All gamified elements (streaks, impact numbers) and urgency scores are derived dynamically from the mock dataset, ensuring the UI accurately reflects the underlying data layer.
Add screenshots here.
- React 18
- TypeScript
- Vite
- React Router DOM
- CSS
- Framer Motion
- Lucide React
- Font Awesome
- Node.js
- Express.js
- MongoDB
- JWT Authentication
- REST APIs
- WebSockets
- Node.js (v16 or higher)
- npm or yarn
git clone https://github.com/your-username/impacthub.git
cd impacthub
npm install
npm run devhttp://localhost:5173src/
├── components/
├── pages/
├── layouts/
├── data/
├── types/
├── routes/
├── assets/
└── services/ (planned)components— Reusable UI componentspages— Main application viewsdata— Mock backend simulationtypes— TypeScript domain modelslayouts— Shared layouts and navigationroutes— Application routing
- Frontend UI
- Offline-first simulation
- Dashboard analytics
- Volunteer profiles
- Heat map visualization
- Type-safe architecture
- Component system
- Service layer abstraction
- Backend integration planning
- Express backend
- MongoDB persistence
- JWT authentication
- WebSocket synchronization
- AI-assisted volunteer matching
- Dashboard
- Volunteer profiles
- Offline workflows
- Data simulation
- Type-safe models
- ViewModel architecture
- Backend-ready structure
- REST APIs
- MongoDB
- Authentication
- Role management
- WebSocket synchronization
- Live notifications
- Real-time coordination
Contributions, ideas, and feature suggestions are welcome.
- Fork the repository
- Create a feature branch
- Commit your changes
- Open a Pull Request
This project is licensed under the MIT License.
Built with ❤️ to improve NGO coordination, volunteer engagement, and disaster response operations.