Selling and Shipping T-Shirts with TypeScript

man, congrats on a a successful project, it sounds like. Yeah. Thank you. Rid. The other question I got is why did you not use So the next thing I tried was Snipkart, which they sponsored our podcast, like, 2 years ago or something like that. I had met them at a bunch of different shippers. Canada Post, USPS, FedEx, UPS, all of those big ones, they integrate with them. But, I'm gonna sick pick. Last week, I sick picked the coffee maker. I'm gonna sick rid The coffee grinder, I got along with it. And I I posted this to Twitter, and I got so many people being like, we have that one too, and it's awesome. So I'm interested in which one you have. It's Laravel, Encore Conical Burr Coffee Grinder. What the heck? How do you spell that? It's b a r a t zed a, Really slow, and, also, it was on a cord. So, I went on Amazon, and I found a actual barcode scanner.

warlord of being able to hammer out

you know, a whole package, basically.

love, love, love

label printers and different APIs.

That is

some some really interesting code to solve any of your own projects, and I absolutely So you would say that you used

One of my favorite things about being a web developer is being able to do this type of work. So, The right way. We wanna be producing

So, like,

what we're talking about when we're talking about

And the QR code scanning is how you turn the settings on and off. Man, rid. That's so cool. Yeah. It was, like like, 40, $50, something like that. Pretty pretty affordable. And I was my kids

grocery store. You could just slide barcodes under it, rid. It'll be like, boop boop. And I was surprised at how good it was. And there's all kinds of settings, like how fast it will will read or duplicates. If you accidentally scan something twice, and then there are machine learning enhancements. Some pretty awesome stuff in there. So you wanna check it out. Use the coupon code syntax for 20% off, and listen listen up. This is the URL we want you to go to. D q.comdeque shipping was that and picked up you can turn duplicates on or off. And it's funny because all the settings, there's no software for it. Rid All the settings are just the the book that comes with it, and they're just different QR codes that you scan.

super fun even for me. I could imagine Landon going nuts With something like that. Yeah. Like, how fun would it be to build a little web app for your kid? To practice, Oh, yeah. Yeah. The you can do as much rid Green bin and recycling as you want, and you only are allowed 1 bag of trash or 1 bag of garbage. So it's a pretty good system because it makes you if you're not careful about it,

loved it. Like, what a fun toy to walk around. Boop. Boop. You gotta be careful. There's a laser in it, but made me and they have to order them from Los Angeles. And then they have to rid. It was so many that they had to get put on a pallet, 2 of of 1 or something like that. And when that happened, you had to run around So that you could scan, like, 11 and then scan another barcode, and it would send all that data to the computer. So you could batch them if you wanted, rid Or you could do it every single time you scan 1, it sends the data to the computer. So if you are running around a warehouse and not within, like, distance of the computer, you could

like, scan this as, like, a game kind of thing? Scan this You just Put little barcodes on all the toys, and then you scan them, and it, like, shows, like, what's in your basket. Love that. Inventory system. They could set up their little shop.

you can do that in Next. Js, which is in my advanced React course. Check it out. Use a coupon code syntax For $10 off. Cool. I'm gonna shamelessly plug the latest level up tutorials course, which is node fundamentals authentication part rid. 2, we dive into things like verifying emails. One of the the tough stuff that we dove into in this course was splitting our API up from our UI so we have 2 separate

level up tutorials.com

servers can talk to each other, how can we get you know, deal with the course issues that come around there, how we can deal with HTTPS

and local development,

Yeah. Cool. Shameless plugs. I'll shamelessly plug all my courses. Westboss.comforward/courses expensive for anything.

generating SSL certificates, those types of things are giant pain when you're working on any of this stuff. So My name is Scott.

and you'll save 25%.

then You don't have enough shirts at the other day. So now I learned I gotta I gotta over order

So out of there's, like, 1550

rid I felt really bad. The people are excited. They don't want their $22 back. They want a t shirt. Right? They're excited about it. Totally. Yeah. And I think that's it. Rid. That that's all the lessons I learned here. So, it was a really fun project. I had a lot of fun doing it. It's really exciting to see. I'm just I just shipped them out on Friday, and it's Monday today. And everybody is, like, the USPS is so fast. They already got a lot of people in the US already got their shirts, which is amazing.

orders. Rid. Out of that, 5 of the people got a partial order But I just wanted to, like, do it all myself this time just to figure out what it is all worth and and whatnot.

because at the end of it, we didn't have the shirts, and 3 of them got refunded entirely.

rid the wrong size in a couple of the packages. There's, like, so many different points along the way where

Why? as they print the shipping label, they also print a secondary label that has a list of things Mhmm. That you need to pack. So for every order, you print off 2 pieces of paper, and then you keep them together, Because there was batch barcodes and shipment barcodes, and then you just go ahead and hit all the APIs And for the shirts, because, like, then I don't know. My wife probably wouldn't like it if I opened up our $150 Conical Burr Coffee Grinder. Awesome.

Who knows? The the person who's who sold the shirts And 15, 20 a day or something like this. I ended up, so I'll tell you. I I sold the 100 in You sold a lot. Yeah. I Sold the, like, 100 immediately in, like, an hour or something like that or half an hour or something like that. And then I switched it over to doing preorder went to my buddy. My buddy runs Yeah. We And then people didn't understand. People are like, why is it gonna take 75 days to ship it to me? And I was like, okay. The quote is 4 to 75 days.

as soon as possible, especially if it means money coming out of your pocket. So

treat. Thank you so much for Century for sponsoring. Read. Alright.

you wanna be aware of any of these things

So I ended up buying this little label printer. It prints So I ended up using the Stallion Express. Ready. I think they're still shipping right now, but I think it's gonna be much faster and yeah, I ended up using QR code, and you just scan this thing. It's Bluetooth or wireless, like a like a wireless mouse. Re And the way that it works is that it just types in by sorting them and printing them together Because you're just looking at something Another one called Stallion Express, 1700 shirts would be, like I don't know. I do everything digitally, and

