-
-
Track orders as you hover an order in the table
-
Detail view of tracking
-
create a new shipping label
-
see shipping rates and create shipping label
Inspiration
People have been really creative with Airtable, and many have used it as a backend for their e-commerce shops. They can track clients and orders, but I feel it was missing the perfect tool to manage shipping. I wanted to build a block that could be used by many people in the team, in the warehouse or in the customer service team answering questions regarding their orders.
What it does
As you are selecting an order the block looks out for a tracking number. If a tracking number exists, the block displays more details regarding the shipment including the latest update and its shipping history.
If there is no tracking number available for this order, the block guides the user to get a shipping quote from many providers, the user can select the best rate and create a shipping label. The generated tracking number will be added automatically in the record.
How I built it
I used GoShippo API for everything related to shipping (rates, tracking, label). It's a complete API to manage the lifecycle of a shipping order.
Challenges I ran into
CORS, CORS, CORS... GoShippo API work partial with test data It lets you generate tracking number, but don't let you track them.
Making a beautiful timeline, inspired by Proskynete's vertical-timeline-component-react repo.
Accomplishments that I'm proud of
Feeling more comfortable with React 💪 Felt I've built something useful
What I learned
Used RecordCardList for the first time. GoShippo API
What's next for Shipping block
Optimize parcel size and weight depending on order items Live data with GoShippo
Log in or sign up for Devpost to join the conversation.