Cluttarex

• 

  A Banner image for Cluttarex

• 

  Paste URL and get content

• 

  Download web pdf

• 

  many more to explore and come

Inspiration

There is a bit of a problem with most of the website which everyone is surely familiar of. There is too many ads, pop-ups, and visual distraction that goes for most web pages wether across news sites, blogs, and even social media platforms. Sometimes, people simply want to read the information and move on, without constant interruptions that strain the eyes and break focus. For me, this has become a major issue. Because of this, I came up with an idea. To create an app that removes unnecessary distractions and lets users focus only on the content they actually want to read.

What it does

Cluttarex is essentially a high-performance, dual-platform tool designed to make the web accessible, fast, and distraction-free with fast dashboard where you can paste any URL to receive a lightweight, text-only version of the page, stripped of ads, trackers, videos, and heavy scripts.

• Chrome Extension: A standalone utility that enables "Lite Mode" on your current tab with a single click, cleaning up the DOM in real-time.
• High-Fidelity PDF Export: A professional archiving tool that converts clean articles into beautifully formatted, multi-page PDFs for offline reading.

How I built it

I architected Cluttarex as a Bun Monorepo to maintain a unified codebase between the web and browser platforms. frontend is Built with Next.js 15 and Tailwind CSS 4. For Backend: I use Next.js API routes deployed on the Edge Runtime to make sure near-zero latency for global text extraction and hopefully it is exactly as I tested for the judges

• Extension: Developed using Vite and Manifest V3, leveraging the chrome.scripting API for programmatic "Force Injection" of cleaning logic.
• Core Engine: Integrated Cheerio for server-side parsing and html2canvas + jsPDF to build a custom PDF generation engine.

Challenges I ran into

In production, I encountered these 500 Internal Server Errors due to heavy HTML parsing dependencies. It was quite hard though it is solved by migrating to the Edge Runtime and by implementing a smart client-side fallback to make sure the app never crashes. And making sure that "Lite Mode" styles didn't get corrupted by the original website's CSS was headache. So I just used aggressive CSS resets and all initial properties just to create a truly isolated reading environment. Another one is getting images to render correctly across different domains while avoiding CORS errors.

There is a feature which i wasn't satisfy of. I initially attempted to integrate ElevenLabs for high-quality AI narration. Though, I quickly hit a major roadblock which is the massive word count of long-form articles would deplete API tokens almost instantly. I would imagine this happen to almost all developer and plus if you are collage student and broke. I had to pivot and implement a more sustainable solution using the Web Speech API. i could be a lot better but it was fun to toy with this different persona of voices. Especially bubble speech which sounds like a man drowning in the water trying to talk to me about why Trump ruined their days.

Accomplishments that I'm proud of

• Unified Identity: I am proud of building a consistent visual language across two very different platforms (Web and Extension) that feels like a single, polished product which it is.
• The PDF Engine: Moving beyond simple "Save as PDF" to create a system that adds headers, source tracking, and custom typography to every exported file is hard but worth it.
• Performance: As a solo dev, I was able to optimize the code to achieve near-instant extraction speeds, outperforming many established "reader mode" tools but that's for the judges to decide. AM I then?

What I learned

I gained a deep understanding of Chrome's Manifest V3 standards and the intricacies of building for the Next.js Edge Runtime. I got a lot better at my skills in DOM manipulation and also how painful is making this within an half day which is entirely on my part.

What's next for Cluttarex

• AI Categorization: Integrating LLMs to automatically tag and group reading history based on content.
• Fleet Sync: Moving from local storage to a dedicated backend to sync reading lists across all devices.

There is more to come which is all depend on my cognitive ability to give a care after a month and hopefully not burning out all the time

Built With

• bun
• cheerio
• isomorphic-dompurify
• jspdf
• manifest
• nextjs
• react
• tailwind
• vercel
• vite
• webspeech
• webstorage