About Woot+
The purpose of Woot+ is to make it faster and easier for visitors to explore the ever-changing catalog of products for sale on woot.com. It achieves this goal by a series of means:
- Real-time search by product title
- Fast filtration by department, category, and price
- Sensible sorting options
- Responsive, mobile-friendly design
Woot+ delivers an exceptional user experience by focusing its attention on performance and simplicity. The less time people are made to spend jumping between pages to see what's for sale, the more likely they are to stumble across a bargain that's too sweet to pass up.
Disclaimer
Woot+ is an independent project that is in no way affiliated with or endorsed by Woot and/or Amazon. The information presented on Woot+ is provided directly by Woot via their Developer Portal, and while every effort has been made to ensure it is in sync with what's for sale on woot.com there is always the possibility that discrepancies exist. Always use the links to Woot! to verify prices, product descriptions, and availability.
All product information and associated images appearing on Woot+ are the sole property of Woot.
Motivation
I am a long-time fan of Woot, and to this day it's normally the first place I look when I'm in need of something new. Not always, but often I'll stumble across the thing that I'm after and pick it up at a bargain price. In December 2022, while in the United States visiting friends, I was in search of a lightly used iPhone 11 so naturally I looked on Woot. To my surprise I discovered that woot.com doesn't have a search feature! It boggles the mind considering that Woot is an Amazon property and presumably has an army of tech-savvy folks at their disposal. I can't help wondering if it's somehow by design; maybe they actually INTEND for people to leaf through the bargain bin and impulse-buy a bunch of junk they didn't realize they needed. 🤷
As with pretty much every independent software project, Woot+ was born out of one developer's irresistible desire to improve upon an existing system that in their opinion was unacceptably lacking. It also seemed a great opportunity to explore some new technologies and bolster my portfolio. What began as a hobby project has since evolved into an application I consider worthy of release to the wider internet community. Please enjoy!
Credits
No application that depends on open-source software is complete without giving credit where credit is due. Woot+ was built with 💚️ using the following technologies:
Next.js 13
Next.js has rapidly positioned itself as the go-to framework for projects built using React and it shows no signs of slowing down. The list of features and benefits is too long to enumerate, but suffice it to say that if you're using React there hardly seems a reason not to leverage Next.js.
MUI 5 (f.k.a. Material-UI)
If you are not a UI designer by trade, do everyone (including yourself) a favor and try MUI. Besides being a joy to work with thanks to its extensive documentation, it offers a brilliant implementation of the Material Design Specification published by Google. You will be spared countless hours of fidgeting with layout, typography, and color, and your audience will receive a UI/UX that they are familiar with if they've used any of Google's products.
React.js
As one who has been writing software for the web since 1999, I daresay that no single technology has been more revolutionary than React in terms of the way we design and build for the web.
Since the day Facebook released React to the public in 2013, the web has evolved dramatically and now there are a multitude of arguably superior alternatives to choose from. Even so, a StackOverflow survey conducted in May 2022 suggests that React.js is still the framework of choice for a majority of professional developers.
TanStack Query
Controlling the flow of data in a React application is no easy feat. The process can quickly become convoluted, particularly when the retrieval of data is dependent on some sort of condition. Doing things the "TanStack Query way" involves a bit of a shift in your mental model, but once you've grasped its principles you'll soon wonder how on Earth you ever got by without it.
It is worth noting that TanStack Query is not limited to the retrieval of data from external sources. It shines in any situation where you need to produce a dataset from some sort of input. For instance, Woot+ uses it first to retrieve and store the complete set of products currently for sale on woot.com, then subsequently to retrieve records from a local database that match the current filtration parameters.
react-window
The modern web (and applications in general) have in large part moved away from the use of pagination to deliver large datasets, opting instead for an infinite scrolling experience. Any developer worth their salt knows that it is infeasible to provide an infinite scrolling experience that is performant without some sort of "windowing" solution that limits how many elements are rendered at a given time.
Using react-window you simply define the size of the container in which items will appear, define the size of each item, and it will neatly add and remove elements from the page as a user scrolls through that container. Its interface is simple and at the same time very powerful, providing all the necessary hooks you'd need to respond to change in scroll position. Woot+ uses one of these hooks to present the range of items a visitor is viewing at a given time.
swipejs
I simply can't understand how this project isn't far more popular than it is. Sure, it gets a small but steady stream of weekly downloads on NPM, but not nearly as many as its main rival, Swiper. If I had to guess, it's because the demo page and documentation seem like an afterthought, built by someone who prefers to spend their time solving hard problems vs. writing about them. (Believe me, I can relate.) It a bit of a shame because this library really sings, having an impressively small footprint and no external dependencies.
ForerunnerDB
I've been aware of ForerunnerDB for a while and have always wanted to make use of it but had never come across a suitable use case until now. It is my impression that the use of local storage in web applications is grossly underutilized. I could go on to theorize as to why this is the case but instead I'll get to the point.
Woot+ periodically retrieves the complete set of products currently for sale on woot.com, along with their respective categories. (At any given time, the number of products ranges between around 2,500 and 4000 and the size of the payload seems to max out at around 1.5 MB.) This data is then stored in a local database and subsequently queried in response to changes in the designated set of filter parameters (i.e. the current URL).
This approach enables visitors to navigate rapidly through the product catalog without the need to communicate further with the server until such time as a data sync is deemed necessary.
Pairs well with TanStack Query.
Django REST Framework
Call me old-fashioned, but in 2023 I'm still an avid fan of the Django ecosystem. In terms of raw performance it is far from stellar, but for most real-world applications it is fast enough. I've been using the framework for over a decade and have gotten pretty handy with it, so it's hard to justify the use of a more modern framework just because it's nifty, or a little bit faster.
I am first and foremost an application programmer, and as much as possible prefer to spend my time writing application code. There is much to consider when building an API and the team behind Django REST Framework has done everything humanly possible to abstract the nitty-gritty details, thus enabling developers to focus their attention on feature delivery rather than the bullet holes in their feet.
PlanetScale
Let's face it: setting up and maintaining a database system is something that the majority of full-stack app developers secretly know they probably shouldn't be doing. It's a highly specialized skill that demands extensive knowledge, and even if everything has been done correctly, a DB system demands regular attention to ensure things are up to snuff.
PlanetScale is a hosted, serverless MySQL platform that generously provides developers with a free "Hobby" plan that is more than sufficient for small-scale projects. This is my first time using it and I am so far very pleased with the decision. Without having to worry or wonder whether my DB is in good health, I am able to focus more my time and energy on actual app development and also sleep a bit better at night!
Cloudflare
Oh Cloudflare, you unsung hero you. In terms of internet infrastructure it is hard to imagine of a more valuable free offering than the one provided by Cloudflare. I won't go on to describe its many virtues, but I will note that it is an invaluable resource in terms of taking the brunt of the load off of my meager (read: free tier) AWS instance that is serving the publicly accessible API to Woot+.
Because the product catalog changes infrequently, caching is performed aggressively and requests for that data are most often fulfilled by Cloudflare. Huge thanks!!
About the author
My name is Allan Hart and I'm a freelance full-stack web application developer specializing in the design and construction of progressive web apps. In 2005 I received a bachelor's degree in computer science from the University of Calgary and have worked professionally in the software field ever since.
Early on in my career (circa 2007), I made the decision to focus on the rapidly emerging mobile software space. Having spent the previous two years writing application software exclusively for macOS, my familiarity with Objective-C, Foundation, and UIKit left me well poised for the transition into iOS development. The next two years were spent honing my skills as an iOS app developer while at the same time developing the APIs, data models, and underlying system architecture involved in servicing those apps. Becoming a full-stack developer happened not so much by choice but more by necessity, and to this day I greatly enjoy having a hand in all aspects of the software development process.
As mobile devices quickly and surely came into their own, and the subsequent trend toward the use smartphones for day-to-day tasks became obvious, it became clear that the most feasible way to produce software for everyone was to embrace the technologies that were common across all devices and operating systems. It has since been my mission to master the pillars of web application programming (HTML, Javascript, and CSS) with the goal of producing software products that deliver a user experience that is as good or better than that of a native application, while at the same time reaping the benefits of a truly universal codebase – one that runs on any hardware device that ships with a modern, standards-compliant web browser.
Get in touch
Thanks for reading this far! 🙌
Seeing as you're here, you must want to know more about me, this project, or the secrets of the universe. Although the secrets are mine to keep, I'd be more than happy to discuss Woot+, my philosophies as a seasoned (not salty) software developer, or my availability for project work.
Please feel free to reach out to me on LinkedIn, or shoot me an email. I promise to reply!