GuiltByClick

Inspiration

We wanted to explore how humor, curiosity, and reverse psychology could be combined to create a uniquely engaging experience — entirely on the frontend. Inspired by meme culture and psychological triggers, we built something users would click, laugh at, and share.

What it does

GuiltByClick tempts users not to click a red button — and when they inevitably do, it unleashes a series of sarcastic messages, fake features (like a CAPTCHA, AI-generated resume, click addiction certificate), and unlockable achievements. It’s a fully client-side guilt trip turned into a game.

How we built it

Frontend: React 18, TypeScript, Vite

Styling: Tailwind CSS, Lucide Icons, Inter Font

Data: LocalStorage for persistence (auth, clicks, leaderboard)

Browser APIs: Web Audio API for sound, Mouse Events for interactions

Deployed on: Netlify All logic and UX runs client-side — no backend involved.

Challenges we ran into

Designing a progression system that stays funny without getting repetitive

Making interactions feel smooth and reactive without external state management

Keeping all data client-side while still supporting authentication and a local leaderboard

Accomplishments that we're proud of

Created a fully functional, funny, and addictive experience using only frontend tools

Built an emotional UX loop — from curiosity to shame to laughter — in a single-page app

Seamless deployment with zero downtime on Netlify

What we learned

How powerful simple UX design and humor can be in capturing user attention

Implementing progressive interaction logic purely with LocalStorage and React state

That even without a backend, it’s possible to create a polished, engaging product

What's next for GuiltByClick

Adding online leaderboards via a backend or serverless functions

Enabling social sharing of results and custom roasts

Exploring AI-generated insults and real-time gamification

Making it more accessible and turning it into a mini social challenge

Built With

• eslint
• inter-font
• localstorage
• lucide-icons
• mouse-events
• postcss
• react-18
• react-refresh
• tailwind-css
• typescript
• vite
• web-audio-api