MACHathon 2021: Building the BigCommerce Weather Alert Tool
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.
Getting Started
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.
Our Team
Once we had our idea, we split into two teams — one focused on the frontend and one focused on backend development.
Working together was challenging at times, especially with the short development timeline and the coordination of multiple BigCommerce teams (Solution Engineers and Product Support Engineers) across different time zones. To make sure we could work on the project together, we established routine daily meetings each morning at 7 am CST before work. We used Google Hangouts and Slack as our main forms of communication during this time. Some other unexpected challenges that came up were related to our daily work schedules. We had multiple unexpected meetings come up the week and at times we were left with only 1–2 members able to move the project forward. Throughout the week we needed to remain flexible with our tasks and responsibilities, so we would “ping” the group chat to see if anyone was available to help throughout the day. Another challenge we were exposed to was being unfamiliar with some of the technologies in play. For example, we needed to work through TypeScript, an open-source language that builds on JavaScript, by adding static type definitions. This was not something we were prepared for and required sifting through docs and Stackoverflow posts for answers. A couple of hours were spent each day after work trying to read posts, to try and make some sense of the technology and how it fit our use case.
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.
Our Tech Stack
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
Solution Architecture
Developing Weather Alert
Building the Framework
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.
Fine Tuning
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.
Project Submission
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:
Conclusion
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.
Top comments (0)