DEV Community

Cover image for I Turned My Web Directory Into a Growing Collection of Tools, Sites, and Experiments
Base31.org
Base31.org

Posted on

I Turned My Web Directory Into a Growing Collection of Tools, Sites, and Experiments

A little while ago, I shared base31.org as a small home for the interesting internet.

Since then, the idea has grown beyond a directory.

base31 is now a place to discover interesting websites, use small browser tools, explore public APIs and AI projects, and even upload a simple static site for other people to find.

The project is still independent, still hand-built, and still focused on making the web feel a little more fun to explore.

πŸ‘‰ Try it: base31.org

πŸ‘‰ Source code: github.com/NOTAM-bobk/base31


What base31 is now

At its core, base31 is a curated directory for people who still enjoy finding weird, useful, creative, or unexpectedly good things on the web.

There are a few different parts:

  • Featured sites β€” tools and small projects hosted under *.base31.org
  • Other cool sites β€” hand-picked projects from around the web
  • Cool APIs β€” public APIs that developers can build with
  • Cool apps and AI tools β€” useful creative and developer-focused finds
  • Editor’s picks β€” a rotating shortlist of things worth opening
  • Tool guides β€” dedicated pages that explain what each hosted tool does
  • Community publishing β€” a way for people to upload a static HTML/CSS/JavaScript site and have it hosted through the project

I wanted the site to feel less like an app store or another generic listicle and more like a starting point for curiosity.

The web has a lot of great small projects. They are just often hard to find.


I also started building tools on subdomains

One of the biggest changes was making base31 more than a directory.

Instead of only linking to other projects, I started building small standalone tools that live on their own subdomains.

A few examples include:

  • An image compressor and resizer that works in the browser
  • A QR code generator
  • A password and passphrase generator
  • A GitHub repository explorer
  • A disposable email inbox tool
  • A domain availability and idea finder
  • An iframe tester
  • A website status checker
  • A daily word game
  • Screenshot and file-sharing tools

Each tool has its own small experience, but they all live under the same project.

For example:

  • imagecompressor.base31.org
  • qrgenerator.base31.org
  • githubexplorer.base31.org
  • isittaken.base31.org

That structure lets base31 work as both a discovery site and a collection of lightweight web experiments.


The stack behind it

The main site is built with Next.js and TypeScript.

The repository includes the directory, editorial pages, search, tool guides, structured metadata, and the hosted static tools.

The general setup looks like this:

Next.js app
β”œβ”€β”€ Curated directory pages
β”œβ”€β”€ Search and category filtering
β”œβ”€β”€ Site detail pages
β”œβ”€β”€ Tool guide pages
β”œβ”€β”€ Blog and changelog content
β”œβ”€β”€ Internationalization
└── Static-tool routing for subdomains

Cloudflare Worker
β”œβ”€β”€ Views and basic stats
β”œβ”€β”€ Voting
β”œβ”€β”€ Community site publishing
β”œβ”€β”€ Discussion board
β”œβ”€β”€ Notification subscriptions
└── Shared API endpoints
Enter fullscreen mode Exit fullscreen mode

The code is public here:

https://github.com/NOTAM-bobk/base31

I keep the curated content in editable JSON files instead of burying every site entry in UI components. That makes it much easier to add a new tool, API, app, or interesting website without rewriting the frontend.

For example, listings include a name, URL, category, tags, description, and optional review dates.

{
  "name": "Example App",
  "url": "[https://example.com/](https://example.com/)",
  "category": "Utilities",
  "tags": ["utility", "no-key"],
  "description": "One specific sentence explaining why someone should open this app."
}
Enter fullscreen mode Exit fullscreen mode

That simple content model powers search, category browsing, detail pages, metadata, related recommendations, and editor’s picks.


Search was important

A directory is only useful if people can actually find what they are looking for.

So search works across:

  • Site names
  • URLs
  • Descriptions
  • Categories
  • Tags

I also added tag-style search support.

For example:

#utility
tag:no-key
#utility image
Enter fullscreen mode Exit fullscreen mode

The goal is to let someone come in with either a vague mood β€” β€œshow me something cool” β€” or a practical need β€” β€œI need an image tool without an API key” β€” and still find something useful.

There is also a random-pick option because sometimes the best way to use a directory is to let it surprise you.


Letting people publish small sites

One feature I am especially interested in expanding is community publishing.

Visitors can upload a simple static site made with HTML, CSS, and JavaScript. The project can host it, list it for others to browse, and let visitors vote on it.

I like this because it gives small web projects a place to exist without requiring someone to set up a complicated hosting workflow first.

There are limits and tradeoffs, of course. Community uploads are public, and moderation matters. But I think there is something valuable about making it easier for people to put a small project online.

A lot of great web ideas start as one-page experiments.


Things I cared about while building it

I wanted the project to be useful, but I also wanted it to feel polished and respectful of visitors.

Some things I worked on:

  • Dark and light themes
  • Reduced-motion support
  • Keyboard navigation and visible focus states
  • Responsive layouts
  • Structured data and canonical metadata for directory pages
  • Clear labels for sponsored or referral links
  • Search-friendly detail pages for every curated listing
  • Honest labels around things like estimated code size, review dates, and voting limitations

I also tried to keep the line between editorial picks and paid placements clear. If something is an editor’s pick, it is there because I chose it. If something is sponsored, it should be visibly labeled as sponsored.

That distinction matters.


What I am learning from the project

Building base31 has been a good reminder that a project can grow without needing to become huge or complicated overnight.

It started as a directory idea.

Then it became a place for small tools.

Then it became a small publishing platform.

Now it is also a way for me to practice:

  • Next.js application architecture
  • Content-driven UI design
  • Search and filtering
  • Cloudflare Workers
  • Static-site hosting patterns
  • Subdomain routing
  • SEO and structured data
  • Accessibility details
  • Deployment and domain management
  • Keeping a real project maintainable as it grows

I am still actively improving it, adding tools, reviewing links, and making the directory more useful.

If you enjoy small web projects, useful browser tools, creative internet experiments, or open-source side projects, check it out:

https://base31.org

And if you have a small site or tool worth adding, I would love for you to submit it.

Thanks for reading.

Top comments (0)