As a proud member of theMACH Alliance, BigCommerce recently participated in the first-ever global MACHathon. The MACHathon is a hackathon that challenges participants to build a project using MACH technology and composable architectures. The MACH Alliance presents and advocates for an open and best-of-breed enterprise technology ecosystem including microservices-based, API-first, cloud-native SaaS, and headless implementations.
The theme of the 2021 MACHathon was “Getting Unstuck.” Our challenge was to build a project in five days that would help people get virtually un-stuck while showing the world what is possible with MACH technology.
At BigCommerce, our hackathon team was inspired by the idea of removing one piece of uncertainty out of people’s everyday lives — the weather. By helping overcome this hurdle, we hope to inspire people to become “unstuck” by giving them the confidence to tackle the outdoors in the right gear, for the right weather, while maintaining safe social distancing.
Our solution is an ecommerce merchandising tool called Weather Alert. Weather Alert displays customized product recommendations based on a shopper’s zip code and current weather conditions. Once a shopper inputs their zip code, our backend functions make an API call to the OpenWeather API to retrieve the upcoming five-day forecast. After receiving the forecast from OpenWeather, the backend parses through the data, matches it to products, and generates a list of recommended products for the upcoming weather conditions. The product list is then surfaced to the customer so they can review the products and shop around.
Once we had our idea, we split into two teams — one focused on the frontend and one focused on backend development.
On the day the MACHathon began, we woke up early and got to work via Hangouts. We began by brainstorming the project on an old dusty whiteboard, then mocking up what would become the design, deciding on the tech stack, and discussing the data flow of this project.
We decided to build the Weather Alert as a headless ecommerce experience using BigCommerce in conjunction with Vercel’s Next.JS framework.
Here’s a look at our tech stack:
- BigCommerce: A powerful, open SaaS platform to house product data, images, price data and deliver it to Vercel’s Next.JS framework via the Catalog APIs
- Vercel Next.JS: An open-source React framework to power the storefront and display relevant product data to customers
- AWS + Serverless Framework: Host the backend functions that made API calls to other pieces of the architecture and parsed through data to display relevant results
- OpenWeather API: Used in conjunction with the backend functions to pull weather data for a given zip code
In the first couple of days, the team built a wireframe for the home page and weather module and set up the Vercel connection to the BigCommerce platform. Once these tasks were completed, the two teams began to explore their respective technologies that were chosen for the project.
The frontend team explored the complexities of TypeScript, a framework we were not familiar with. This required us to spend a lot of time trying to read through documentation and Stackoverflow to familiarize ourselves with the framework. This led us to patch several things together in the way they made sense to us, and a lot of trial by error. Principal SE Stuart Guest-Smith also began an UX/UI mockup through Figma, where he laid out the groundwork for user interactions and flow on the frontend. The backend team lead by Senior SE George Fitzgibbons began hacking away at the logic that would become the backbone of the project. The backend team started by exploring available API endpoints for both BigCommerce and OpenWeather API, and how they could take a given zip code to display relevant product data to the user.
As the team entered the second half of the MACHathon, the pressure was on. During this phase team members would meet at random times in the day (sometimes even for 5 minutes!) just to check in with each other and help where needed.
By this point, most of the backend logic had been completed and the team began working on integrating it to the frontend. To integrate the backend logic with the frontend, the team began hacking away at a module that would be used to house the zipcode submit form and be able to return related products back to the customer. We ran into hiccups here and there, especially as our GitHub repo became flooded with new commits as we were trying to push into the final day of the MACHathon. Our project lead, George Fitzgibbons, did an amazing job keeping the team afloat and on course as the hours whittled down to submission day.
During the final day as the MACHathon submission deadline approached, our team was feeling very enthusiastic about the progress made. With any project there is always room for improvement, so we continued working on last-minute user experience enhancements. Some of these last-minute enhancements included aligning the product cards aesthetically, styling the input boxes to be more modern looking and user-friendly, and finalizing the last deployments to the homepage that reflected the initial project mockup.
While some of our team members continued working on finalizing tweaks, the other members concentrated on getting the project submission ready for the MACHathon judges and created the video showcasing Weather Alert:
After having faced various challenges along the way, our team was very proud of the new concepts learned and the created solution to help people become “unstuck”, while using a technology stack representative of the MACH Alliance.
Check out our project here:
The next step with this project will be releasing it as an open-source repo so others can explore the technology and build upon the specific use case.
Have you used Next.js by Vercel to build an ecommerce site, or used BigCommerce for a headless build? Show us what you’re working on and tell us what you learned by commenting below or tweeting @BigCommerceDevs.