EcoClick

Inspiration

While physical recycling has been integrated into corporate standards for decades, digital sludge remains invisible. Streaming, redundant container logs, orphaned staging pods, and uncompressed cloud files run endlessly in carbon-intensive regions, contributing to silent coal-burning power plant activity. We built EcoClick to gamify, optimize, and make digital carbon footprints visible to modern, climate-conscious engineering and design workspaces.

What it does

EcoClick is a premium, real-time corporate sustainability and green-computing dashboard. It enables SREs, software developers, and product teams to log everyday clean infrastructure micro-habits—such as purging dormant database structures, deferring heavy CI/CD builds to cleaner grid hours, and sleeping idle container instances. The application: Tracks Global Offsets: Smoothly accumulates saved gigabytes of data, offloaded compute hours, and total minimized carbon. Visualizes Power Grid Fluctuation: Displays local energy grids' carbon density patterns over time, advising developers when it is safest to build or deploy. Fosters Positive Team Rivalry: Calculates team contribution indexes inside an automated, self-sorting department leaderboard. Feeds Workspace Alignment: Keeps distributed developers aligned via a live coworker activity logging system.

How we built it

EcoClick is engineered as an ultra-premium React application utilizing: Dark Mode Absolute Luxury Theme: Styled on an absolute pure black canvas (#000000) designed with razor-thin borders, custom radial glows, and modern backdrop blur frames to maximize visual focus and contrast. Framer Motion Engine: Powers the spring-based floating clicking mechanics, custom toast structures, and state animations. SVG Vector Bezier Graphing: Plots dynamic grid trends with coordinate mapping and path transformations. Lucide Vectors: Generates crisp, agency-standard layout interfaces.

Challenges we ran into

Perfect Framer Motion Layout Reordering: Making the department leaderboard rows naturally drift and swap positions upon score updates required careful layout projection tuning, avoiding stuttering or flickering common under high-frequency updates. Click Particle Coordinates: Fetching precise screen location cursors and map tracking within nested layout structures while preventing DOM bloat required strict garbage collection of older elements. Accomplishments that we're proud of Zero-Lag State Flow: Achieving an app that feels physically alive—with rolling background updates and lightning-fast local hook updates—all running flawlessly in a dark, high-contrast palette. Aesthetic Identity: Breaking away from typical "lime green/generic blue gradient" layouts. Our choice of pure-black background, deep charcoal panels, highlight glass, and toxic neon accents gives the application a cybernetic premium vibe.

What we learned

The Power of Micro-Feedback: Gamifying infrastructure commands yields significant developer adherence. Adding playful, immediate rewards like floating "+45g" particles transforms mundane server housework into a highly satisfying ritual. Timing the Grid: Shifting cron schedules or staging cycles to peak offshore wind hours is incredibly effective for enterprise conservation.

What's next for EcoClick

We plan to hook up automated integrations directly into GitHub Actions, AWS Instance Schedulers, and Docker Registries. Instead of manually logging habits, EcoClick could automatically detect when an engineer prunes an unused registry bucket or sleeps an idle pod, and post it straight to the Vibe Feed!

Built With

• bespoke
• framer-motion
• react
• render
• typescript
• vector
• vite