There are a few reasons, that are listed below:

• Discovery
  

  I love wandering on Codepen to find new inspirations but I found it a bit hard to find cool buttons that people might have done. Or even my own buttons that I've done, I wanted a place where I could list them all.

• Sparkle from a simple idea
  

  This tweet from @Una made me want to do it, too:

  Parent Tweet:

  " I think I'm sick, or addicted, or both.. Just ordered 13 new domains, you know, just in case I'll need to host these myriads of projects that will never make it to production 🤷‍♂️ "

  Response

  " @LukyVJ Is one of them coolbuttons.com? "

  View on Twitter ( x.com )

• My own enjoyment
  

  Indeed, I was in need of a new project to work on. And while I was working on some button demos on codepen, I thought it would be nice to have a dedicated place online to view the craziest buttons of the web.

First, let's check at the tech stack:

• Frontend
  

  The frontend is built with Next.js, TailwindCSS and TypeScript. It is hosted on Vercel.

• Backend
  

  The backend is also built with Next.js and TypeScript. It is hosted on Vercel.

• "Database"
  

  The database is built with algolia. Every time a new button is added, it is indexed in an algolia index.

Let's see how the indexation is done in details:

• It all starts with an url
  

  Indeed, the only thing I need to add when I want to add a new button is the url of the codepen.
  So I maintain a growing list of urls, and everytime I get a new submission, I will add it to the list.

• Puppeteer takes the lead
  

  Pulling the data from the url is done with puppeteer. It will open the url, and get the data I need. from the DOM, I can get the title, the description, the tags, the creator, etc.

• Algolia is the database
  

  I use algolia to store the data. It allows me to both store and search the data. When the site is built on Vercel, it will run the indexing script, and if the item already exists, it will ignore it. If it does not exist, it will add it to the index.

When you load a button page, here's what happens:

• The pen ID is in the url
  

  So the server get the pen ID from the url. And perform a fetch to a codepen url, and returns the data as text.

• The data is parsed
  

  The data is parsed on the frontend, and turned into an encoded string.

• The iframe is rendered
  

  The iframe is rendered with the encoded string as the src.

• Some issues can happen
  

  Several issues can happen when rendering the iframe, mainly based on two things: The data is too big to be rendered properly in the iframe. And if the pen is using a specific external resource ( Like some greensock plugins, or some other external libraries ) that are not authorized to work outside of codepen. Also, some features might be disallowed by the iframe, like the access to the webcam, or the microphone.