This is a tool for exploring pricing, sales and cost scenarios of a business idea.

It helps users answer questions such as:

• How many sales to reach profitablity?
• What price would my products need to have?
• When might the business break even?

Why I built this

I’m a big fan of the business model tools popularised by Alexander Osterwalder and his books “Business Model Generation” and "Value Proposition Design".

The business model canvas is a great tool to map out costs, products and revenue streams. Here is what it looks like:

"JSFiddle but for business ideas"

I like fiddling with things, building a basic prototype and then tweaking the code to see what happens.

So, I wanted something like that, but for business models. A "live model” of a business idea, where you can fiddle with the (hypothetical) numbers, to make the whole idea a bit more real.

This enables the user to ask questions like:

• What are the practicalities of my required sales?
• Seeing the price I'd have to charge, can I imagine products would sell?

How it works

You set up upfront and operating costs. You define products you're selling, along with their costs of goods (COGS). Then you can play around with sales figures and prices to see what this looks like.

Vibe coding & learning

This is the type of thing that might have been done in a spreadsheet, for a specific business idea. But I liked the challenge of building a more generic web based tool - especially since it's becoming so easy and fun to do so.

I love having a relatively low-stakes project like this as a vehicle for learning and experimentation. In this project, the areas of learning were:

Spec driven development

I iterated through different patterns of using .md files to facilitate between me and an LLM to achieve better quality and larger code changes.

The latest frameworks & libraries

Work on existing, complex codebases means you're navigating within the constraints and frameworks already set up.

So, in side projects like this, I'm indulging in trying out new things to see the state of the art.

The three things that felt incredibly effective to put this together fast were:

1. shadcn/ui, a well designed component library that's easy to customise and work with.
2. tailwind css, having never used it, I was amazed how much it fit my workflow
3. lucide icons, a community maintained svg-based icon library

UI paradigms and interaction design

Lastly, this was a fun project for using LLMs to fine tune UI details beyond the basics, because it no longer adds extra work.

I particularly enjoyed utilising shadcn/ui's reference of the "responsive dialog" to have “dialogs” on desktop appear as “drawers” on mobile. This allowed for almost full re-use of the form UI, while also becoming more appropriate for the device being used.

I also enjoyed vibe coding a custom component for destructive actions. The delete buttons utilise a "hold to delete" method where a progress bar in the button shows the user how long they need to hold to trigger the action.

No user auth or database

I wanted to build a v0 quickly, and it was initially just for myself to use. Making it avaiable to others would typically involve adding user authentication and a database. Extra lift I didn't need for this simple tool. I thought a neat way around this was to use window.localStorage.

So, everyone using this app can still come back to their projects (provided they use the same browser instance) and they don't need to log in, either. The only usage of a db is now the "sharing" feature that allows users to send their project to somebody else.

Because this means there are not user accounts, I decided to randomly assign an emoji to everyone. This helps returning users understand that the app "recognises" them. The assigned emoji only changes if the user was to clear their local storage.

What’s next with this

I’ve had a few friends use this for their own purposes and used their feedback to add new features to it. Given time, I would love to extend this further, but it’s not a current priority.

If you are interested in this project, have ideas to share or just want to chat about it - feel free to book a coffee chat with me!

Try the playground yourself here: business-model-playground.vercel.app

Happy business modelling, and thanks for reading :)