I can’t count the number of tech product ideas I’ve had over the years. Many were terrible. Most were not worth the focus. Some have proved to be absolutely worthwhile. 🙂

Now I’m a very visual person and there is nothing like translating an idea to a clickable and good-looking prototype. Prototypes are often used to help communicate and pitch ideas, but I find them helpful much earlier in the game. Simply getting the idea onto a screen helps coalesce the thing and gives me a context I can’t get otherwise. The thing is, finding a simple no-frills dev stack for prototyping hasn’t been easy. Promises of simplicity often have me wrangling and debugging all sorts of dependencies and convoluted project structures. All I want is the lowest dependency possible path to getting my idea onto a screen.

So I developed a single file prototype approach.

A single HTML (yes HTML!) file that gives me:

1. Styling
2. Interactivity
3. Dynamic content
4. A datastore

In effect, the things you need to be able to give a fully functional user experience.

These are the building blocks

1. Styling

I’m a big fan of Tailwind. Their recent v3 release introduced their JIT engine to the core library. Cool thing is you can import this JIT engine via CDN and have it run its magic in the browser. Not appropriate for production apps, but more than enough for a prototype

2. Interactivity

Of the popular Javascript frameworks, my favourite is Vue. A proper Vue app takes a little bit of setup, but did you know you can import the framework, again, from a CDN? Wouldn’t do this in prod of course, but happy days for our funky little prototype.

3. Dynamic content

See above about Vue.

4. A datastore

It’s not a legit datastore, but this is a prototype right!?! For our get-the-point-across purposes, a JS object becomes a simple model for storing our dummy data. And with Vue, we’re able to easily access and interact with it. For example:

links: [
	{
		name: "About",
		url: 'https://robstinson.co/about'
	},
	{
		name: "Codepen",
		url: 'https://codepen.io/robstinson'
	},
	{
		name: "Twitter",
		url: 'https://twitter.com/rob_stino'
	},
	{
		name: "Website",
		url: 'https://robstinson.co'
	}
]

With these 4 pieces in a single HTML file, I can very quickly build out an interactive, well-styled, and dynamic prototype.

The other great thing about it just being an HTML file is that I can send this to anyone with a web browser and, without needing to jump through clone/install/server-up/run hoops, they double-click and that’s it! :chefs-kiss:

Boilerplate repo for you here as well if you wanna fork it and use it yourself.