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.

Webredone web design & development - RefugePoint website homepage image

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.

Webredone web design & development - RefugePoint website map image

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

Webredone web design & development - RefugePoint website timeline image
Web Redone case study full image - 0 Web Redone case study full image - 1

More Projects

Peemz

Peemz is a French company that allows boutiques and designers to connect to the world through the mobile experience.

View Project

SiliPint

Silipint produces simple, durable and versatile silicone cups.

View Project

Latest Blog Posts

Go to Blog

Have a project or partnership in mind?

Let's talk