How I Built a Dynamic Bookmarks Page With AI and Zero Coding Skills

I am NOT a coder. Apart from some dabbling in HTML & CSS occasionally, I've never had the impetus to figure it out.

However, recently I've looked at some challenges I've been trying to solve and realised that a competent programmer could probably sort them out.

At the same time, I've been reading about how people are using AI to write code.

Enter Claude.

Too Much Good Stuff, Not Enough Sharing

I've been using Raindrop.io to collect all the free tools, resources, and interesting finds I stumble across online. My collection had grown to hundreds of bookmarks, a trove of useful stuff that I wanted to share with readers.

I posted some static lists, but they were a pain to maintain.

What I really wanted was something dynamic. Something that would automatically pull from my collection and display it beautifully on my site.

Vibecoding Mode

I fired up a conversation with Claude and started with a simple question:

"Can you help me embed my Raindrop.io bookmarks on my Ghost site?"

What started as a basic API integration quickly turned into something much more interesting.

First, the Basics

We started simple – just pull bookmarks from the Raindrop.io API and display them. The Raindrop API was refreshingly straightforward for me to give access to my site. The output was unstyled, and a bit janky, and I seemed to have 5000 bookmarks!

Once I sorted out the exact collection I wanted to display - I already had a 'free stuff' folder of bookmarks - I started to see how this could work for me.

Basic stuff, but then some magic really kicked in.

The Iterations That Made It Personal

Whilst Claude was doing hard work, I turned into a Product Manager. Asking questions, testing the output and suggesting enhancements.

Each small change made the tool feel more useful:

"Can we add tag filtering?" – Because who wants to scroll through hundreds of bookmarks?

"Can we add a search bar?" – Because sometimes you remember the tool but not which category you put it in.

"Can we move the tags to the top right?" – Because the visual hierarchy felt off.

"Can we make the text 50% bigger?" – Because readability matters.

"Can we change 'Loading Bookmarks' to 'Loading Free Stuff'?" – Because this was my collection of free stuff, not just generic bookmarks.

Each request was small, but together they transformed a basic API wrapper into something that felt crafted specifically for my needs.

The Technical Bits (For the Nerds)

The final solution is really comprehensive for something that emerged from a vague idea:

• Real-time search that filters by title, description, and tags
• Tag-based filtering with a clean button interface
• Combined filtering (search within a tag category)
• Responsive design that works on mobile
• Custom styling that matches Ghost themes
• We removed thumbnails because they were just visual clutter

The filtering is my favourite part of the solution - every time I add to Raindrop it prompts me to tag the URL, so having a filter for users to find what they need seemed a no-brainer.

It's not fancy, but it works exactly how I wanted it to work.

The Debugging Dance

Of course, this process wasn't entirely smooth sailing.

I hit a few snags along the way, and I hit a few limits - so there were some pauses and resets.

But when something breaks, you keep moving. Just problem → solution → next problem, and lots of learning about prompting the AI in different ways.

I've since learned how to head-off some of the problems in advance, and how to be more organised in my work to enable the AI to be a good partner.

Why This Approach Works

Looking back, what I enjoyed about this project evolved is that feature decisions were driven by actual use. I wasn't building for some theoretical user or trying to tick boxes on a feature list. I was building for me, right now, solving the exact problem I had, with very little delay.

The result is a tool that I actually use and enjoy using. Every time I add a new bookmark to my Raindrop.io collection, it automatically appears on my Free Stuff page.

No manual updates, no stale content, no friction.

And the best part? Other people seem to find it useful too. I've had several people reach out asking how they can implement something similar.

What's Next?

The tool is live and working great, but the journey never really stops. I'm already thinking about potential improvements:

• Maybe add sorting options (date added, alphabetical)
• Could be interesting to track click-through rates

But I'm not in a rush. The current version solves my actual problem. Everything else can wait until I actually need it.

Final Thoughts

Sometimes the best solutions come from the simplest ideas. I began with 'I want to display some bookmarks on my blog' and ended up with a fully-featured content management integration that updates automatically and provides a great user experience.

The key was staying focused on solving the immediate problem in front of me, not trying to build the perfect solution for everyone.

Now, every time someone asks me for a tool recommendation, I can just point them to my Free Stuff page and let them explore. The tools are always up-to-date, easily searchable, and nicely categorised.

I expect that some will comment that I have cheated by using Claude, and that the code is probably not the most robust - but so far, it has functioned and if it's 'cheating' then so be it - I've used the tools available to build what I needed.

Want to see the tool in action? Check out my Free Stuff collection where you can search and filter through hundreds of useful (and actually free) tools and resources.