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.
Employer:
Sam TooheyContributions:
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
Fruits collection
Vegetables collection
Meat collection
Seafoods collection
Products page
Product page
Cart view