We are thrilled to participate in this year’s MACHathon. Hosted by the MACH Alliance, the MACHathon is an online hackathon on MACH technology. Running from May 15 to June 1, 2022, teams were invited to find solutions that fit the MACHathon motto: “Accelerate at MACH Speed.”

The Object Edge team developed Hold My Code - a flash sale proof of concept. The goal was to create a fast, single button checkout experience for customers. For businesses, we created a tool that was easy to use for both consumers and sales teams.

‍The Technology Stack

NextJS react framework. Incremental Static Regeneration (ISR) to allow us to refresh data without overloading with requests and build static pages to allow greater scalability. Beside its big community and typescript support, NextJS is easy to integrate with external services, allows the creation of REST endpoints, and to register additional routes without the need of an external server.

‍Netlify cloud computing for hosting and backend services. Netlify is quick, easy and cheap to set up. With out of the box https encryption, CI/CD, and CDN, Netlify also supports NextJS with server side rendering and Incremental Static Regeneration (ISR).

‍Google Sheets for data management. Google Sheets is easy to use and set up for non technical users, letting businesses read and write data easily, as well as integrate with external services.

‍Stripe Checkout for a payment page. Stripe offers a prebuilt, externally hosted payment page that’s easy to integrate.

‍Nodemailer for easy email sending for Node.js users. This is an easy, fast way to implement email communications.

The Architecture

The Steps

Next.js offers different methods to fetch data for your page content allowing us to use ISR ( Incremental Static Regeneration ) for this purpose.
A product listing page will require a list of all available products. We can use getStaticProps to generate a static HTML page and Next.js can fetch the content from an external data source during build time. We also have the benefits of the ISR ( Incremental Static Regeneration ) which enables us to use static-generation without needing to rebuild the entire site, this means all visitors will see the same generated version of your site for one minute. NextJS triggers a regeneration of the page in the background.
The website is constructed by using the getStaticProps API. If Next.js finds a page using only this API to fetch data, it will pre-render the page at build time using the props returned from this API. Netlify creates its own repository that pushes it to Github. It then executes and distributes content across a wide CDN to deliver pre-built static websites to visitors
Instead of loading the site for each visit, the visitor gets a pre-loaded version straight from the closest server on Netlify. This reduces load time
Front end is ready for the users start navigating through the website to choose their products.
After users have placed products in the cart, they submit a payment requesting to the STRIPE payment service.
Stripe will receive the request for payment and respond back to the store if the purchase was a successful or a bad request.

See the Application in Action!

You can see how this works in real time at the site: flash-commerce.netlify.app

The MACHathon Team

Edvaldo Junior is a mathematician (with a PhD in Dynamical Systems) and psychoanalyst (PhD - Lacanian Studies) who has been developing software since 1984. Writer with three published books and now trying to finish another one before the editor loses all patience. ‍

Felipe Monteiro is a FullStack Engineer who loves to build digital solutions.

‍Jhony Souza has been a software engineer for over 12 years. His background is in business administration and leadership. But his passion is coding, technology, innovation, and blockchain, I have already helped 5 startups in Sao Paulo, Mexico, Chile, and Estonia in their software architecture.

‍Marcelo Gonçalves has been a software developer for over 5 years who loves problem-solving, teaching, helping others and developing solutions.

‍Renan Silva has been a Frontend Developer for over 5 years. He is a cancer survivor who loves to work with other people, learn from others and help other people achieve their goals.

‍Jason Duff is an artist, designer, and creative innovator. Working with teams on projects that are innovative and drive customer experience is his passion.

About Object Edge and the MACH Alliance

The MACH Alliance, (Microservices-based, API-first, Cloud-native SaaS and Headless) is rooted in the common belief that the interoperability and open architecture of modern software will propel current and future digital experiences. Object Edge joins the MACH Alliance, the group of independent tech companies dedicated to advocating for open, best-of-breed technology ecosystems. In a challenging digital landscape, Object Edge helps businesses differentiate and compete by serving their customers, partners, and associates with digital experiences that feel effortless.

Object Edge is committed to making complex digital experiences feel effortless through exceptional design, technology implementations, and data. With the MACH Alliance membership, Object Edge underscores its commitment to innovation, best-in-breed partners, and a customer-centric approach to building digital experiences.