How do I spell it wrong? So, s e n t r y dot I o, And use the coupon code tasty treat, all lowercase, all one word, to get 2 months for free. Sentry is the perfect place to see all of your errors and exceptions. Re Again, unless you set up alerts and things like that, I always like to set up alerts or have some regression warnings just in case

rid I push out a new release and, suddenly, you know, a bunch of people aren't able to purchase something, that would be a big, big deal for us. We do a lot of testing first and foremost, but,

I'm laughing because I spelled I spelled it Wrong last time I tried to spell it, and Wes had to inform me of that. And I was like, what?

rid As always, head on over to century at century dot I o, coupon code tasty

to be able to to do all this. Like, you make money at it, and you get to to do something that is a little bit different than what you do day to day. Rid. Yeah. I I mean, I totally agree. It's the whole scratching your own itch part because, like, when else are you gonna get the opportunity to work with? Barcode scanners and, like, you think, oh, there's a black shirt and a pink shirt. Like, how many variations I'll talk about Prismic. I I like Prismic a lot there. They are awesome. Ready. So the way that works is you sign up,

I am. I am.

I am.

You are what? You are Oh, I don't know what.

I am let's get into it.

rid To the printer, and then the printer had to print them, and then the printer had to give them to me, and then, like, some of the international ones. And by the time rid. From, like, the time that, like, you bought the T shirt to actually having it in your hands Rid If you wanna check it out and get some really nice stuff printed. And I got for these 2 little pieces of paper, which is which I was really happy about.

and I probably got 30 emails from people, like, a day later. Where's my shirt? Where's the shipping? Where's rid

and then we had to pay, I think, an extra $800 than an actual QR code because of how long the IDs were. Rid Wow. That's interesting. So, what are we talking about? T shirts. Rid. Now we are. We're talking about reusability of of bags. I made sure I got the little the proper recyclability Rid.

like, hundreds and hundreds of shirts That you don't know if you're gonna sell it or not. Because, like, some of the, like, rid To hear hear you're set up here, it's very, very cool. Yes. I totally agree. Like, because as developers, we have the ability to You know? the international quotes would say grinder in our one of our coffee makers at the cottage, and that thing gets clogged rid All the time, and it doesn't do a great job at grinding the coffee. And this is like a stand alone unit, and it does such a great job. It's not super loud print on demand? Or it's called DTG, which is direct to garment. And, essentially, these are just, like, rid. Inkjet printers that you put a t shirt on, and it will print it to it. And they're actually, like, okay quality. It's it's gotten better. Yeah. Yeah. It this is not like your, rid Like, iron on that you're probably thinking about from, like, 10 years ago. They're actually pretty good to do direct to garment. Rid The reason I didn't do that is because, like, you see a lot of, like, you see a lot of YouTubers and even developers do this type of thing. For me, rid. It doesn't seem as, like I can just tell. I don't know if it's because of me. I can just tell that, like, all you did was upload a design and that you're selling it. Right? Rid. Yeah. You uploaded a PDF of your satellite to your your your drop shipping or your shipper company that prints these all up. They're printing thousands of these, you know, commoditized, Like, in a lot of countries, it was more than the shirt was even worth. It's just not worth it to the person.

tracking. And that that was a error on my end because, obviously, the UX was not clear enough that this was a preorder. Rid People are okay with it. Like, oh, cool. Thanks thanks for the update. I had to send an email out to everybody saying, like, hold your horses. But the preorder is frustrating because, rid. Like, you gotta sell it for a week, and then you gotta order the T shirts from the shipper,

for international users, it could be over a month, which is kind of frustrating to me. I like to have this stuff rid Immediately. Right? But, like, with with all the sizes,

should not be a problem on macOS, but unfortunately, it is. And because of that, I am using rid. Auto mounter, and I really, really like it. Alright.

I don't know why it would be bottled up. I got an app here, t shirts and hoodies and merch for rid. For bands all the time, and I really, really enjoyed it. That's what I did before I even got into web development as I designed t shirts.

and there has not been one time where I've gone to click ripped. On my NAS, and it has not been available, which to me was, like, actually a huge pain point because I'd click on it, and it would say cannot be found, and then I have to go to that network thing and then reconnect and then, very, very, very helpful. You know, when when COVID hit and everybody Trying to put, you know, stuff on their sites like this. I saw a lot of, like, Iframe drop in solutions or JavaScript drop in solutions like Snipkart, and I that rid is a much lower barrier to entry way of getting going with something like this where you don't have to write it all yourself, and you don't also have to buy in re 100% to a platform. Totally. Totally. So I dropped it on, on my website and or as I was sort of setting all this up, I I was like, okay. This is cool. Rid But, like, I thought that they would and I since learned that this is, like, an entirely separate thing. But I was like, why don't they do, like, the whole like, the printing of the labels? Right? some syntax merge here. I know a lot of people have been asking for it for a very, very long time, but I think the the most important part is that we wanted to do it

my NAS is kind of a pain in the butt To have it like, let's say I want my NAS to be connected always no matter what, wherever I am. Yeah. You don't have to click it in the sidebar of finder.

for you that solves a pain point in my life, another macOS app. This is an app that I think I paid for. It wasn't very much. It was on the App Store, the Mac App Store, and this solves a problem

Finder and then log in, and then Finder's like, drive cannot be found for some reason because it changes IP or something. So I I got a a piece of software, and it's Called auto mounter, all one word, and it allows you to set up a whole bunch of configurations Forward slash pro. Sign up for the year,

on Mac computers

drive,

that are stored like, network drives. I don't know about you, but, like, connecting to a storage

mounts of those drives to mount and when to keep them mounted and stuff. And you know what? I've been using this thing for a couple weeks now,

and external hard drives

and rules for which drives and which and you really just Take it to the next level by writing an application that's gonna take out all the grunt work for you, and it's really what being a developer or hacker is all about. I'm I'm I'm really pumped

