Selling and Shipping T-Shirts with TypeScript

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

Today, we are sponsored by Prismic, headless CMS, Century, 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, 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.

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

I am let's get into it.

I was gonna say something, but I was like, I can't think of anything. Let's just It's your existential

I am.

I am. I am.

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, and and that went pretty well. But I wanted to, like, Go down the path of of doing something, like, nice stuff. Because when I was a kid, I did 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 I was like, I would really like to do some of my own sometime. So that's what I did. I, went to my buddy. My buddy runs a print shop here in Hamilton called Whitley.

Rid If you wanna check it out and get some really nice stuff printed. And I got 2 T shirts done, and I was thinking, okay, The selling of the stuff is not really all that hard for me. It's the actual, 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,

with very interested ears for this one because what's funny about the West Boss 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, 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

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 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, of looking at different shopping cart solutions. I I first, I tried Shopify, 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.

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 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 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 way to approach this type of thing. And I really liked it because I already had westboss.com, rid And I just wanted the whole back end of accepting credit card payments 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 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

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 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?

They sell the thing, and they integrate with, a bunch of different shippers. Canada Post, USPS, FedEx, UPS, all of those big ones, they integrate with them. But, when it comes time to the actual, like, physical 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 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 Because everyone's like, I missed it and whatnot. And 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, which is Jeez.

Mind blowing. Mind blowing to

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

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 made me appreciate all of the automation that I I put into this this thing. So re Let's break down the entire stack that we had here. The the front end, I said, was Snipkart. My my personal website is entirely in Gatsby.

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, rid. What it does is it goes Snip card has its own little scraper, and it goes and scrapes your HTML 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 Publicly available. So, like, the developer experience was I had to pay for engrok to get it working so they could scrape that.

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

The next part is actually getting shipping quotes rid and whatnot. So I initially hooked it up to Canada Post because that is our main shipper here in Canada. And the thing about Canada Post is that it's rid Ridiculously expensive for anything.

And this is another Wes complains about Canada, because everything in the US is way better.

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

So ChitChats is a company that will rid Basically, take your package and post it either mostly via USPS, 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 Another one called Stallion Express, which does the same thing. It's a little bit cheaper for USPS, but it was way cheaper for international because the thing about the international shipping was that the international quotes would say 4 days rid. To 75 days. And it was really expensive.

Like, in a lot of countries, it was more than the shirt was even worth. It's just not worth it to the person.

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? Rid. And everybody's like, yeah. Absolutely. Just people will understand.

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.

That's annoying.

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 much cheaper 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, there's no integration with Snifcart or whatever. So In order to do that, you have to set up a webhook with Snipkart.

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.

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 rid. That would basically just glue together Snipcart and The Stallion, the custom shipper.

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.

Anytime someone buys something or updates something or whatever, 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, 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.

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

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, but It was so nice to be able to just have everything immediately tell you what the possible options are and and hit errors before you actually hit the browser.

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 2 APIs, the shipper rid 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 to do 2 things. You need to print all of the shipping labels, and then you also need to print all the packing labels.

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, 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?

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.

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.

It's not gonna work. This that's not gonna work. So I was looking at my wife. My wife orders stuff online, and I was, like, looking in the bag. And And I was like, oh, what they do is they just 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,

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

Sentry.i0.

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? 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, you wanna be aware of any of these things as soon as possible, especially if it means money coming out of your pocket. So rid As always, head on over to century at century dot I o, coupon code tasty treat. Thank you so much for Century for sponsoring. Read. Alright.

So I ended up buying this little label printer. It prints 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? 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, rid. And then I needed to actually save those as a like a JPEG or PNG somewhere.

So those got put into Cloudinary.

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

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

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

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

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¢ for these 2 little pieces of paper, which is which I was really happy about.

Then I had to rip them off into sets of 2. And then when it came time to actually packing these things, 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.

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 Chit chats, and you needed to batch them into bags, meaning that you can't just drop off a 100 packages at the shipper. You have to 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.

I first I just took a old webcam and and used a rid QR code reader

