ABOUT REFUGEPOINT
Using private funds, RefugePoint was founded in 2005 to identify refugees who fall through the cracks of humanitarian aid. Initially providing life-saving care to HIV+ refugees in Nairobi, Kenya, the agency grew quickly, adding a range of services to support those with the most urgent needs. Over time, RefugePoint developed a unique, full-service response model for assisting urban refugees and facilitating their self-reliance.
REQUIREMENTS
This is a project done for the 100 Danish web development agency. They needed an “extra pair of developer’s hands” so they reached out to help them build a WordPress website for RefugePoint based on the designs they provided.
They needed a total of about 22 pages, including a page with an interactive world map that would show the progress of RefurePoint’s activities over a timeline, with information popups and modals that open upon hovering/clicking each country with the activity.
HOW WE DID IT
This project was coded in WordPress, but in a starter that 100 Danish provided: A timber-based WordPress starter (Timber is a plugin that enables WordPress to use .twig templates, so it enhances WordPress in a way that it adds a “separation of concerns” between logic and views; It makes WordPress behave more or less like a standard MVC system like Laravel for example.).
CSS is managed via .sass and javascript is written in modern es6 syntax.
The website relies on heavy use of WordPress’ custom post types, custom fields, customizer API and AJAX.
The interactive map page is 100% dynamic. Admin is well set to easily add/update/remove countries and activities in the back-end, while on the front-end data for each country and its matching activities are fetched via AJAX and manipulated for further use. One feature that we are most proud of is that for each country, the client doesn’t need to upload a separate image of the country’s map to be shown in a modal; what we did, is, we came up with a function that, based on a physics formula that recalculates area, pulls a path from the main SVG map, and clones it into modal. The total number of lines for a map page function is 557.
Tech: WordPress, PHP, Twig, Timber, Javascript(es6), HTML, CSS, Docker
