How I Built a Vendor Stall for Small Businesses to Sell Goods Online in Three Weekends

You can build an enterprise-grade app with low-level knowledge thanks to the myriad of robust services covering every aspect of a web product’s needs. In this article, I explore how I built an app over a couple of weekends in lockdown with not a lot of work.

Motivation

A few years ago when I started learning React, I took Wes Bos’s React For Beginners course, in which he builds a market app titled “Catch of The Day”. Wes Bos is a titan among development instructors with a relatable approach that shows you just how fun coding can be, especially when applies to real-world application. If you haven’t taken any of his courses, do yourself a favour.

Anyway, in the demo app he builds, a single vendor page is created, and orders are placed against live data. My React skills have come a long way since then, but it always stuck with me as an excellent idea. Fast-forward to today, Coronavirus has hit, and many people I know who work in markets are temporarily out of business, but still offering collection or delivery of their goods. Many of them don’t have websites or the ability to take orders via anything except email, so last weekend I started building an app heavily inspired by “Catch of the Day”, but fully fleshed out.

In it, vendors can sign up and set up a store with very little work. They can add store data and products, set currency and in some countries, add online payment. Customers can order items with no registration; vendors receive notifications and can update order statuses. It’s kind of like a very low-level Shopify, but aside from being simple to set up, (and here’s the kicker) it’s completely free.

…the only thing I had to pay for was the domain at $20.

Why? Well, because back home in South Africa (I live in Germany), my mother is a market vendor and I wanted to help her out. But also because it cost me almost nothing to make (except for my precious lifeblood of course: time, but it was this or playing Mariokart).

Breaking it down

The stack consists of the following:

• React: the free library I try to pretend wasn’t provided by Emperor Zuck
• Next.js: the free React framework on the bleeding edge of web app development. With the recent addition of SWA and advancements in static content generation, this very active community is doing some impressive stuff. Did you know that Hackernoon was recently rebuilt using Next.js?
• Zeit (now.sh): A perfect free hosting compliment to Next.js. One-command deployment, PR merge checks, function logging, DNS management via CLI, what’s not to love? As a frontend developer, I have little interest in spending too much time on the server, so a reliable, minimal-config setup is right up my alley.
• Sendgrid: Free transactional emails. 40k for a month, then 100/day free forever
• Sentry: Free error tracking for personal projects and early-stage applications. (5k errors per month)
• Uploadcare: Free image uploader and CDN hosting, 1GB traffic per month
• Acute: User feedback management, free for 20 suggestions
• Firebase: For auth and database, comes with a very generous free tier.

Not to mention the 24 other open-source packages I’ve made use of including libraries like react-hook-form, dayjs, react-select, and sweetalert to name a few.

The only thing I had to pay for was the domain at $20. Thanks to the unsung efforts of those in web development who have worked tirelessly at not only building these support services, but maintaining and providing feedback free-of-charge, I built an entire app from end-to-end with mostly frontend knowledge.

Point being, you probably only have to start paying for an app once it goes somewhere. It is a fruitful time to be a web developer.

If you know someone who sells goods, at a market or otherwise, that might benefit from being able to take orders online right now, feel free to share Vendor Stall with them.