Mhmm.

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, And then I would scan the label of the actual shipping label, and it would go boop.

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, and then it would it would send the email out to the user giving them their their tracking number. Question.

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.

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.

You could have done, like, a club air horn

rid Yeah. After 1700, that way, it get really annoying.

Ruin your life. Yeah.

Rid. I realized really quickly that that QR code scanner, even if it took, like, a couple seconds to read it, it was Really slow, and, also, it was on a cord. So, I went on Amazon, and I found a actual barcode scanner.

And this barcode scanner is awesome.

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

I ended up using QR codes because 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.

But the data matrix ended up having to be bigger than an actual QR code because of how long the IDs were. Rid Wow. That's interesting. So, 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 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 key. So I didn't have to do any sort of, like, react barcode scanner or web Bluetooth or anything. Rid. It's just the input box and a on submit event.

And when the thing submits, I did a little bit of regexing to figure out what type of barcode it was scanning Because there was batch barcodes and shipment barcodes, and then you just go ahead and hit all the APIs for that specific stuff.

So you would say that you used light to scan.

No prisms here? You didn't pass the light through a prism? 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.

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

That's prismic 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/ syntax is a headless CMS that makes it super easy to build a website 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.

Well, not really voting because it, like, takes you to a a link, but it's like a a little poll. Like, 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.

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, 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 got adapters for whatever you're working in, whether it's Gatsby, React, or Vue, or PHP, Laravel, 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 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.

Lots of really neat stuff you can do with this. So, the UI 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, 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/ syntax.

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?

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, and it had tons of, like, features on it, meaning that, like, you can you can turn it on 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 rid Store the codes on the scanner itself until you get back to the computer.

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

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 loved it. Like, what a fun toy to walk around. Boop. Boop. You gotta be careful. There's a laser in it, but 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, 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.

That would be great.

So that's the whole, like, logistics part of it. And then, like, the 2nd part of it was the actual, rid physically shipping a part of it. This I was not prepared for how big 1700 shirts would be, like I don't know. I do everything digitally, and 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 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, 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 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 being able to pay friends, family, people in the community 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 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.

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.

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 areas,

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?

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 or those I know some people don't like them, but those, like, biodegradable ones.

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

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 is that sometimes they're not.

Not sure that's worth the extra expense, but I've gotten really into composting over COVID.

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? Like Oh, yeah. Yeah. Instead of just, rid It's just like composting as much as possible.

Yeah. We 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.

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, 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

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

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.

And the dish the washer smells. Anyways, 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 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 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 Because you're just looking at something and trying to convert it into one of the piles. So I wrote a huge reduce statement, literally a reduce statement, That would group them by color and size, and then each size and color had, like, 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, like, you think, oh, there's a black shirt and a pink shirt. Like, how many variations do you think there was at the end of the day? Rid Ten variations? 24. Because there's extra small all the way to three XL, And then there's women's extra small all the way to women's XL, and then there's 2 colors of of each one.

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 know? So 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, 2 of of 1 or something like that. And when that happened, you had to run around you had to run around and pick the thing, and I did the math. It took about 30 seconds to go find the shirts, And we saved 14 hours of labor by sorting them and printing them together Mhmm. Which is nuts.

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.

And then we packed up the whole thing. Rid. We put them into all the bags, and then the shipper came and picked up 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 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

from the the printer to your house?

Yeah. Yeah. And, My buddy who owns the the printing company says, like, we can pack them as well. So I might go that route sometime in the future, But I just wanted to, like, do it all myself this time just to figure out what it is all worth and and whatnot.

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.

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 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,

label printers and different APIs.

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, you know, a whole package, basically.

So, like, That is what we're talking about when we're talking about projects to scratch your own itch. With code, you become very powerful. You become rid The, warlord of being able to hammer out some some really interesting code to solve any of your own projects, and I absolutely love, love, love One of my favorite things about being a web developer is being able to do this type of work. So,

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 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,

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, 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 is not something that They just rush through the process of, like, they have custom ghostly vans or something like van shoes or or something like that. They're these rid Very crafted products, and 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.