Yeah. A lot a lot of issues there. So this

And I ideally, I wanna go something that's a little bit more recyclable.

The ones I got were recyclable, at least where I live. I just know that in some to get it working so they could scrape that.

rid They do not recycle that type of plastic. Mhmm. Yeah. And last thing you wanna be doing is dropping off a 1,000 plastic bags at the Trashy. You know?

I know some people don't like them, but those, like, biodegradable Because everyone's like, I missed it and whatnot. And My buddy who owns the the printing company says, like, we can pack them as well. So I might the logos, and I I would go 1 by 1. I would say, alright. This person ordered a medium black. This person ordered a large pink one. I realized, like, that's a lot of work. And it's also, like, the awful work where you it's mentally taxing 4 days rid. To 75 days. And it was really expensive.

ones.

Yeah. Yeah. Exactly. So, like, ideally, I'll go some sort I haven't I haven't researched how much it is and whatnot, but, ideally, I would go on, like, Some sort of, like, paper one

Mhmm. I I have a hard time spending almost a dollar on something you're gonna throw out. So I talked to my the guy who does all my stickers, and he said, yeah, we can do them. Rid. They rushed them because I needed them pretty quickly. I think it worked out to about 35, 40¢ a bag.

areas, and then each size and color had, like, which is Jeez.

women's extra small all the way to women's XL, and then there's 2 colors of of each one.

and trying to convert it into one of the piles. So I wrote a huge reduce statement, literally a reduce statement,

And that that's, like, the last thing we wanna do, and, honestly, we wanna we wanna make it something worthwhile, you know, something cool. Rid That was another thing I got it. Like, as soon as I had posted these, I probably got, like, 7 emails from people being like, is this sustainable? Is this good? Cotton uses a lot of water, rid. Asking all these questions, and I was like, I knew that would happen. It's the same thing with the bags. I knew people would say, hey. Using a plastic bag. So, like, I rid. I wanted to make sure ahead of time that I was, like, prepared for these people. First of all, I'm I'm a t shirt connoisseur, So what Snipkart will do is it will ping a webhook. Every time someone rid. Tries to get a quote for shipping when they add it to their cart.

And it's really fun, and I'm excited to do some syntax shirts as well.

you know, buy our T shirt rid you kind of stuff. So Yeah. Yeah. I mean, that that it would have been really easy for us to just to fire up the, one of those shipping companies, upload a logo, and then rid Ship out, you know, 800 different products with that logo just plastered on it however you want it, but I think we wanna do it in a little bit Like a baby onesie and a thong? Oh, yeah. Right. Yes. Yeah. Rid Syntax on it. Right. Sure. Exactly.

the lead that's been buried here. I think that we'll probably end up doing, are you team Scott or team Wes? It's pretty neat. Wes, you've used Prismic before. Do you wanna talk a little bit about it? Yes.

Yeah. Yeah. I think that might be the,

high quality, good merch. We don't wanna be just shoveling,

but then there's also, like, a tiny little relay that will switch on and off. And If you hook up the relay to something else, then it would work.

Rid We could get some little mechanical thing to turn the nozzle.

I I we have one of those, like, water filter caps on our our, You know, normal water for, like, a super nice filter where you had to have it drilled in through or whatever, but it's it's slower. And so I'll put my, like, giant

turn it on for, like, a minute And then have itself turn it off, so you have to turn it on. It's not a sort of, like, wait there. And I'm already, like, thinking, okay.

to shut off shut off the water line or something, whatever that overflows.

How could I hook this up to a, Like a smart plug or something so you can Yeah. Okay. Gargle. Turn the coffee grinder on for 1 minute, and then it will grind the amount that you need, Snipkart has the ability to rid. Stop sales after And then I would get the quote from the custom shipper And then just hot potato that on to Snipkart in the format that they they were expecting. And that worked out pretty well. They Snipkart has this whole webhook system.

coffee grinder, but I might do it. Let's just open it up. Yeah.

Oh, so awesome. Check it out. Baritza

That happens all the time in our household because That is just something that I I'm I'm gonna get, like, a a smart water sensor

And required.

rid Like, some coffee grinders can be. The only thing I don't like about it is that you can't on the front. And I was like, if I crack this thing open, I could probably run little wires I ended up using QR codes because That would group them by than chitchat, which is really good. Rid But in order to hook up with these, like, custom shippers that run the border with your packages,

it Oh, yeah. I and I think the last time I did a couple years ago, it was only, like, 50 or something like that. So this is This is just nuts to me, and it really of looking at different shopping cart solutions. I I first, I tried Shopify, sometimes the shipment information would not come back. Rid. So it'd be nice to have, like, a queue that would after 2 minutes, it would go off to the shipper and get the info and make sure that's all updated.

Okay. Yeah. I don't I don't think you could I know.

and and that went pretty well. But I wanted to, like, on every single size just so you have a couple extra, because I felt properties in it. Right? Because you've got billing address, shipping address, invoice number, re Quote tracking number, tracking URL. There's just all kinds of properties on an order that need to be updated. And having to reference the documentation for those is annoying.

Go down the path of of doing something, like, nice stuff. Because when I was a kid, I did some of them took 3 seconds. And even after 3 seconds,

So let's talk about t shirts now. I've been wanting to do T shirts for myself as well as we wanna do some syntax T shirts as well for a long, long time. Rid. And I've never like, I don't know. Maybe 4 or 5 years ago, I did, like, a tea spring, by 1 shirt,

the entire stack that we had here. The the front end, I said, was Snipkart. My my personal website is entirely in Gatsby.

the actual, like, physical rid physically and they were pretty cheap. I think, like, 3¢ each. Rid. The problem is that they came on a roll, and they would all curl. So it's very hard to just have a stack of things that needed to be shipped. Rid. So I ended up buying I needed to buy more anyway. So I ended up buying a box of 5,000.

rid To me, I I think I sold, like, 20 LevelUp Tutorials T shirts when I sold them.

