Back in August 2023, my mother pivoted and opened a boutique food business (I'm blessed to be her son!). The services she offers include cooking workshops, catering, and boujee cheesecakes, quite an operation. In this post, I'll talk about my process of building a static site generated Whatsapp store.

The recipe for success

At the time, I was writing a lot of Nuxt code every day at my day job. Nuxt is the Vue equivalent of React's Next.js, a powerful web framework that builds blazing-fast websites. I was quite comfortable with it, but I wasn't prepared on my weekends to start reinventing the wheel and building a custom backend for this use case.

I started researching open-source CMS options. Many of them looked promising, but the overhead of deploying them and keeping them running like a pet was too much of a burden. After some research, I came across an elegant open-source system called DecapCMS.

Instead of relying on a backend for serving, storing, and managing content, it tracks the data via Git. Once you hook it all up, you expose an /admin route on your website. With a Netlify OAuth login, you are in the back office of the system. There, you can define custom schemas and start CRUDing them. These entries are exposed to you on the frontend by the library's custom hooks that scan the /content directory at build time. Each change modifies a JSON file and triggers the CI pipeline, which in turn regenerates the entire site in around a minute with the new data. Neat!

{
  "title": "Roasted Garlic & Herb Quiche",
  "price": 85,
  "tags": [
    "savory"
  ],
  "description": "A crowd favorite savory bake featuring a golden shortcrust
  pastry shell, rich cream cheese and Gruyère filling seasoned with fresh
  thyme, topped with caramelized onions and roasted garlic cloves.
  Serves 6 - 8.",
  "photo": "/photos/products/herb-quiche.jpg",
  "disabledProduct": false
}

Asynchronous E-commerce

Wait but what about the e-commerce payment part? E-commerce for the services my mom deals with isn't exactly a straightforward transaction. Client communication is key, and when a customer places an order, you need to finalize details with them based on things like ingredients availability, upselling, and the current work schedule. Because of this asynchronous nature, everything is handled by mother directly through WhatsApp communication.

Customers navigate the website, add items to their cart, click checkout, and the frontend code generates a formatted string of the order contents:

Hello, I would like to make the following order: 
-- Aromatic Sweet Potato Soup (1L) $55 * 1 -- Total: $55

https://api.whatsapp.com/send/?phone=15551234567&text=
Hello%20John%20Doe%2C%20I%20would%20like%20to%20make
%20the%20following%20order%3A%20%0A%20--%20%0A%20
Aromatic%20Sweet%20Potato%20Soup%20(1L)%20%2455%20*%201%0A--
%20%0A%20%0ATotal:%20%2455

Customers could, in theory, be evil and tamper with the pricing, but honestly, that just doesn't happen when selling on a farmer's market scale. I did consider building some overly complicated system that verifies the message contents with hashes, etc... but it just felt a bit overkill.

Closing Notes

The site has been running flawlessly for a few years now and It's fast, handles thousands of monthly visitors, and costs me exactly $10 a year just to own the domain along free tier hosting with minimum friction. Some hacks had to be done like in case of user hard refresh, validating versions for filtering ghost products from the localStorage cart but overall it wasn't something too difficult to implement.

Plus, I did all the food photography, which was very rewarding. 😋

Happy commercing!