Acro Commerce's new site launch!

We’re pleased to announce that Acro Commerce’s new corporate website has launched! Although the result was not a major overhaul from a visual perspective, everything else about the project was. Read on to learn more.

Acro Commerce had previously built our website on Drupal 7, which handled both the front and back ends. The new site is built on a brand new decoupled architecture and is the nexus of our next generation framework (Gesso), on which all new site builds will be based.

Our new technical architecture uses Drupal 9 as the back end, serving the data/content (via API) to a React front end, with styling and visuals driven from a component-based design system. 

This modern, future-proof architecture brings our core offering to the leading edge of our field and opens the door to evolving how we can serve and deliver products to our customers.

We kicked off this project in December 2020 and launched live on September 29, 2021, and it was a massive effort by many people.

Key rock stars:

• Mike Dupree - STL
• Mike Hubbard - Developer
• Clayton Bildstein - Developer
• Micah Joyner - Developer
• Essam Al-Qaie- Developer
• Keddy Pavlik - Project Manager
• Jason Poole - Creative / UX lead
• Hailey McNeil - Product Owner / Marketing
• Laura Meshen - Content / Marketing
• Dale Anderson - DevOps

Many other supporting members helped as well; you know who you are, and we appreciate you!

The architecture, technology & other nerdy stuff

Modern decoupled architecture

This project used a decoupled architecture strategy with Drupal 9 as the CMS back end and using React to display the content on the front end. Simply put, a modern architecture designed with scalability and growth in mind.

Drupal 9 backend / Data / API

Configuring the Drupal back end is the same as it always was, so no new learning curves there. We ensured that the fields we added are matched well with what our React component props expect.

React front end

Using Next.js and a series of factory components, we connect to Drupal’s API to grab the JSON data we need, whether it’s a menu, content type, paragraph, etc. We then map the data to the necessary React components and their props to render the frontend.

Figma design system

Figma holds many token values (variables) that we use to style our React component library. Whether it’s font size, margins, colours, etc., each token shapes our components. Not only that but Figma is also used to design the component using the same tokens, which help us ensure a high degree of accuracy between design and code.

Material UI

Our design system leverages Google’s Material UI (MUI) instead of starting from scratch. MUI provides a robust, customizable, and accessibility-ready library of foundational components, enabling us to build our own design system and develop React components faster.

Storybook component library

Storybook previews our components while developing them and provides an environment for viewing all of our components in one place. Each component has usage examples and documentation and is a good resource for anyone using design system components while building out a front end.

Lagoon

Lagoon is a tool used for handling project deployments to Kubernetes. It works by listening to webhooks (notifications) from GitLab for specifically set branches/ or merge requests. When a branch whose name matches that which is configured is deployed, Lagoon receives a notification that the branch has been updated. It then pulls the code down and builds the application using the project-specified docker images. Once the images have been created, they are deployed to Kubernetes.

Kubernetes

Kubernetes is essentially site hosting via docker images. It is an application that manages docker containers, and these containers host your application. Kubernetes automatically scales the application as more users start to use the app.

Project stats

• 460 closed git tickets!
  • Design system
  • Front end
  • Back end
• ~2,000 hours from December to now
• Ran in 2-week sprints using story points for estimation
• 30 fully-formed components, from scratch, into Storybook
  • Launchpad for Gesso
• Key takeaways from sprint retrospectives:
  • Break down tickets more! The devil is in the details and the ticket count.
  • Create a system to write and estimate tickets, so you have a healthy backlog for planning sprints.
  • Know your escalation path, and flag things early and often.
  • Keep a paper trail.
  • Speak up about unknowns; it’s ok to “risk annoying people.”
  • Account for review feedback and the time needed to action the feedback.
  • “Less is more” when it comes to populating a sprint.
  • Use Alt + F4 to clear your cache.
  • Singing in meetings keeps everyone happy.
  • Watch out for that Open column: The wild, wild West for unlabeled tickets
  • Direct quote: “Don't not do something cause McCabe says it’s unnecessary.”
  • LINTING is life.
  • Invite everyone to meetings.
  • A "question of the day" will only bring you joy.

Congrats to the entire Acro Commerce team on this significant milestone!