Shipdeo Shipment App

PT Clodeo Indonesia Jaya

View Website

Client

Clodeo

Role

Frontend Developer

Year

2021

Courier integration is a very complex thing for ecommerce owners. If someone want to integrate to one courier, they have to managing the regulations for each courier. Shipdeo is one solution to integrating ecommerce with courier with easily. With shipdeo, they don't need to worry about the regulations for each courier service

What's The Problem?

Handling integration for each courier is a complex things for ecommerce owner. The owner have to managing regulations for each courier service like : JNE, J&T, Sicepat etc. It will be easy if we have one platform like "gateway" to managing the regulations. So, user no need worry anymore about the regulations. Shipdeo also want to provide dashboard to manage users's shipment order to tracking their shipment process. Dashboard should have a list of order that have many filter like : order status, date created, order id etc.

Some of user maybe want to add discount and COD features in their ecommerce. So, Shipdeo want to help they to handle discount calculations, discount period and COD system. Shipdeo also want to provide shipping label features which user can print it by theirself

How We Solve This Problem?

First, We have to create a Dashboard page with user friendly. Dashboard page have two section of filter. They are Filter By "Order Status" and Filter By "Order Date and Order id". Very challenging for me to apply multiple filters on client side. filters logic cannot collide with each other. So, in this Situation, i separate every filter logic to another file and make sure the i don't write same logic in two function. This is in line with the application of the dry concept

Then. I optimize the request to API endpoint to make sure i don't repeat the same request to saving the bandwidth of the server. The request is mostly using REST Architecture. But, in some endpoint, we are using GraphQL to speed up the request from backend.

Shipping Label

This part is little tricky. To print the shipping label, we create special endpoint to manage all types of shipping label. Then from main app we call the shipping label endpoint. From shipping label endpoint we render the template that we create on Angular. And finally we embed it from main App

So, the process will be like this:

Why not put the shipping label template in main app?

We have many template in Shipping Label Template. Not just for shipdeo, but for other Clodeo App too. So, if we put the template in Main App, the project will look very mess and difficult to read. We separate the Shipping Label Template from Main App because we apply the KISS concept.

Tech Stack

In Shipdeo project, we have many tech stack for shipdeo. I divided it to two section (Frontend and Backend).

Go Back