Back

Pray For Nations Website

image.png

Type:

Front-end development

Skills:

HTML/CSS, Javascript, Drupal

Context:

Work project under Alberni Online

Time:

October 2024

Links

Website Link

https://p4n.ca/

Intro

This is the first major project I developed at Alberni Online, and also my first experience working with Drupal.

The goal of the P4N website is to provide Christian missionaries with a platform to discover, support, and pray for unreached communities across Canada. It also serves as a tool to assist gospel outreach efforts in these communities.

My role in this project was to develop the entire website using Drupal, based on provided design documents. Site content was structured and managed through Drupal’s content management system, while custom styling and advanced functionality are achieved with Drupal, custom CSS, and JavaScript.

teaser_p4n.png

Notable Features & Takeaways

  • Advanced content filtering with Drupal - The P4N website provides individual articles for each unreached people group, organized under major Canadian cities. To deliver a personalized and relevant user experience, I learnt how to develop advanced content filtering logics in Drupal.

    Four examples of content filtering for people group: show people group of a specific city, show other people groups in the same city, show all people group types in Canada

    Four examples of content filtering for people group: show people group of a specific city, show other people groups in the same city, show all people group types in Canada

  • location based filtering: the P4N client requested a feature that automatically displays the major Canadian city closest to the user’s IP address.

  • Realizing Animation effects with limited tools: Although the P4N site was built primarily with Drupal, the design called for some animation effects that go beyond what Drupal offers out of the box. To meet these visual requirements while preserving content editability for the client, I learnt how to integrate custom CSS and JavaScript to Drupal’s vanilla features such as adding custom HTML in a Drupal View.