Maxgro

A proof-of-concept e-commerce website for a grocery wholesale business in Australia. Integrating the Shopify storefront API and ensuring the dynamic representation of the product variants were two main challenges of this project.

Maxgro's cover image

Employer:

Sam Toohey

Contributions:

UI and UX designFrontend developmentShopify store integration

Tools:

Next.jsShopify

Challenges

The development of this application involved two significant challenges. Firstly, creating the Shopify store and effectively utilizing their storefront API to retrieve products and manage orders.

Ensuring the dynamic representation of products with various variants sourced from the Shopify store was the second challenge. Meeting these challenges required a well-thought-out approach to provide users with a seamless shopping experience.

Solutions

I took a series of strategic steps to address the challenges. I utilized the Shopify-buy SDK to interact with the Shopify storefront APIs. For the second challenge, I experimented with adjusting and refining the code until I achieved the desired outcome. Through persistent effort and iteration, I ultimately succeeded in making the products adapt seamlessly to different variants, ensuring a seamless user experience.

Process

In the initial stages of this project, I collaborated closely with the client to brainstorm ideas and define the project's scope. Given that the primary focus was on creating a Proof of Concept (POC) product, I conducted research to gather design inspiration and developed a basic mockup.

The development process began with building the frontend of the application. I used NextJS as the frontend framework of choice. I modularized the application into smaller, easily maintainable components. Once the user interface was complete, I started integrating the Shopify storefront APIs.

I connected the components to the APIs and conducted comprehensive testing to assess the application's performance and functionalities across various browsers. Additionally, I evaluated the core web vitals using tools like GTmetrix, ensuring optimal performance.

Feature highlights

  • Implementation of the latest security standards
  • Optimized to load in under .5 seconds on browsers (GTmetrix)
  • 100% performance and 86% structure optimized (GTmetrix)
  • Completely responsive to mobile, tablet, laptop, and desktop screens

Key functionalities

  • Order processing with the Shopify store
  • Complete eCommerce functionalities with online ordering

Snapshots

Maxgro fruits collection

Fruits collection

Maxgro vegetables collection

Vegetables collection

Maxgro meat collection

Meat collection

Maxgro seafoods collection

Seafoods collection

Maxgro products page

Products page

Maxgro product page

Product page

Maxgro cart view

Cart view