Home
ecommerce

Koodo Ecommerce

Rate PlansPhones
JavaScript (ES6+)JavaScript (ES6+)
TypeScriptTypeScript
ReactReact
Next.js (SSR/SSG)Next.js (SSR/SSG)
React QueryReact Query
Custom HooksCustom Hooks
Styled ComponentsStyled Components
Authentication & Session ManagementAuthentication & Session Management
MUI / FigmaMUI / Figma
JestJest
Git & GitHubGit & GitHub
ContentfulContentful
AnalyticsAnalytics
Accessibility (A11y)Accessibility (A11y)
← PreviousNext →

Project Summary

overview

Migrate the e-commerce platform from a legacy Drupal implementation to a modern React architecture powered by Contentful CMS. This included fucnctionality for device selection, rate plan customization, and checkout workflows. The project also integrated a unified design system to ensure consistent UI components and improve maintainability across the platform.

challenge

The migration needed to support the existing Drupal platform, ensuring backward compatibility for ongoing operations while gradually transitioning to React. The project involved navigating legacy libraries shared with other teams and managing shifting project requirements, including updates to the design system and a concurrent rebrand initiative, all while keeping scope under control.

impact

The migration modernized Koodo Mobile’s e-commerce platform, enabling faster development and easier maintenance through a scalable React architecture. Users benefited from a more intuitive, consistent experience across device selection, plan customization, and checkout. Standardizing UI components with the design system reduced development duplication and improved collaboration across teams, while maintaining backward compatibility ensured a smooth transition from Drupal.

Koodo Ecommerce screenshot

My Contribution

1Code Quality & Maintainability

  • Evaluated state complexity during development and PR reviews to improve readability and reduce bugs.
  • Reduced unnecessary state and component coupling, simplifying the architecture and enhancing performance.
  • Promoted predictable rendering and consistent patterns across the codebase for easier maintenance and onboarding.
  • Enforced coding standards and best practices to ensure long-term maintainability and team alignment.
  • Introduced unit and integration testing strategies to prevent regressions and increase confidence in releases.
  • Reviewed and refactored legacy code to modern React patterns, improving readability and reducing technical debt.
  • Documented key architectural decisions and component usage to support maintainability and onboarding.

2Collaboration and Teamwork

  • Worked closely with QA to test features and ensure high-quality releases.
  • Collaborated with designers to bring the product vision to life and enhance user experience.
  • Partnered with product owners and managers to implement business rules that meet customer needs.
  • Coordinated with the Scrum Master to keep the project on track and aligned with timelines.
  • Pair programmed, communicated, documented, and interacted with other developers to solve complex problems.
  • Contributed to multiple cross-team initiatives, selected for projects based on expertise and reliability.
  • Participated in Agile ceremonies and actively shared knowledge to improve team processes.

3Session & State Architecture Improvements

  • Consolidated fragmented API calls using React Query, reducing unnecessary network requests and improving performance.
  • Eliminated race conditions through proper state management, creating a single source of truth for session state via an API-based approach shared across multiple libraries.
  • Maintained backward compatibility for cross-team consumers while modernizing session handling.
  • Redesigned authentication using Next.js middleware, implementing a unified session management system that simplified local setup and ensured secure, consistent access.

4Improved Developer Experience

  • Developed lightweight feature flag tooling for local and staging environments, enabling safer testing of long-running features and reducing rollout bugs.
  • Automated local 'production-like' workflows with real secrets and endpoints, cutting debugging and onboarding time from hours to seconds.
  • Mentored and onboarded new developers to the project, ensuring smoother team ramp-up and knowledge sharing.