Lists Kit
jasonleow • 11 Nov 2023 •
My latest project is almost ready! It’s called Lists Kit. I started the project on 30 Oct 2023, and it’s been almost 2 weeks since. As the name implies, it’s a kit for making listings, or info directories. It’s essentially a website boilerplate.
The opportunity
I love creating info directories. In fact, it’s the lesser-known products within my portfolio. I usually only talk about Lifelog, Carrd plugins. But I actually have 10 info directories! Here’s the full list:
Live:
gogranthunt.com
ketolistsingapore.com
bit.ly/dabaodash
visualaid.sg
safedistancing.sg
coffice-city.com
Closed:
publicdesignvault.com
publicdesignjobs.com
publicdesignforum.com
Never launched:
publicdesignfaqs.com
To be honest, info directories are super underrated. Amongst the product types, it’s one of the more passive forms of side income. Once you commit to the initial upfront effort of compiling the list, it’s amazingly easy to launch, even easier to maintain. Even for non-technical folks.
The problem
The problem is my directories are split all over different platforms. Grant Hunt is on Airtable, Keto List is Airtable + Table2Site, Dabao Dash and Coffice City are on Sheet2Site, Safe Distancing on Carrd, VisualAid on Stackbit, and Public Design series used to be on Wordpress. It’s fragmented. And frankly, because I don’t have a go-to tool for info directories—or rather don’t have a directory tool I’m willing to pay a subscription for—it does slow me down from launching new ones even faster.
All along I’ve been wanting to migrate my info directories to something simple and self-hosted. My ideal is just a single index.html file in a Github repo, deployed to Netlify or Cloudflare Pages. That’s it!
No need for Tailwind or CSS libraries, no NextJS or any shiny Javascript framework, no PaaS, no build step, no npm or yarn or pnpm, no installation required. Development works right out of the localhost, and you only need a modern browser to run or view it. I feel for something as simple as info directories, all the modern Javascript frameworks are an overkill. Even Vue.js or Nuxt.js, which I love using btw.
The solution
All I needed was a boilerplate for an info directory website. Just HTML, CSS, Javascript. Everything plain vanilla. Maybe sprinkle a pinch of small libraries for stuff like icons and fonts. That’s about it!
Side-note: TBH I was tempted to use a Tailwind template too. But I’m not all too familiar and fast with Tailwind. I use Bulma for Lifelog but it feels niche. Since I’m thinking of selling this as a simple boilerplate, I thought just plain CSS might be most universal.
With the boilerplate, all you need to do is to edit the brand colors, add the data to the data array for the listing, switch up the images, and you’re good to go. Drop the single index.html file into Netlify Drop, register for an account, add a custom domain, and you’re in business!
So I went ahead and made my own.
The business model
Lists Kit isn’t just to save a few dollars paying for nocode tools, but also to repurpose the code to ‘sell the sawdust’ along the way. Maybe if I find this useful, other creators might too. I’m trying to sell this to prosumers, the same way I sell to Carrd prosumers with my Carrd plugins. Creators, makers, creatives folks who are not complete noobs, have a bit of familiarity with basics of HTML, CSS and Javascript, and don’t mind getting a bit hands on with some guidance from me. Just like my Carrd plugins, I’m also planning to create some walk-through tutorials for the premium version, while the free version is community supported. Not sure if this will become a SaaS yet, but we’ll see!
For now, the remaining work is to create the landing page for Lists Kit, using Lists Kit as the base. I also want to customize a few more themes to showcase the different possibilities, as this current version is a travel-theme inspired one. Maybe:
- SaaS listing - A listing of SaaS tools or indie hacker SaaS
- AI listing - A list of custom GPTs? Or open source LLMs to try?
- Job board - Classic but powerful.
What else? What would be popular?
Comments
Pretty cool. I’d like to see an end-all-be-all AI listing. There’s so much out there to weed through.
I love the idea. Especially because it’s something you yourself can use. That makes it a win straight out of the gate.
First impressions: The name makes immediate sense to me, but the description below sowed confusion. I went from “It’s a kit for making lists!” to “It’s a what-now?”
This might be your next step towards building a list-publishing empire.
@drodol Will try to release the beta next week!
@therealbrandonwilson This one’s pretty good! https://allgpts.co/
@Winkletter Thanks for the feedback for the hero tagline! Maybe I should keep it simple and just say “A kit for making listings & info directories” - what do you think? Then all the technical things about plain html css js boilerplate will push down to the features…
@jasonleow It always depends on what you want to stress. Employing the reader expectation model:. 1) Readers expect the subject and action to occur in particular places. 2) The first and last positions are stress points.
How it was before, there was no action, which might be okay, but the subject was also deeply hidden. Lists and Kit are already in the reader’s mind, so you can build upon those words. And it seems like a pain point for you was deploying lists with all the different tech on different platforms, so maybe:
- Deploy web directories with plain HTML, CSS, and Javascript.
- Streamline directories and listings with vanilla code.
If I’m understanding correctly, the “boilerplate” from before isn’t referring to list content (like Lorem Ipsum text) but is referring to the vanilla HTML, CSS, and JS being used, right? If so, and if you want to stress that, you can have that in the last position modifying the tech being used.
- Quick-start directory deployment with simple HTML, CSS, and JavaScript boilerplate.
- Build web listings with the ease of boilerplate code.
@Winkletter Thanks dude! Love the copywriting ideas. Building on them, maybe it can be “Deploy info directories & listings with ease, using a simple HTML, CSS and Javascript boilerplate.”
Oh my god, I’m a grant writer for my nonprofit clients (and for solopreneurs/business owners because there’s grant money out there for us too!), so I’m already obsessed with Grant Hunt. I have to explore more, but this has huge potential!
Edit: Also even though I’m pretty tech-spooked (just because I don’t know coding and my definition of fixing something is turning it off and on again lol), I’ve wanted to create a directory listing for my membership members as an extra perk. They’re all freelance creatives and brand builders, so being able to curate lists for them would be highly valuable! It looks like we can test out the feature, so I’ll definitely try it out! Next to learn: info scrapers, which sound so daunting 😅
And the other I’d want to create is for SaaS companies (since I write content for them, highly ironic, I know), so creating a listing for tools to support them and their content marketing goals is on the to-create-eventually list.
@thecatstickler If you’re spooked by the tech, it’s worth trying nocode directory tools like Softr, Pory, Spreadsimple! They are all Airtable/Google Sheets to website sort of tools
@jasonleow thank you! I didn’t even know those existed, so I’ll check them out. I use AirTable for content editorial calendars with clients, so I’m really familiar with that. (And of course Google Sheets, but that’s kinda obvious 😹)
@thecatstickler Check out this nocode directory - https://www.nocode.tech/tools
I love nocode. I started building as an indie hacker using them, and even now though I know how to code, I still lean to nocode tools first
Looking forward to trying the beta!