Getting Personal with Ecommerce, React, & the Static Web
Ecommerce depends on highly dynamic solutions personalizing experiences for customers from the price of a product to the total cost of that customer’s shopping cart. How can we leverage React and tools like Next.js to bring that dynamic experience to the static web? In this talk, we’ll explore the challenges of ecommerce in a static world. We’ll talk about what tools are available to us and how we can take advantage of them to build dynamic web apps with a practical example of a Next.js app.
Want to learn how to create your own online store? Take the course here on egghead.io with Create an eCommerce Store with Next.js and Stripe Checkout.
Transcript
Colby Fayock: [0:00] Hey, everyone. Today, it's getting personal. We're going to talk about Ecommerce, React, and the Static Web. Who am I? I'm Colby Fayock. I'm the one who [indecipherable] run over there. I work with the dev community as a developer advocate at Applitools. You can find me pretty much anywhere on the Web by just googling my name as I'm the only one in the world.
[0:20] Let's look back a little bit over a year ago. It both feels like it was 10 years ago and just last week. We were able to safely go out to restaurants. We can meet up with our friends and family. We could even grab a bite to eat alone. I don't think any of us expected that 2020 would be the year that we would be in a pandemic.
[0:38] I know I expected 2020 to be the best year ever, but that's realistically what happened. Stores and restaurants started shutting down because they couldn't support the decline in business. I lost my favorite Chinese restaurant in Virginia. I was really hoping to get it one last time before I moved up to Pennsylvania.
[0:55] Luckily, some restaurants were able to sustain themselves. Between apps like Uber Eats and Instacart, we've been able to attempt to have normal lives but at home. Restaurants have also attempted to offer curbside pickup for themselves, but this can be hard for business owners, especially if they're not used to fulfilling orders this way.
[1:13] Because we have options out there like DoorDash and Uber Eats, these restaurants could quickly start accepting orders online without dealing with the infrastructure. Unfortunately, these services tend to cut deep into the restaurants' profits. This makes it challenging to them, but this most certainly helps some of those restaurants stay afloat.
[1:30] The reason some of these restaurants had the opportunity to save their business is because of ecommerce. Some small brick-and-mortar mom-and-pop shops might have over 50 years of business experience, but when you're in a lockdown, a lot of those in-person advantages start to fade away. Let's talk about ecommerce.
[1:49] The concept of ecommerce probably isn't new to anybody, but it's simply the act of buying and selling online. Whether you're buying a T-shirt for your favorite TV show, or you're buying some food from our local restaurant, or even if you're filling a prescription, ecommerce gives a way for us to buy things without ever leaving our home.
[2:07] It's not slowing down. We supply a huge amount of growth in 2020 because of, well, the obvious. More and more people are getting comfortable with buying stuff online. In the middle of a pandemic, one or more people need to buy things online. On top of that, more services are making it even easier.
[2:25] As developers, we're the backbone of this growth. Every online store has a single developer or a huge team of developers that have built that experience. We're the ones that give the ability to people for them to buy things online. That makes it compelling to have a general understanding of how those kind of things work, or better yet, get an example project in your portfolio to demonstrate that.
[2:48] Now, I would bet that most of you out there probably have purchased at least one thing from a website before actually contributing to that growth chart. Ecommerce shouldn't be that new to anyone, but I'd like to talk about how we look at ecommerce from a developer perspective, what are some of the challenges that we face with ecommerce.
[3:05] Back to our product page, beyond a typical layout, like the branding and the navigation, we have some critical components to our page -- the image, the title, the price and the variations, the cart, and the button to add it to the cart. When we're trying to serve this page, it can't just be static HTML. Some of those pieces need to be highly dynamic in an online store.
[3:27] Parts like the image and the title, that shouldn't change too often. They're probably OK being static and waiting for HTML to update again. Even the variation selection, we probably know all the variations ahead of time. That could probably just be a static list of options too.
[3:43] The price, the availability of that item, and its variations, and even be able to purchase that item in the first place, we all need to be accurate when someone is trying to buy it.
[3:53] If the price is wrong, your customers might complain that they're getting overcharged. If someone buys that item and it's sold out, you're stuck not having enough items to send out to people, meaning canceled orders and unhappy customers.
[4:06] The good thing is we have a lot of options for how to solve this. Some solutions are more traditional, but we also have some modern techniques that can help give our customers a great experience. Serverful solutions are probably the more traditional route. The browser makes a request to the server. That server renders the page and returns the HTML to the browser where the customers can shop.
[4:27] With a serverful solution, our dynamic content isn't a problem. Each page request hits the server. That page can be custom tailored to the details of that visitor's state, but there's another option where we can serve our website completely static. You might have heard of the term JAMstack before, but instead of that server taking the time to render the page, we serve it straight from storage.
[4:51] In order to make those pages dynamic, we can reach out to APIs from within our browser or at build time. What would this look like in practice? Showing some images and text on a page doesn't necessarily need to be dynamic. Leveraging the tooling we have, we can dump this on a statically generated page and into object storage.
[5:10] We can also display a bunch of products and a grid. That doesn't need to be dynamic. There's nothing necessarily special about how this page needs to be put together. Just to be clear, I don't know if Space Cadet -- the store that I've been showing here -- is static.
[5:24] They might be on something like Shopify, but beyond a typical content management solution that triggers a new deploy on every update of that page, this doesn't need to be real time dynamic.
[5:35] Backing into our product page, the vast majority of this page can still be static. Our images and metainformation can be served directly from static hosting. We can let that refresh with a new deploy when something changes.
[5:48] To provide the dynamic aspects, we can take advantage of client side requests. We can pull in that price directly from our ecommerce platform like Stripe so that it's always up to date. For our cart, we can store that state in local storage, or we can use a serverless function to hit a database to get that information.
[6:05] The stock is probably the trickiest of all this, imagine a website like Amazon, where you may literally have a million people trying to buy one single product at the same time. On top of that, that product might have limited stock. You need to be able to support very quick read-and-writes to avoid over selling.
[6:21] Content management systems aren't really equipped for that type of thing. You'll want an ecommerce service with inventory management built right in or a performant database solution. That way, you can avoid unhappy customers.
[6:33] Now those dynamic pieces are probably the biggest challenges that you'll face specifically for ecommerce, but by serving our pages static, we get a lot of other benefits too. Once we have those core static pages in storage, we can serve them from a CDN.
[6:49] Those pages are going to get served from locations at least relatively close to your visitors, which means they're going to get served super-fast, which is a good thing because people want their pizza fast. Like here, Little Caesars uses Gatsby for their website and ordering experience.
[7:04] Beyond hungry customers, PageSpeed is important because it directly correlates to conversion rate. If you're not familiar, conversion rate is the percentage of your traffic that is going to buy something. There are a ton of studies on this. But eBay, for instance, found a half percent increase in their conversion rate with a 100 millisecond load time improvement.
[7:23] Now that might not sound like a lot, but eBay's worth over $10 billion. Just as an example, .01 percent of $1 billion is $5 million, so that adds up pretty quickly. Bonus, serving static files on a CDN most likely means less downtime. The fact that the page files are static and on top of that cached at the edge, you don't need to worry about how your website will scale aside from the APIs.
[7:48] There's less of a chance that you're going to get taken down by the Reddit hug of death, which can mean lost money if people can't buy your products. It's also going to be cheap. While this might not matter as much for big corporations, for small business owners and individuals, every cent counts.
[8:04] The fact that there are so many services with a free tier, you can literally get up and running with a store for free, then scale the cost of processing payments as you grow.
[8:14] Now that I've convinced you about how powerful ecommerce can actually be, where do we start? We'll try to narrow down ecom to three things. It feels like a little bit of an oversimplification.
[8:26] There are a couple of core components for an online store. You have your products that you want to sell. You have to be able to take your orders and payments for those orders. You ultimately need to fulfill those orders.
[8:38] First off, what products do you want to sell in your store? Your products are the first thing your customers see when they visit your store. Where are you going to store the information about those products, a CMS, a JSON file? How are you going to show those products?
[8:52] Maybe you only have a few products on one page or an entire catalog that you need search. While most of the heavy lifting for an online store happens in the background, you first need to have an idea about what products you're trying to sell and how much do they cost. That way, you can give your customers some options for what they can buy.
[9:09] Second, how are you going to take orders and payments for those products? Once your customers find what they want, they'll need to pay for it. Are you going to interface with a payment processor directly? Are you going to create a bunch of forums to take in that information? Where are you going to use a service that handles all the checkout details?
[9:26] Taking payments and dealing with addresses is very complicated, even more so when you start to deal with international customers. Regardless, you need to figure out how to securely take payments for your store.
[9:37] Third, how are you going to deliver your product to your customers? Is this digital product you can email or just let somebody download? If so, how will that work? There are a bunch of integrations you can use, but not every platform makes that super easy. Do you need shipping information? Who's going to pack it up and ship it?
[9:55] Some ecom platforms will handle this for you, but a lot don't. Once you take someone's payment, you're on the hook for getting them what they paid for. You need to make sure that the fulfillment process is working smoothly.
[10:07] While all these are critical pieces to building an online store, here, we're going to actually just focus on the first two pieces. There's a lot of software and technology that can help you even with the fulfillment part of this.
[10:19] As developers, more often than not, we're usually concerned more about getting the products up on a page and how we can let people purchase those products. With that said, we need to figure out what our stack is going to look like. What are we going to build our store on top of?
[10:34] As we talked a little bit earlier, there are a ton of serverful solutions. You can spin up your own with completely custom infrastructure. That's exactly the type of thing I worked at ThinkGeek on top of the good, old Perl codebase. In modern times, a lot of powerful ecom platforms have risen up.
[10:54] Shopify, for instance, is a super powerful solution. It comes with an all-inclusive feature set. This lets you do a lot of stuff with just Shopify, like complete product management, page creation, and checkout.
[11:04] If you're a new business or you're building a project for your portfolio, this is going to have a hefty price tag. This isn't just Shopify. Most vendors that like Shopify will have a similar price tag.
[11:16] Another familiar solution is WordPress. You can use tools like WooCommerce, which are really popular in the WordPress ecosystem. With it, you can easily sell products on your website, but with WooCommerce or any serverful solution, you'll likely have to maintain those servers which frequently have costs involved. Again, similar to Shopify, these are great powerful solutions.
[11:35] We're not looking to spend a bunch of money to spin up our first store which brings me back to static apps. One of the cool things about the dev and JAMstack communities is there a ton of vendors who offer free tiers for devs like us that just want to get started. This applies to whether you're spinning up your own sticker store or if you're building your portfolio.
[11:54] There are ecommerce services that handle things even like payments. They take a percentage of that transaction rather than a monthly cost. That means you only have to pay money if you're making money. For instance, Snipcart is a drop-in solution that lets you easily add a shopping cart to pretty much any type of website.
[12:11] Once you add in the Snipcart script from the CDN, you literally just need to add some class names and data attributes with your product data. This doesn't apply to only static sites. You can really drop in the script of any kind of page, whether it's WordPress or static.
[12:26] Once you do, you pretty much immediately have a shopping cart on your website backed by their platform. This includes the entire checkout process. This is really a great solution if you don't want to spend a lot of time dealing with the shopping cart logic.
[12:38] It can be a bear, and this makes it super easy. It also includes things like inventory management and payment processing. You can avoid having to deal with manually keeping track of your stock. Snipcart and other ecom platforms will handle this for you.
[12:53] If you want to dig in a little bit deeper and work on a custom solution, you can use your favorite framework like Next.js. Once you create a new app, you'll have full access to React. With it, you can create your own shopping cart.
[13:05] Since at that point, you have the flexibility of React. You have full control over how someone is going to add an item to that cart and then how they eventually get to that cart page. You also have the full capabilities of React's baked-in APIs.
[13:18] You can manage your own shopping cart state with React useCartState. Then you can make that state global with the context API. That way, you can provide the exact experience that you want for your customers.
[13:30] If you want a custom experience, but you don't want to maintain the tricky cart state, you can even use a prebuilt library like your shopping cart, which will give you a cart state system out of the box with a React hook. That will immediately allow you to productive with your cart state inside of your app.
[13:45] Either way, once you have your cart state and you're ready to check out, you can use something like Stripe Checkout, where you can push your customers into the checkout solution. While Stripe Checkout won't handle all aspects of an online store, similar to Snipcart, Stripe will handle the checkout process which is one of the bigger pain points of taking people's money.
[14:04] What's stopping you from spinning up a new store? The cool thing about ecommerce is it's become a fundamental piece of our everyday lives. Millions of people around the world are shopping online. Having the tools in our hands makes it easy as developers to spin up new online stores. It makes a compelling example of what we can do.
[14:22] Whether it's for your first client store or if you're trying to build a portfolio with real-world projects to get a job, ecommerce can help show employers that you can critically think through problems. Being able to wrangle both the frontend of an application and manage the data to process the orders is a full-stack solution that can help prove that you're up for the challenge.
[14:42] If you want to learn how to build that Next.js and Stripe Checkout solution, you can check out my course here on egghead.io. We'll walk through building a shop with Stripe Checkout. We'll use React hooks in the Context API to create a global cart state.
[14:54] I'll include it in my talk notes, but you can also go to colbyfayock.com/ecom where I'll redirect you, or you can go to the egghead.io home page and search for my course right on the home page.
[15:04] If you're looking for more opportunities to learn by doing, you can also check out my free ebook called "50 Projects for React & the Static Web," which includes 50 project ideas complete with project briefs, layouts, and resources. That will make a perfect addition to your portfolio. That's it.
[15:20] If you want to learn more or chat about the talk, you can find me anywhere @colbyfayock, or I'll be in the chat and also tweet some stuff out from what you've seen here today. Thanks, everyone.