SHOPMY Side Project: API and service to support e-commerce application

Peter's Portfolio

SHOPMY Side Project: service to support e-commerce application

About project

In addition to the front-end and back-end systems, several additional services developed by our team played a crucial role in our core project. Specifically, I personally designed and built three service programs for SHOPMY. These services includes parcel tracking, image compression, and universal links service to support seamless integration with the SHOPMY app.

Parcel Tracking Service

This service redirects users to a web view tracking page upon clicking “track my parcel” within our app. The parameters LOGISTIC_NAME and TRACKING_NUMBER are passed via URL parameters, enabling automatic redirection to our logistic partner’s website, streamlining the parcel tracking process for our users.

Technical Stack: PHP / Deployed on Firebase

Image Compressor

We decided to implement this service in response to significant delays experienced when users accessed our application.

This service compresses the uploaded image instantly and moves it from the temporary s3 bucket into the permanent S3 bucket. While working on this service, I found a gap between transferring files from one bucket to another, which can cause a 404 error while we render the thumbnail in our seller portal presently. Luckily, I found CloudFront can solve this problem by setting up a fallback bucket asset that was not found in our target bucket.

This service has increased our application performance by over 80% (calculated by initial load time) and saved up to AUD8 per GB of AWS transfer fees. SHOPMY has also allowed me to publish this repo on GitHub to help the other company solve similar issues as we did.

Technical Stack: Node.js / Sharp Library to compress image / CloudFront / Deployed on AWS Lambda

Source Code:

https://github.com/SHOPMY-AU/lambda-compress-image-node18.x

Universal Link

When a user intends to share a product or store with others, our system generates a unique link containing click type and ID parameters. Upon others clicking this generated link, our service identifies the browser’s user agent (UA) via the webpage and reacts accordingly. For instance, if the user opens the link via iOS Safari, we direct them to the corresponding product within the SHOPMY app if it’s installed; otherwise, we redirect them to the App Store.

This functionality mirrors native universal links in iOS and Android but offers flexibility for sharing via social media apps like RED or WeChat. Additionally, we plan to leverage this system for implementing a referral and reward system.

Technical Stack: React.js / Deployed on Vercel