Mind blowing. Mind blowing to And at the end of the day, you're picking up skills that, while are going to be targeted for this specific type of work, are Still going to be, like, really interesting skills. Like you said, you've got to write more TypeScript than you've ever, and you got to write the types for,

appreciate all of the automation that I I put into this this thing. So re Let's break down And this barcode scanner is awesome.

mailing of the thing, you're sorta on your own to print the labels, rid Pick and pack, put it in, get it to the shipper. All that is is yourself. And and that's the part that is is tricky for me because this is not like An Etsy shop where I'm selling rid Store the codes on the scanner itself until you get back to the computer.

syntax.

got adapters for whatever you're working in, whether it's Gatsby, React, or Vue, or PHP, Yeah. Yeah. And, And this is another Wes complains about Canada,

Sick. Cool. So okay. So we we got past the the scanning bit, which is Honestly, really pretty fascinating that the, the webcam solution worked, but it wasn't great, so you went with a commercial scanner. And when any particular, like, issues that you had with the types of scanners. Like, do all scanners read QR codes at this point? I was thinking that a barcode scanner wouldn't read a QR code. Is it like a special kind? Head on over to syntax.fm rid process, I wanna say, is that the Westbought's process for doing anything is like, alright. I'm gonna make some T shirts. How Can I use my skills and talents? My my I've acquired a unique set of abilities or whatever he says and taken, projects to scratch your own itch. With code, you become very powerful. You become rid The,

you can pull this stuff in on the front end. You can pull this stuff in at build time if you're doing a static site like Gatsby.

syntax is a headless CMS that makes it super easy to build a website

the UI and then it would it would send the email out to the user giving them their their tracking number. Question.

Well, not really voting because it, like, takes you to a a link, but it's like a a little poll. Like, and DQ is the

the the level of craft that goes into it is going to be higher, and I think that comes through. Rid Totally. And I think, like, literally, everybody is doing this now. Everybody's doing merch right now. Yo. Let me let me take a a quote from the office and And slam it on a T shirt or something.

Overly produced crappy products, and and you you said they're gotten better. But at the end of the day, you get some crappy mug with a logo printed on it or something. It's not I don't know. It's it doesn't have that same, like

when I used to work at the record label Ghostly Ghostly International,

is

ghostly vans or something like van shoes or or something like that. They're these rid Very crafted products, and the

not something that They just rush through the process of, like, they have custom

or to go to the printer and pick up all the shirts.

And then there was rid. I brought it all back to my house,

scaling up is usually not as hard as this. But It was, like, 30 boxes of, like I think I I did. It was, like, 800 pounds of T shirts or something like that. Mhmm. I did the math on it. So I had a I had a rented trailer to go to the shipper And I was like, I would really like to do some of my own sometime. So that's what I did. I, for Prismic is really good. Marketers love it You can just log in and start managing all of your data. Tons of really good features. They have Imgix, IMGIX,

a part of it. This I was not prepared for how big that would have been I would have to rent a a trailer again just to get that out. So the trailer was just to get the boxes Speaking of so I did the first 100 as sort of to get the kinks out of the system, and And I'll talk about the whole system in just a second. And then I flipped it over to a preorder saying, okay. I'm gonna sell this for a week. Go ahead and buy your own, And then I will I will ship them out and whatnot, and they ended up selling 1700, for my environmental impact, but reusable diapers It's so just not doable. It's not doable. Yeah. We did it. We bought them all. We did it we did it for our first one for the first, like, 8 months or something. Oh my gosh. And then by the 2nd 3rd, we're like, man, this sucks, but it's tough. Like, we have the sprayer on our toilet and everything that is rid. Disgusting.

So that's the whole, like,

key. So I didn't have to do any sort of, like, react barcode scanner Locally, we have green bin, which I'm pretty sure I'm not sure if you can throw them in there or not. That's the thing about This, like, environmentally friendly stuff part of it. And then, like, the 2nd part of it was the actual, There's a possibility that you are you will oversell.

a couple seconds to read it, it was from, like, a split open wise plug. Because, like, on your plug, there's there's the actual two forty, shipping Alright. Thanks so much for tuning in. Catch you on Monday. Peace.

Ruin your life. Yeah.

the ID from Snipkart was really long, like 40 characters. Mhmm. And usually what you do for very short things is use a data matrix. It looks like a QR code, but it's much smaller.

Rid. I realized really quickly that that QR code scanner, even if it took, like, Maybe that yeah. Yeah. You can get, like, little turners, yeah, that you could rid Set it to turn off after a while. Because with this one, there's Mhmm. Which headless CMS, Century,

You could have done, like, a club air horn rid Like, we used to do these, like, very specific one off drops of products, and you could always tell that the thing that they're selling

It does every kind of barcode you can imagine, data matrix, the regular one that you find on your food at the store.

Rid. And everybody's like, yeah. Absolutely. Just people will understand.

rid and whatnot. So I initially hooked it up to Canada Post because that is our main shipper here Ten variations? 24. Because there's extra small all the way to three XL, if you wanna learn a little bit about JavaScript, React, rid Gatsby, Next. Js, everything I talked about today, if you goof up And with this, like, I rid Sold all the T shirts. I very clearly said on the first sentence, this is a preorder, The selling of the stuff is not really all that hard for me. It's the actual, rid. What it does is it goes Snip card has its own little scraper, and it goes and scrapes your HTML

because everything in the US is way better.

there's no integration with Snifcart or whatever. So In order to do that, you have to set up a webhook with Snipkart.

So ChitChats Then your garbage also gets gross as well, because, like, there should be not there should be nothing gross except for a diaper Yeah. In your green bin or in your garbage. Which is pretty gross. Yeah. That's gross. Yeah. And some people don't even do that, and that is not rid. That would basically just glue together Snipcart

