SACABC & AfroRadar

Project Overview

During the 2026 Canada Summer Jobs Program, I worked as a WordPress Web Developer and Researcher for the South African Community Association of British Columbia (SACABC) and its sister organization, AfroRadar Arts & Culture Entertainment.

This was a real-world professional experience working on live websites used by community organizations. The organizations work with support from partners including the City of Surrey, the Government of Canada, and the Government of British Columbia.

My responsibilities covered website development, technical auditing, security, performance optimization, accessibility, SEO, content management, research, and translating approved designs from Figma into production-ready WordPress pages using Bricks Builder.

Role & Responsibilities

• WordPress Development: Maintained and developed features across two live WordPress websites using Bricks Builder, PHP, JavaScript, HTML, and CSS.
• Technical Auditing: Conducted a full technical and content audit covering major pages, navigation, links, media, layouts, and website functionality.
• Security Engineering: Improved WordPress and Cloudflare security through security headers, WAF configuration, rate limiting, DNSSEC, DMARC, Bot Fight Mode, and other security controls.
• Performance Optimization: Investigated slow page loads, optimized images and caching, implemented lazy loading, and diagnosed inefficient WordPress database queries.
• Accessibility: Improved image alt text, ARIA labels, navigation, link destinations, icon accessibility, and overall usability.
• Figma to WordPress: Translated the AfroRadar Figma redesign into a responsive, production-ready WordPress implementation using Bricks Builder.
• Collaboration & Research: Worked with the Graphic Designer and other team members during planning and content meetings to turn design concepts and ideas into practical website solutions.

Technical Website Audit

I began the project by performing a technical and content audit across both websites. The goal was to identify problems that could affect usability, accessibility, security, performance, and content quality.

• Identified broken and mismatched links across major pages.
• Found duplicated and incorrectly placed content across pages.
• Identified inconsistent image sizing, cropping, and missing alt text.
• Investigated oversized whitespace and disconnected homepage elements.
• Identified outdated content and resources.
• Reviewed header and footer inconsistencies across both sites.
• Audited the AfroRadar homepage, navigation, hero section, and footer.

The audit became the foundation for the security, performance, accessibility, and design work completed throughout the term.

Security Enhancements

Security was one of the largest areas of the project. I worked across both the WordPress application layer and Cloudflare infrastructure to reduce attack surface and improve the organizations' overall security posture.

• Published Privacy Policy and Security Policy pages for both websites.
• Reviewed JavaScript libraries and WordPress plugins for known vulnerabilities.
• Removed unused WordPress themes.
• Updated the website to the latest supported PHP version.
• Investigated and enabled automatic plugin and theme updates where appropriate.
• Fixed the Plesk backup configuration.
• Installed activity logging to track changes made to the sites.
• Performed a malware scan and confirmed the sites were clean.
• Implemented security headers including Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, and Referrer-Policy.
• Reviewed and tightened Cloudflare WAF skip rules.
• Enabled Bot Fight Mode and AI Labyrinth to reduce malicious automated traffic.
• Configured security.txt files for both domains.
• Added a missing DMARC record for AfroRadar.
• Enabled rate limiting and DNSSEC.

Performance Optimization

One of the most technically challenging parts of the project was investigating the performance of the Events page, which was taking more than 45 seconds to load.

• Database Query Investigation: Used Query Monitor to trace the slowdown to inefficient WordPress database queries related to event metadata.
• Query Optimization: Corrected an issue in the underlying event sorting and query logic that was causing past events to be incorrectly included.
• Image Optimization: Tested multiple image compression solutions and bulk-compressed previously unoptimized media.
• Lazy Loading: Researched and implemented lazy loading for long pages and event galleries.
• Third-Party Scripts: Identified the embedded Instagram feed as a major contributor to JavaScript execution time and recommended deferred loading.
• Cloudflare CDN: Confirmed and optimized the use of Cloudflare's CDN for proxied domains.
• Database Cleanup: Implemented database and media library optimization to remove unused data left behind by previous plugins.
• Infrastructure: Investigated legacy infrastructure and enabled 0-RTT Connection Resumption through Cloudflare.

Accessibility & User Experience

I worked with the team to complete an accessibility and usability pass across both websites, focusing on navigation, imagery, links, icons, and assistive technology support.

• Corrected broken navigation and call-to-action links throughout the websites.
• Added meaningful alt text to the majority of content images.
• Established guidelines for decorative imagery versus informational imagery.
• Added appropriate alt text for organization logos.
• Added ARIA labels and visible labels to social media icons.
• Corrected navigation between SACABC and AfroRadar.
• Improved external links to open appropriately in new tabs.
• Confirmed imagery was self-hosted rather than unnecessarily loaded from third-party sources.

AfroRadar Redesign: Figma to WordPress

One of the major design responsibilities of the project was translating a new AfroRadar design from Figma into a functional WordPress website.

Working alongside the design team, I implemented the approved layouts using Bricks Builder while maintaining the existing WordPress environment. This required translating visual designs into responsive layouts while carefully matching spacing, typography, imagery, component structure, and interactive behaviour.

The process gave me practical experience working between design and development, where the goal was not simply to reproduce a screenshot, but to create a maintainable and responsive website that could continue to be managed by the organization.

Copyright & Content Protection

During the website audit, I also reviewed a copyright infringement notice received by the organization concerning unauthorized imagery. I helped identify and remove the affected material from the website, addressing the issue before it required further legal action.

Reflection

This experience gave me an opportunity to apply my development skills in a real professional environment rather than working exclusively on school or personal projects. Working on live websites meant that technical decisions had to consider reliability, security, accessibility, maintainability, and the needs of actual users.

I strengthened my experience with WordPress, PHP, JavaScript, CSS, Cloudflare, website security, performance optimization, and accessibility. I also gained valuable experience using tools such as Query Monitor and working with Cloudflare security and infrastructure settings.

Most importantly, the project taught me how development fits into a collaborative organization. Working with designers and other team members required communication, research, iteration, and the ability to turn ideas into practical technical solutions. It was a valuable opportunity to contribute to organizations serving the local community while gaining professional web development experience.

Technologies Used