-
Main Screen
-
Results
Inspiration
I was inspired by a simple frustration I face every day: the web is too noisy. I love reading and learning online, but I'm constantly fighting through a storm of ads, pop-ups, and distracting layouts. I wanted to build something with a real social impact for this hackathon, and I realized the most impactful thing I could do was to create a peaceful corner of the internet, one article at a time. My goal was to build a tool for students, researchers, or anyone who just wants to read and learn without the digital clutter.
What it does
ClarityLens transforms any cluttered web article into a clean, focused, and intelligent summary. A user takes a URL from any online article and pastes it into the app. In the background, ClarityLens fetches the content, strips away all the ads and junk, and then uses Google's Gemini AI to generate a structured summary. The final result isn't just a wall of text; it's a clean page with a main heading, a key descriptive paragraph, important bullet points, and a neutral concluding thought.
How I built it
I built this as a full-stack application with a decoupled architecture.
For the frontend, I chose React with Vite for a fast and modern development experience. I styled the entire interface with Tailwind CSS, which allowed me to build a clean, responsive, and beautiful UI very quickly.
The backend is a Node.js server using the Express framework. Its most important job is to act as the "brain" for the application. It takes a URL, uses Mozilla's Readability.js library to clean the raw HTML, and then communicates with the Google Gemini AI.
The real magic is in the prompt I engineered for the Gemini API, which instructs it to return the summary in a specific, structured JSON format. This ensures the output is always consistent and easy for the frontend to display.
To make it live, I deployed the frontend on Vercel for its speed and simplicity, and the backend on Render, managing my secret API key safely as a production environment variable.
Challenges I ran into
The biggest challenge was a strategic pivot I decided on mid-hackathon. Initially, the app was just a content cleaner. I quickly realized that true value wouldn't come from just cleaning an article, but from intelligently summarizing it.
This decision meant I had to quickly learn how to integrate the Gemini API, engineer a precise prompt to get structured JSON back, and manage my secret keys securely using environment variables. This also required a complete refactor of both my frontend state management and my backend logic to handle the new AI-powered workflow. I also ran into some stubborn frontend build issues with my CSS configuration, which taught me a lot about debugging Node.js dependency trees and the importance of version pinning.
Accomplishments that I'm proud of
I'm incredibly proud of building a complete, end-to-end AI application from scratch in such a short time. Successfully integrating the Gemini API and getting it to return a reliable, structured JSON object felt like a huge win.
I'm also proud of the final UI. I spent a lot of time refining the user experience to make sure it's not only functional but also clean, responsive, and a genuinely pleasant and calming tool to use.
Most of all, I'm proud that I built a tool that directly addresses the hackathon's goal of creating something with a positive social impact. It feels great to have built an app that I will personally use every day.
What I learned
This project was a massive learning experience. It was my first time integrating a major AI API into a project, so I learned the fundamentals of prompt engineering and handling API responses. I also learned the entire deployment pipeline for a modern full-stack app, managing separate deployments on Vercel and Render and handling production environment variables securely. On the frontend, I deepened my understanding of React state management and asynchronous operations to handle loading, error, and success states for a seamless user experience.
What's next for ClarityLens
The MVP is a strong foundation, and I'm excited about its future. The most logical next step is to build a browser extension for one-click summarization directly on any article page. I also envision adding user accounts to allow people to save, search, and organize their library of summarized articles, turning it into a personal knowledge base.
Log in or sign up for Devpost to join the conversation.