Episode Details

In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!

Prismic 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.

If 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’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.

01: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
  • TypeScript
  • React
  • Next.js

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<