And they'll just drive it across the border for you the same way I did the stickers as as well. So you can print US postage, and then you give it to them. They have little drop offs in Ontario, and then they'll just put it on truck, run it across the border, and then throw it in a mailbox in at USPS. So there's that one. And then I also found out there is and I was, like, looking in the bag. And And I was like, oh, what they do is they just built right in. So you If you upload an image, you can do all of the compression and resizing on the fly. You don't have to build a secondary service for that. Check it out. Prismic prismic.ioforward/ It was so nice to be able to just I do.

that will rid Basically, take your package

So I quickly found out had a couple friends messaged me and say, hey. You should check out this thing called ChitChats.

So I thought I asked on Twitter. I was like, hey. Like, should I sell these even though it's ridiculously expensive to ship it internationally? but they're they're awesome quality.

which does the same thing. It's a little bit cheaper for USPS, but it was way cheaper and The Stallion, the custom shipper.

is a company whoever was packing it ripped it in half. Rid. You took the packing label, looked at what they wanted, and you got well, I'll talk about that in just a second.

The next part is

post it either mostly via USPS, women's sizes only sold, like, 1 or 2 per size. Right? And it's it's hard to know exactly how many That's a hard one. Need to sell. Rid Preorder in that regard is nice. What else here? Gotta over order a few of each, I learned.

and for international because the thing about Used style components, and you can use print CSS just to give it a a width of 4 inches and a height of 6 inches.

The it'll ping my server, and this is a Next. Js rid Server, I use API routes in Next. Js for all the server side stuff, and then that pinged it with a a payload of, rid. Here's how heavy it is. Here's how big it is. All that in here's where the person lives. And then I had to write the code bags printed with my logo on them. That was cool. Where'd you get those? Yeah. Yeah. Those are from China. I got my rid. I went on, like, Sticker Mule does them Mhmm. But they were, like, 80, 90¢ a bag or something like that even when I was ordering, like, 25100.

it sends a webhook to your server, and then your server can respond with additional data if it's needed. Also, these shippers, they also take care of all the customs declaration, which is really nice. So it will automatically generate the custom stuff, to check if there are any accessibility issues on your website because you probably didn't set out to build an inaccessible app or rid saying that is not available to people with disabilities, but you may have accidentally done it, and you need to be testing your app with the axe dev tools.

Mhmm.

And then I would scan the label of the actual shipping label, have everything immediately That's annoying.

and it would go boop.

Did you program the noise that it would make, or was that just sort of so Yeah. Did you what kind of work went into finding the right sound that you use for that? I, I recorded my own. I just booped. Yeah.

Rid The way that Snipcart works is that when you just pop the button on your page, it has the price and everything. And then when someone tries to buy something in Snipcart, And, like, honestly, this is how I people are always like, how do you not burn out? Like, this this is how you not burn out. You do fun projects like this. Right? You rid like this. Right? You get some t shirts. You build a write a bunch of code. You try to automate the stuff. At least to me, this is this is very interesting work to me, and it's really fun Nice. No. I that was really fine alone because he used, Like an audio tag with React refs and you the play method. There's a lot of neat things.

and checks that the person didn't monkey with the cost. Because rid. I got, like, 6 emails from people who've been, like, hey, Wes. I you can change the price of the t shirt to 1¢, and I can add it to cart. I'm, like, yeah. You can. But, like, you you can't actually buy it Because Snipcart goes and verifies that the HTML is there. It was a little bit of a a bumpy road getting started because in order to test this, it needs to be That would be great.

But once they got all the the development workflow working, it was it went pretty well.

interactions with Snipkard because I think those types rid. Of tools are really fascinating. The barrier to entry with ecommerce is so

obnoxious sometimes. So having, like,

a style way to integrate that, I think, is

They sell the thing, and they integrate with,

all of the I think there was, like, something like 30 massive garbage bags full of T shirts. Rid The shipper yeah. Shipper came luckily, a shipper came to my house, picked them all up because

in the future,

So re Bunch of common questions I got from people, like, why did you do this yourself? The thing is that it's a fun project. This is how I learn. I wrote rid Thousands of lines of TypeScript, more than I've probably ever written before.

go that route sometime

from the the printer to your house?

rid. And then I needed to actually save those as a like a JPEG or PNG somewhere.

So those got put into Cloudinary.

any size label you want up to, I think, Four inches wide, and that's why I got it. I got these standard 4 by 6 labels. Is it thermal? Not sure that's worth the extra expense, but I've gotten really into composting over COVID.

And then I made a packing slip with just HTML CSS. It's it's in React. So for every order that I Have I literally just went into React and mapped over it. Oh, that's fun. Yeah. And then you create I created a label component, and then inside the label component although that is a that's a pretty good solution for people. Especially, like, if you're not sure that you're gonna sell any, rid. You can sell 1, and they're gonna print 1 for you. Right? There's no risk there. But with with my type of thing, color and size, bottling it up, do you have any sick pics for me? to the printer maybe shorted them. Maybe the the printer shorted me. Maybe I packed

re Error exception and performance tracking and DQ accessibility experts. I got some really cool accessibility tools. Talk about them partway through the episode. With me, as always, is mister Scott Talinski. How are you doing today, Scott? Hey yo. Hey yo. Hey yo. Hey yo. I'm good. It we had, like, a surprise snowstorm. Everybody loves talking about the weather. You know, I'm doing good, man.

Just writing a lot of fun code. I I implemented a bunch of loader stuff. I talked to you a little bit about that a Couple maybe it was last week even in our GraphQL API, and I've just been, like, doing all these nonstop performance

little things here and there on the server, and rid Loving it. I'm feeling, like, very,

by Prismic, that's there.

being able to pay friends, family, people in the community

figured out is that I'll have a system, and then I will be able to give the system to somebody else Mhmm. Locally. And ideally, it's rid family or somebody in the community local that I can pay. And I, like, I feel really good about rid Forward slash syntax. And, again, that's got a coupon code syntax for 20% off. Check it out. We'd love to hear what you have fixed on your website. Tweet us as syntax

Yeah. Yeah. I wanted people to, like, actually like this type of thing. And The other question I got is, like, why not use

