The Scoop on Port Alberni Website
Type:
Front-end development
Skills:
React + Next.js, Typescript, Drupal
Context:
Work project under Alberni Online
Time:
June-July 2025
Links
Website Link
https://scoop.next.expm.albernihosting.ca/
Intro
A Headless CMS project using Next.js + Typescript for the frontend & Drupal for the backend, developed for The Scoop on Port Alberni — a local news channel serving the Port Alberni community.
The website serve as The Scoop's official online presence and a platform to stream their weekly news broadcasts.
This project marks Alberni Online’s first attempt at the Drupal + Next.js approach. I was primarily responsible for researching and developing the website using this new tech stack.
Notable Features & Takeaways
- Conducted in-depth research on installing the Next.js for Drupal module and establishing connection between a Drupal backend and a Next.js frontend from scratch.
- Resolved multiple version compatibility issues encountered during module installation in a cPanel environment with outdated PHP using cPanel terminal.
- Translated complex design specifications & animation effect requests from the design team into responsive, pixel-accurate components in Next.js.
- Proposed and implemented layout enhancements to improve website’s experience on large screens.
- Planned and Implemented a client friendly data structure in Drupal backend using the Paragraph module, ensuring smooth content editing experiences for the client.
Process Documents
Communicating about large screen adaption
https://www.figma.com/design/sET0WfVQFtLntl3GW8Mqn0?node-id=9269-191#1356406847
Experimenting with large screen adaption design
