DEV Community

Cover image for Are you ready to take the Happy Pill? 💊
Ashmeet
Ashmeet

Posted on

Are you ready to take the Happy Pill? 💊

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

Let’s face it. Developers are a moody bunch. You can wallow in your undefined is not a function errors for only so long before that frown holds you back from providing real shareholder value.

This is why I built Happy Pill, an enterprise-grade wellness solution that ensures your engineering team maintains peak performance.

This April, sadness is a privilege, not a right. KEEP GRINNING.

Demo

It plays exactly one song - Happy by Pharrell Williams. This isn't a bug, seriously. Stop smiling? Your listening privilege is immediately revoked until you smile again. That’s your new performance metric. There’s a grace period of 5 seconds at the beginning for a smooth onboarding, so don’t worry!

👉🏼 Live project (fallback no-api-key version with smile simulated through a toggle)

And because misery loves company, your non-compliance for more than 15 seconds will trigger a cup of coffee for you. Of course, to only then be served a 418 I’m a Teapot error instead. Because even the server is judging you.

wellness app offering coffee after 15 seconds of no smile detection

Code

Happy Pill

This is a submission for the DEV April Fools Challenge

Getting Started

Prerequisites

  • Node.js (v18 or later recommended)
  • A modern web browser with webcam support

Installation

  1. Clone the repository:

    git clone https://github.com/ashmeet-chhabra/happy-pill
    cd happy-pill
    
  2. Install dependencies:

    npm install
    
  3. Set up a Gemini API key for automatic smile detection:

    • Create a .env file and add:
      VITE_GEMINI_API_KEY=your_api_key_here
      
    • If you skip this step, the app will automatically enable the manual smile toggle as a fallback, allowing you to control the smile state manually.

Running the App

Start the development server:

npm run dev

Open your browser and navigate to the local server address provided in the terminal.

Project Structure

  • src/components/ – UI components (Header, WebcamPreview, StatusPanel, ControlsBar, YouTubePlayerPanel, FrownPopup)
  • src/hooks/ – Custom React hooks for camera, smile analysis, and YouTube player logic
  • src/services/ – Service modules for camera, Gemini API, and YouTube integration
  • src/types/ – TypeScript type definitions
  • public/418.html – Custom…

How I Built This Utopian Smile Police

The whole system runs on a carefully calibrated feedback loop: camera detects face → AI analyzes smile → playback responds instantly → UI updates to reflect your current compliance status.

React + TypeScript: Because every project deserves type safety, even this one. I ensure the app fails gracefully with proper error messages when it inevitably breaks.

YouTube IFrame API: To help hold you hostage to Pharrell Williams' Happy on loop.

Tailwind CSS: For that sleek, surveillance-state aesthetic uwu

Gemini Integration: More on that in the next section. (face-api.js who 👎🏼🍅)

Prize Category

Best Ode to Larry Masinter: duh
418 I'm a Teapot Error when asked for coffee

Best Google AI Usage: The heart of this innovation! I used Gemini 3.1 Flash-Lite, Google AI’s fastest low-latency high volume model.

Using cutting-edge, state-of-the-art AI to monitor your smile is most agreeably the need of the hour, just as it is to scaffold and overengineer an app for a zero-tolerance risk project like this. For that I turned to Gemini Code Assist which came handy right there in my IDE building this revolution with me.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.