The Bored Board!

Bored out of your mind? Give our project a go!

Comment

💡 Inspiration

There are times in life when you're so bored you have no idea what to do. And thus, we decided to fix that. With tons of interesting websites on the internet, we wanted to build something that curated them all, but allowed you to see them all in one page.

🏡 What it does

Our site displays a wall of 180+ interesting websites all around the internet comprising of comics, games, and all sorts of quirky webpages. Definitely a must-visit the next time you're bored.

🔨 How we built it

The entire website was built using a combination of Next.js and React on the front-end, with a sprinkle of CSS. To generate a preview of each of the sites, we automated using puppeteer, the headless browser framework. Finally, for deployment, we used Vercel for continuous site deployments as we pushed to GitHub.

😢 Challenges we ran into

Once we gathered the urls, we realized that we needed to parse them somehow. Amazingly, Regex turned out to be the right tool for the job. With s/\n/",\n"/g, we managed to convert the list into a valid JS array. Was that all? Definitely not! Once we'd download the screenshots for all the sites in the list, we realized that the entire site took 89MB to load! Fortunately, with some ImageMagick magic (pun not intended), we managed to convert the lossless pngs to was smaller progressive jpgs instead.

🏆 Accomplishments that we're proud of

  • We're really proud of how fast the website loads even though we fetch around 180+ images and associated files.
  • We definitely automated some of the work (parsing URLS, grabbing screenshots), so pretty proud of that too!

📖 What we learned

  • We learnt how to use puppeteer, the headless browser framework.
  • We learnt the inner workings of how to deploy a website through Vercel.

🚀 What's next for The Bored Board!

180+ sites? That's a lot, but what we definitely need way more! We'll be curating and adding even more sites in the future! Also, the interface could improve too, so we'll be revamping that in the future!

Built With

Share this project:

Updates