What’s Spuddy?

Ever tried checking off items on a shopping list app, while juggling groceries and a phone?

Spuddy, is a shopping list app that I built two years ago, out of frustration with the user experience of other shopping list apps.

I built it to be easy to use - everything is reachable with one hand, and checking off is a simple swipe to the left or right.

The technology behind it, is also not traditional, as it’s a Progressive Web App (PWA), with real-time sync, so you can share your shopping list with your family, and everyone can see updates in real-time.

The first #buildinpublic project

Spuddy will be my first #buildinpublic project.

Even though I built Spuddy two years ago, I never really shared it publicly. That was, because it was aimed at addressing my own needs, and I didn’t think that anyone else would be interested in it.

However, now that I am trying to be more open about my projects, and share my journey of building things in public - Spuddy will be my first #buildinpublic project.

I think that it is fairly poetic, that a shopping list app, will be the first project that I will be sharing publicly. As for most frontend engineers, a shopping (todo) list app is the first project that they ever build.

From side project to product

Spuddy already exists, so why rebuild it? I mean, I can just share the code, open up the domain, and be done with it, right?

As I wrote last week, in my first post “My Internet Goal (The Commitment)”, I don’t want to just open source my projects. I want to build them into products, and to learn what a “product” is.

To transform my tiny Spuddy into an actual product, I will have to implement these things:

A Landing Page

One of the first things that anyone should think about, when building a product, is marketing! And the most important first step in marketing your product, is to have a landing page.

This landing page should explain what Spuddy is, and why you should use it.

Miscellaneous Pages

Since this is a product, where I am allowing the user to input data, I will also need a couple other pages:

• Privacy Policy
• Cookie Policy
• Terms of Service
• Contacts

Authentication & Authorisation

This is obvious, but currently anyone can do anything in Spuddy :)

Product Analytics

It might be a complete waste of time to work on this, as I don’t know if anyone will ever use Spuddy.

However, I want to learn how to build in product analytics, so it’s easy to implement in future projects.

Pricing & Subscriptions

Similar to product analytics, this might be a complete waste of time, if no one ever uses Spuddy.

However, I want to learn how to build a pricing & subscription model, so I can implement it in future projects. If I do ever get users, then I will have to somehow pay for the hosting costs, as real-time sync is not free.

UI / UX Improvements

Since Spuddy was built just to serve my own needs, I added random features, like the recipe screen. Without really thinking about the overall user experience, and letting these features sit in the oven long enough to finish baking.

I want to take a step back, and think about the overall user experience, and how I can improve it. For this Minimal Viable Product (MVP), I want to focus on the core experience of a shopping list app, and make it feel as great as possible.

Technology

The real-time sync of Spuddy is currently powered by a manual deployment of y-websocket-server on Fly.io. It’s annoying to manage, as y-websocket-server depends on a seldom used DB - leveldb, which doesn’t have much tooling around it. Moreover, as this is YJS, and I am using React, I had to roll my own hooks & integration from React to YJS - all of it is fairly ugly code.

For this new version of Spuddy, I want to switch to InstantDB as the backend. It not only provides a hosted solution, but also has first class support for React. This will make it much easier to maintain, and I can focus on building the product, rather than the infrastructure.

NOTE: InstantDB is open-source, and can be self-hosted. I will likely be exploring this option, post-launch, if I ever get users.

What’s next?

Next, I will be setting up the boilerplate for the new version of Spuddy, with the technology changes mentioned above. It will be open sourced from the get-go, and I will share this as part of a follow-up post.

Then, I will start working on the design of the application - both the UI and UX. I usually just start with coding, but this time I want to take a step back, and think about the overall experience. I think this will also be a good opportunity to share my design thoughts, and get feedback from you, the reader.