Yeah. Yeah. Exact oh, that's another thing for me is I have a rule, and it's no funny rid T shirts.

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, 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,

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

Yeah. Yeah. I wanted people to, like, actually like this type of thing. And The other question I got is, like, why not use 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 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.

No. No. Not really. So 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 like, Shopify powers some of, like, the biggest stores on the Internet. So, like, obviously, they could handle my Couple 100 T shirts.

But those people still have major logistics on top of Shopify 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 that's there.

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, and DQ is the DQ is Wes. DQ Systems,

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

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

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, website. I've run on Syntax website. I've run it on mine, and there's a whole bunch of little things that are 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.

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, 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 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

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

when I sold the first hundred, They oversold by a couple on each.

And even though Snipkart has the ability to rid. Stop sales after 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 if you have only a limited amount of stock and 2 people check out at the exact same time, There's a possibility that you are you will oversell.

That's the the key there.

Other things is queues would have been good here. So some of the Shipment, when you bought the shipping, some of them took 3 seconds. And even after 3 seconds, 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.

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 for the shirts, because, like, then you owe something to somebody.

And with this, like, I rid Sold all the T shirts. I very clearly said on the first sentence, this is a preorder, and I probably got 30 emails from people, like, a day later. Where's my shirt? Where's the shipping? Where's rid 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, 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, and then we had to pay, I think, an extra $800 to expediate them on a pallet 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 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, it's very hard to stock, 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, 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.

So out of there's, like, 1550 orders. Rid. Out of that, 5 of the people got a partial order because at the end of it, we didn't have the shirts, and 3 of them got refunded entirely.

Why? Who knows? The the person who's who sold the shirts to the printer maybe shorted them. Maybe the the printer shorted me. Maybe I packed rid the wrong size in a couple of the packages. There's, like, so many different points along the way where if you goof up by 1 shirt, then You don't have enough shirts at the other day. So now I learned I gotta I gotta over order on every single size just so you have a couple extra, because I felt 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.

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

Yeah. Yeah. I think that might be the, the lead that's been buried here. I think that we'll probably end up doing, 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 The right way. We wanna be producing high quality, good merch. We don't wanna be just shoveling, 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.

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 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, the company is called AS Color. It's a New Zealand company.

They're not made in New Zealand, though. They're made in, I think, Pakistan, but they're they're awesome quality.

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.

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.

Speaking of bottling it up, do you have any sick pics for me? I do.

I don't know why it would be bottled up. I got an app here,

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 on Mac computers and external hard drives that are stored like, network drives. I don't know about you, but, like, connecting to a storage drive, 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.

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 and rules for which drives and which 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 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, Yeah. A lot a lot of issues there. So this 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'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 Bharatza Encore Conical Burr Coffee Grinder. What the heck? How do you spell that? It's b a r a t zed a, And it is awesome. We have a 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 rid Like, some coffee grinders can be. The only thing I don't like about it is that you can't 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.

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,

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

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

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 to shut off shut off the water line or something, whatever that overflows.

Is it Pressure based, or is there actually a pump under the sink? It's pressure based.

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

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

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 there's a actual like, a physical switch on the side, but then there's also a little button that's just a contactor on the front. And I was like, if I crack this thing open, I could probably run little wires from, like, a split open wise plug. Because, like, on your plug, there's there's the actual two forty, 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.

I don't know. My wife probably wouldn't like it if I opened up our $150

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

Oh, so awesome. Check it out. Baritza Encore Conical Burr Coffee Grinder. Awesome.

Yeah. Cool. Shameless plugs. I'll shamelessly plug all my courses. Westboss.comforward/courses if you wanna learn a little bit about JavaScript, React, rid Gatsby, Next. Js, everything I talked about today,

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 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, generating SSL certificates, those types of things are giant pain when you're working on any of this stuff. So level up tutorials.com Forward slash pro. Sign up for the year, and you'll save 25%.

Alright. Thanks so much for tuning in. Catch you on Monday. Peace.

Peace.

Head on over to syntax.fm 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.