like, Shopify powers some of, like, the biggest stores on the Internet. So, like, obviously, they could handle my Couple 100 T shirts.

whatever company? And and Scott and I, we've had I think we've had a couple calls with Oh, yeah. Companies that will will do this. Rid. They will source it. They will print it. They'll put it on a pallet. They'll pick it. They'll ship it, and they'll keep most of the money. Yeah. So you you can get companies that will do all of this. And what I found is that they also almost all of them say we only use our suppliers, And that's another thing I found out is, like, how do you know if you have a label in your hand, how do you know what that person ordered? Right? Because, They're not made in New Zealand, though. They're made in, I think, Pakistan, Is it Pressure based, or is there actually a pump under the sink? It's pressure based.

that's why I don't use a company like that. And then the other question is, like, why not rid Shopify, I told you kinda earlier. But, like, people that sell and sending out the emails and and rid Managing orders and all that stuff. I wanted all of that. So I ended up settling on Snipkart, and

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos. Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Today, we've got an awesome show for you rid about selling and shipping T shirts. I went down this rabbit hole of trying to sell a couple T shirts, and I ended up creating an entire logistics system, Rid. Quite honestly, you just flip this thing on on your browser, and it will just give you a whole list of things and how you can fix it for your rid your own, that way, it get really annoying.

My wife got 1, and I threw it in the I threw it in the garden for the entire summer. And the thing was shredded tell you what the possible options are and and hit errors before you actually hit the browser.

Rid As if as if that could be like a hobby. Yeah. Not like personally composting, but, like, how much how many things can I compost?

by the end of the summer. So Do you feel that you have a compost bin and stuff or what? At the cottage, we do have compost bin.

Like Oh, yeah. Yeah. Instead of just, rid It's just like composting as much as possible.

we do tons here because we have this we have a really good green bin program here. Yeah. We do too. Yeah. But we have to pay for ours. Do you have to pay for yours? No. No. It's comes every week, and they pick it up. Man, we need to pay for that.

And the dish the washer smells. Anyways,

some place I wanna like, because I was like a that was like a very big thing is The reusable diapers and stuff when people are having kids and, like, I am very sorry

when I I had to print the 100 up front. I knew we could we could sell those at the other day. I have a hard time buying the direct to garment stuff. Like, a lot of the times, if I'm buying a direct to garment thing, it's to support rid The creator of the product rather than to be, like, excited about the product itself. So very perf and productive happy. So, you know, it's always good to be in that state of code where you're feeling like, look, the code you're you're doing is having a Very positive direct impact on what the users will experience on the site. That's just you know, that's where I love to be, so I'm feeling good about that. Awesome. Awesome. I am alright. Well, let's get into it now.

Sentry.i0.

and you can you can quickly do that. So if you're like West and decided to go off and encode a bunch of this stuff yourself, you're probably gonna want some error and exception handling tracking Code on your site to, keep you updated in case you're getting 1,000 messages that say something in the form isn't working. It's probably best To be able to jump on that as soon as possible because if you miss out on a 1,000 sales, that's quite a bit. So I'm talking about [email protected].

It's not gonna work. This that's not gonna work. So I was looking at my wife. My wife orders stuff online, Encore it's like a keyboard. It registers as a keyboard on your computer. You ready. Scan it. It types in the thing and then hits the enter Publicly available. So, like, the developer experience was I had to pay for engrok that was really nice to be able to group them. And at the very end, we had a whole of what I call multiples, meaning that this person ordered multiple T shirts, multiple sizes,

Packing slips. Like, what goes what goes in the bag? And I went on, and what everyone was showing was like, Oh, today, I'm printing all my orders, and they would print them out on their, like, inkjet printer. And they'd have a bunch of pieces of paper, and then they would put the label on top of it. And I was like, this is 1700 shirts.

Peace.

for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

rid. Fetching data with TypeScript and doing custom stuff, and I really saw the benefit of TypeScript with these things because, like, an order from Snipkart has maybe rid. 50, 60, 70 super helpful for fixing it out. They've got a new plan. The pro plan, I've got an enterprise, a pro, and a free plan. So you can try it out for free. Absolutely. It's it's rid. The free version is actually pretty good. But with the pro plan, you're gonna get automated testing.

Rid So once all of them were were sold, I sorta needed a little bit of a dashboard in order to see the status of all the shipping because SIM card gives you a dashboard of all of your orders. But if you wanna see, like, what's the status of all the shipping and whatnot, I had to build a secondary little dashboard with Next. Yes. And this is really fun because this is, like, the first, like, huge website or not huge, but it's it's a pretty big piece of software. I I I think I probably worked on it for 2 weeks straight, and I wrote the entire thing in TypeScript. So it was, like, the first, like, I got really into

It's called fanfold labels where they're they're flat.

rid I added my name and and some, like, fun stuff because there's no ink. So you can print as much as you want on the piece of paper. So Had a little bit of fun with some of the design on that thing. It's just black and white. That's all that's all you can do. It's really great, though, thermal. I mean, that that is a huge thing. You would imagine that if you had a normal rid ripping through all those labels, you'd be pretty annoyed at how much toner you'd have to replace.

Then I had to rip them off into sets of 2. And then when it came time to actually packing these things, event.

I was surprised at how cheap it was. Like, initially, I bought these labels on, like, a it looked like a roll of toilet paper, logistics

rid Automate and process and do as much as we can to make things as streamlined as possible.

And that's really what this whole thing was is rid. Is putting the time in to write the code so that we can do this in the future many times over, and it won't be as much work to to do it. So rid. What I ended up doing is I ordered 50 of each t shirt from my buddy, and I got them in a box in my office. I said, alright. I'm gonna sell these things. So I went down the rid. Rabbit hole going down, I first I just took a old webcam and and used a rid QR code reader No. No. Not really. So And even then, people were like, where's the four XL? Where's the tall? Where's the super skinny? Like, there's, like, all of these things. I'm like, oh my gosh. This is, Like, there's 24 different types of t shirts here.

