Selling and Shipping T-Shirts with TypeScript
Syntax - Tasty Web Development Treats
E-Commerce Integration Challenges: A Jamstack Journey
This chapter explores the integration of Snipcart for e-commerce within a personal Jamstack website, sharing insights on selling t-shirts and managing order fulfillment. It highlights the complexities of shipping solutions, cost considerations, and the technical implementation required to streamline the e-commerce experience.
In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!
Prismic - SponsorPrismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - SponsorIf you want to know whatâs happening with your code, track errors and monitor performance with Sentry. Sentryâs Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Deque - SponsorDequeâs axe DevTools makes accessibility testing easy and doesnât require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
Show Notes01:58 - T-Shirts 101
- T-Shirts are cool
- I sold 100 right away to get the kinks out
- Then I did pre-order
- The stack
09:08 - Selling: Front-end
- Snipcart
- Itâs a button
- When Someone buys, they scrape the site for the HTML
- If you only have a client-side rendered button, you use the JSON API instead
- Integrated into Gatsby pretty easily
- Wrote one custom hook to count inventory and disable when sold out
- I thought Snipcart would be enough, but I soon realized it wasnât. I needed something to fulfill the shipment.
10:10 - Selling: Shipping Quotes
- Snipcart has integration for USPS, etc.
- You can also do custom shippers
- Itâs a webhook
- They also take care of customs declaration
13:30 - Selling: Backend
- Next.js Dashboard
- Integrate with ChitChats, Stallion Express, and SnipCart.
- The tech
- Shipping Labels
- Packing slip
18:05 - Fulfilling
- Printing labels
- Designed with CSS + React
- Print CSS is wild
- Fan Fold labels were way better
- I switched to Stallion Express
- Cheaper
- Printing packing slips
- Batch scanning
- Scanning â Mark as shipped
- Started with webcam
- Bought scanner for cheap
- QR code was better because my tokens were long
- Data matrix is often better
- Sending notifications
- Hit the endpoint via Snipcart
28:48 - The physical part
- T-Shirts printed from local supplier
- U-Haul to get them here
- Bags printed in China (about 40 cents each)
- I wrote a bunch of code to organize by size
- This cut down on moving around (14 hours if you save 30 seconds per shirt)
- Some got stickers
- Multiples were the hardest
- 24 different types of shirts
- some wanted 4xl
- some wanted tall
- 24 different types of shirts
36:30 - Common questions
- Why did you do this yourself?
- Fun project
- I learned a ton
- This is how you donât burn out
- Why not print-on-demand? (DTG)
- Tonal
- Embroidery
- Quality
- Money
- Pay people in my community
- Control
- Bags, stickers, etcâŠ
- stickermule
- Why not $companyThatHandlesIt
- I want to do stickers
- I want to do decks
- Why not Shopify
- Large orders still need major fulfillment strategies
- Code has to be written or money spent
44:16 - Other lessons learned
- Queues would be good here
- Sometimes you had to wait 3+ seconds for the confirmation of shipping
- No one reads, it was pre-order
- Donât buy shipping right away â people email about incorrect addresses
- Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds)
- Pre-order is great because you can offer many sizes
- Async JS to do things at most 50 at a time
- Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code âSyntaxâ for $10 off!
- Scottâs Instagram
- LevelUpTutorials Instagram
- Wesâ Instagram
- Wesâ Twitter
- Wesâ Facebook
- Scottâs Twitter
- Make sure to include @SyntaxFM in your tweets
The AI-powered Podcast Player
