Acro Media’s new site launch | Acro Media
Jason Poole
Author Jason Poole
CXO & Co-Founder
Posted in Software Development , Architecture
November 24, 2021
read
Back to blog

Acro Media's new site launch!

We’re pleased to announce that Acro Media’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 Media 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 Media team on this significant milestone!

Acro Media Makes Video Games!

Have you ever tried to create a video game? If yes, and you are looking for a job, send us a resume. If no, please continue reading. Building a video ...
Keep Reading »

Tools for Modern Web Development

Web development is ever-changing as the modern web evolves. As a web development agency, we strive to stay on top of the tools that we use here at ...
Keep Reading »

Continuous Delivery for Agile Ecommerce Development

Modern web development requires modern solutions. That includes workflows and methodologies that employ best practices and deliver precise results. ...
Keep Reading »

Fields marked with * are required.

×
×