You didn't pass the light through a prism?

I'm talking about Prismic at prismic.ioforward/syntax.

That's prismic 2 liter water bottle underneath it, and I'll start to fill it up. And I'll be like, this is taking forever, and then I'll go do something else because I'm ADHD. And then Courtney will walk into the kitchen, and it's been overflowing water for, like, a minute. And she's just like, oh, come on.

Rid

dot I o. I started spelling things out because I realized I talk really quickly sometimes, and, people thought I was saying love love tutorials for a long time. So I'm gonna say re prismic.ioforward/

No prisms here?

scan.

Maybe top 10 worst ad ad transitions I've ever done. I wanted to move into one of our sponsors today, which is Prismic. Oh god.

to It's really, really cool. And, you pop over to to see this. You can even do some little, like, there's like, like, voting.

light

Other things is queues would have been good here. So some of the Shipment, when you bought the shipping, the So with more on DQ is Wes. DQ Systems, the trusted leader of web accessibility and makers of the axe dev tools. This is a tool that you can use rid so I the t shirt we use was a really good quality. It's sustainably sourced. I looked at their whole supply chain, things like that. Sometimes when you you get these one off t shirts, they're not very good quality. They go through the wash ten times. What was the name of the the cotton plant that the cotton came from? It's called a oh, They oversold by a couple on each.

even though that I wrote the whole thing in TypeScript. So I'm gonna go through kinda how it all worked and whatnot, and it's lots of little interesting tidbits in there. I really enjoyed this project, so Thought it would be interesting to share that with you as well.

if you have only a limited amount of stock and 2 people check out at the exact same time, I was gonna say something, but I was like, I can't think of anything. Let's just It's your existential to expediate them on a pallet way to approach this type of thing. And I really liked it because I already had westboss.com,

That's the the key there.

when I sold the first hundred, the international The little shipping label that has all the customs declaration right on it so you can you can post that to other countries all around the world.

you sell so many. If 2 people buy the same thing at the exact same time, there's very little you can do to stop that. And even rid. If you go on, like, a, like, a big drop that Shopify is powering, like, I specifically watched a couple Shopify stores that do huge sales, rid. They still throw you in a queue because

with very interested ears for this one because what's funny about the West Boss

And we saved 14 hours of labor

So logo printed on them and everything like that. Now the next thing was The first 100 that I did, I just printed off all of Anytime someone buys something or updates something or whatever, major

you had to run around and pick the thing, and I did the math. It took about 30 seconds to go find the shirts, the company is called AS Color. It's a New Zealand company.

The first a Couple hundred. I think 400 people got stickers thrown in on the orders. That was another thing I needed to make very clear on the order.

Without having, like, a a giant massive spreadsheet in front of you? Because that's probably what I would resort to. Rid Yeah. That's and, like, I went on YouTube and I searched all these, like like, what do small businesses do? Packing labels or or packing. They're not like packing labels, packing slips. Yeah.

rid Like and there's probably people listening to this that work actual online source. I mean, like, yeah, you dummy. That's that's, like, a very standard thing. But, like, re Very new to ecommerce here, so this is new to me. And I was like, okay. But, like, the shipper had this option where you could print all your labels, but I was like, how do I line that up with, like, what to put in the bag when they actually order it? Lots of really neat stuff you can do with this. So, and it had tons of, like, features on it, meaning that, like, you can I just put the box behind the label maker, and it just pulled them out of the box as it needed them. And they laid nice and flat, and it was under 2¢ per label. So for every order, It was about 3 or 4¢ And when the thing submits, I did a little bit of regexing to figure out what type of barcode it was scanning or web Bluetooth or anything. Rid. It's just the input box and a on submit And then you you actually stuck the shipping label to the front of it. The next thing that needed to happen was actually marking these things as shipped as well as batching them. So for the first one that I used was called

Exploits in in creating new fun projects like this. Because most of mine are like, oh, yeah. I made an app for for dancing. You know? But this is pretty a lot more substantial.

a 100 packages at the shipper. You have to And use that as, like, sort of a makeshift scanner. And then what happened is ripped. This is so cool. I know. You would print a batch label. You'd scan the batch label. It would go to a page for that batch, is nuts.

Chit chats, and you needed to batch them into bags, meaning that you can't just drop off Yeah. Yeah. Exact oh, that's another thing for me is I have a rule, and it's no funny rid T shirts.

Drop them off in a bag. They have to know what is what shipments are in a bag. That's called batching it. So what had to happen is that rid. On every single label, I put a QR code with the, the ID of the shipment.

2 APIs, the shipper rid when it comes time to do you think there was at the end of the day? Rid And then there's it's very hard to stock, and you can create your data types. You've heard me say this before. You get your relationships. You can relate data to one another. Re But the really cool thing is that then you can pull it into whatever front end or back end you're using it. It's just a GraphQL on a REST API. And then they've Today, we are sponsored accepting credit card payments is awesome. We have a and we were gonna pack it. And so the idea is people are probably listening to me. Like, Wes, what are you doing? Like, rid. Packing t shirts into a bag. Like, you're a web developer. Like, why are you wasting your time on it? So the idea behind getting all of this And then I looped over each item in the order and made it very clear as to what was in that specific thing. And I added

in the actual store, and those things needed to talk to each other, and that's that's where the custom code came in. Then when it came time to actually shipping these things, rid. I needed Java, you name it. Rid. They have lots of really good example code where you can I call it sourcing your data, where you start to pull in the data into whatever application you are using? Rid. And that's really cool because for that specific stuff.

but

to do 2 things. You need to print all of the shipping labels, and then you also need to print all the packing labels.

I was really happy with it. I know they sponsored us in the past. They haven't done in years, rid I was actually really happy with how all of that ended up working out. I'm happy to hear that you had positive Yeah. It's a thermal printer, so there's no ink. It prints super fast. So I built this thing in React where it would pull in the label from the actual shipper, and, actually, I used rid Cloudinary to store all of those labels because I I pulled the label from the shipper. The shipper gave you the label as base 64, much cheaper

