AccessWASH: A web platform for mapping and monitoring the status of WASH facilities
- Households Served
- 90,239
- Mapped Facilities
- 12,423
- Organizations Signed-Up
- 7
- Platform Perfomance
- 99%
Overview
AccessWASH is comprised of a team of environmental and software engineers ambitious about making an impact to the water, sanitation and hygiene (WASH) industry using software, hardware and data-driven solutions.
Like a matchmaker, AccessWASH connects communities seeking sustainable WASH facilities with organizations and resources ready to help make a lasting difference.
- My Role:
Front-End Engineer
- Timeline:
4 months (Feb 2023 - Jul 2023)
- Team:
3 Software Engineers & 3 Environmental Engineers
Problem Overview
- Location Tracking:
- Hard to keep track of where all our water and sanitation facilities are built across different communities.
- Facility Updates:
- No easy way to know if water pumps and sanitation are working properly or need repairs.
- Data Sharing:
- Different groups working on water and sanitation projects can't easily share information with each other.
- Resource Planning:
- Without good information about what's working and what's not, it's hard to plan where to build new facilities or fix old ones.
Prototyping
Our design team created the high fidelity mockups of our product using Figma.
- Map Visualization:
- Used a simple graysclae map with bright blue markers to make it easy to see where WASH projects are located
- Visual Hierarchy:
- Organized content with clear headings, spacing, and buttons to help users naturally find what they're looking for
- Color Psychology:
- Selected blue and white as primary colors for immediate visual connection to water initiatives while maintaining strong contrast ratios
- Typography Choice:
- Used sans serif fonts across all interfaces fo easy readability particularly for data-heavy sections across devices
- Segmented User Journeys:
- Created separate, clear paths for different users (WASH Partners, Technology Providers, Knowledge Partners) to help them quickly find relevant information
- Custom Form Development:
- Built our own user-friendly forms since existing open-source alternatives didn't work well with our platform
Development
- Component Architecture:
- Broke down the Figma mockups into reusable React components, set up Tailwind styling system, and implemented the core design tokens for colors, typography and spacing
- Responsive Implementation:
- Built out each section with mobile-first approach, ensuring layouts adapt smoothly from mobile to desktop, and tested across Chrome, Firefox, and Safari
- Interactive Feature Development:
- Implemented critical functionalities like the WASH mapping system, partner registration forms, project submission flows, and connected to backend APIs for live statistics
- Production Deployment:
- Ran thorough testing across devices, fixed cross-browser issues, optimized performance, and deployed to production using CI/CD pipeline through services like Vercel
- Performance Optimization:
- Improved page load times through image optimization and code splitting, while also setting up proper SEO tags for better SEO rankings
- DevOps Pipeline Setup:
- Configured GitHub Actions for automated testing, set up staging and production environments, and implemented automated deployments with rollback capabilities
Tasks & Tech Stack
As part of my responsibilities, I developed the front-end of the web application from our UI/UX designs, integrated backend communication using Axios and DjangoREST, and managed the frontend deployment and DevOps processes.
Axios
Django REST
Ghost CMS
Git
Next.js
Node.js
React
Tailwind CSS
TypeScript
Vercel as PaaS
We chose these tools since they provided fast, open-source solutions for the best possible performance.
Forms Life Cycle
- Form Creation:
- Create new forms through a simple interface with instant success notifications upon submission
- Form List View:
- Browse all submitted forms in a dashboard with quick filters for status, dates, and WASH project types
- Error Feedback:
- Provides immediate notifications for any form errors, with guidance on how to fix them
- Form Deletion:
- Permanently remove forms with a confirmation to prevent accidental deletion, followed by a success notification
Dynamic Forms
Data Validation & Error Handling
- Validation Layers.
- Implemented a two-tier system where RJSF/AJV8 handles frontend validation in real-time, while backend checks add an extra security layer before database storage, ensuring data integrity without sacrificing user experience.
- Facility Rules.
- Developed WASH facility validation that checks geographic coordinates, condition ratings, and operational status, using predefined rules that maintain data quality
- Error Feedback.
- Created an error handling system using Chakra UI that displays inline validation errors, highlights problem fields, and provides fix instructions—all grouped logically to help users efficiently correct their submissions.
Performance
I implemented Vercel Web Analytics for monitoring the performance of the website. It provides insights into the number of web visitors and the speed of accessing individual pages of the app.
Impact
The platform successfully serves 7 partner organizations and manages over 12,000 WASH facilities while maintaining strong performance and user satisfaction.
99%
Platform Performance
Achieved and maintained a 99% performance score on Vercel Analytics, ensuring fast and reliable access to critical facility data while handling thousands of data points seamlessly.
12,423 points
Facility Coverage
Mapped and actively tracking 12,423 WASH projects, including water supply points, sanitation facilities, and hygiene stations, providing comprehensive visibility into infrastructure distribution and status.
66 monthly visitors
Transactions this year
Generated consistent monthly engagement with 66 active visitors, demonstrating the platform's value in day-to-day operations for WASH facility management and monitoring.
7 utilities
Sign Ups
Successfully onboarded 7 organizations actively managing WASH facilities on the platform.
Reflection
Looking back on my work developing the platform's frontend, here are valuable lessons I gained for improving our WASH management system:
- Staff Account Management:
- Should have built multi-user organization accounts initially, allowing different staff members to have separate logins and access levels from the start.
- Offline Functionality:
- Need to implement local form data storage to protect against data loss when field workers are documenting projects in areas with unreliable internet.
- Form Input Flexibility:
- Should expand form capabilities to handle multiple images per water point and more diverse input types to better serve real-world documentation needs.
- Map Data Integration:
- Add functionality to import existing local map data into the platform, preventing duplicate work and leveraging organizations' existing geospatial information.