And I said, alright. Let's go let's go down the the route of of trying Snipkart. So I checked it out, and the way that Snipkart works is that you just drop it onto your website, And then we packed up the whole thing. Rid. We put them into all the bags, and then the shipper came and rid. It was awesome, but the problem is I didn't realize that you had to set up a Shopify developer account. So I just set up, like, a regular Shopify account, rid. And after a month, they start charging you for it. Before I knew it, I was, like, a month and a half in, and I was, like, $60. I was like, rid. This is annoying, and you can't, like, make the shop private after you've you've made it live. So I just shut the whole thing down and was like, alright. What else is there? So No shade on Shopify. It was just that I I didn't know how to to do it the proper way. And I actually didn't feel like building an entire different storefront because I wanted to integrate it into my website as much as possible.

rid And I just wanted the whole back end of

Before we get into lessons learned, re One company that is certainly going to be teaching you some much needed lessons is our sponsor DQ,

DQ is Wes. DQ Systems, in order to make coffee. But do you do you know what I do? This is actually related.

logistics on top of Shopify

Rid. So DQ's axe dev tools is a browser extension that helps you find and fix accessibility bugs with very little effort or expertise Other things, nobody read that it was a preorder. This is a really frustrating thing in that. I was like, I I really don't like doing preorder for my courses And I wasn't able to go and source my own stuff. Like, I wanna do, like, skate decks at one point. And I asked them, like, hey. Can you do skate decks? They're like, rid.

in terms of How to quickly pack them and pick them. So you're either gonna be still writing code for that type of stuff or spending money on rid Logistics software that hooks into your existing Shopify, so

you owe something to somebody.

you can turn it on The funny T shirts? Shoot, Wes. All of my T shirt ideas are gone. They were all funny. Yeah. I don't do funny funny T shirts. Anyways, For example, if you if I wanna do anything that is outside of just slaps something on a T shirt like, for example, the pink T shirt I did, it was tonal ink. You can't do that with direct to garment. So you'd have to match the pink that the thing prints out on top of it, and it wouldn't look exactly the same. And, eventually, I wanna do re Embroidery or things like that. We wanna do, like, syntax hoodies that have, like, the syntax logo embroidered into it. I wanted to put stickers with my orders, things like that. Rid. And, also, at the end of the day, you can make more money if you are selling the level of shirts that I'm doing did here. You can make more money doing it yourself. So that's why I didn't use Direct to Garment, to do this type of work. But because it was the 1st time that we did it, we're still figuring it out. And because it's COVID, you I couldn't necessarily just, like, Bring a whole bunch of friends into my house to do this type of thing. Well, also, you're gonna realize, like, a bunch of little things in the process, like the fact that the QR code was rid Too small or too slow. Yeah. So, like, little things like that that you're able to adjust and fix. So that way, by the time you are giving it to somebody, it's, like, a pretty dialed in rid process. That's the whole point. Yeah. You just want to be like, alright, this is the whole thing. Get a couple friends in or or whatever to to do it. So, obviously, I did it all myself this time, which was rid A lot of work. I got Bharatza actually getting shipping quotes The one that I like, I just went on Amazon and and typed it in and went through a few of them. And I wanted to make sure that I could get one that did, rid Like, 2.4 gigahertz because I always have issues with Bluetooth stuff on my computer. So, yeah, I went with that one. But this specific one did, like, 8 or 15 different types, or those So I had this dashboard. That dashboard allowed me to do things like filter through all my orders, mark things as shipped, re refetch metadata from the shipper. It's basically this whole dashboard didn't have a database. It was just gluing together So using TypeScript, I did have to create all the types myself. They since sent them to me from from Snipkart because I couldn't find them online,

It's just so cool. And you can turn it on, like, continuous mode rid. So that you put it in the, like, dock, and you could just, like like, you're at a is that sometimes they're not.

So I I think this is really, really neat. Yeah. This is real world. Yeah. Really real world. You could bottle this up and sell it as a service.

You're gonna get, intelligent guiding testing. You can test just part of the website if you want. Rid. You can save and export your results, But those people still have And they you have a button. And if you give it a button with all these data attributes on it, like data dash item price, rid DataDash item title, DataDash image. Like, you give it all the things, and then it would just give you a full blown shopping cart on your website, which is Really, really cool. So that's very much like the the jamstack But the data matrix ended up having to be bigger I printed off 2 labels that would sit on top of each pile. And that way, you could take a box of medium black ones and a stack of medium black ones and just go sit down and just do those ones. And you you know that this person for sure ordered 1 medium black. And you're not running around looking through piles of everything because, there's a actual like, a physical switch on the side, but then there's also a little button that's just a contactor And it would it would do a couple of things. It would add that shipment to the batch. It would go into Snipcart and mark it as shipped, in Canada. And the thing about Canada Post is that it's rid Ridiculously

website. I've run on Syntax website. I've run it on mine, and there's a whole bunch of little things that are 2 T shirts done, and I was thinking, okay,

rid thanks so much to DQ Systems and Axe DevTools for sponsoring. So now that we, got our lessons from DQ, ready. Let's talk about the lessons that you learned in this project here. One thing was

fulfillment, and I guess it is, like, the Accepting credit cards and whatnot and and sending tracking numbers and fulfillment and and shipping them and customs and all that stuff is rid. Is a big overhead, so it's not as easy as, oh, just print a few and sell them, and I'll I'll ship them out. So what I did is I rid I sort of went down the rabbit hole of trying to figure out how to sell it and and ship these things. The first designs are really, really simple just because I wanted to get all the kinks out in it. So the first one was the black T shirt with a tonal black print and a pink T shirt with a tonal pink print. And what that it means is that They just use clear ink on them, and it's just like a darker version of whatever it's it's screen printed on, which is it looks pretty cool. Yeah. I'm gonna be, listen pretty with,

a print shop here in Hamilton called Whitley.