DEV Community

Orbit Websites
Orbit Websites

Posted on

Earth Day Edition DEV Weekend Challenge Winners Announced

#devchallenge #weekendchallenge #webdev #programming

Earth Day Edition DEV Weekend Challenge Winners Announced

Congratulations to the winners of the Earth Day Edition DEV Weekend Challenge! 🌍 Your creativity, code quality, and commitment to sustainability through tech were inspiring. From carbon footprint calculators to interactive tree-planting simulations, the submissions showcased how developers can drive environmental awareness with elegant solutions.

But as someone who reviewed dozens of entries, I noticed recurring mistakes, gotchas, and non-obvious insights that kept surfacing — even among experienced devs. Let’s break them down. These aren’t just nitpicks; they’re lessons that separate good projects from truly impactful ones.

1. Over-Engineering the Frontend, Under-Engineering the Logic

Many entries were visually stunning — smooth animations, gradient backgrounds, and responsive layouts. But peel back the UI, and the core logic was often shallow.

Common mistake: Using React, Tailwind, and Framer Motion to build a "carbon calculator" that multiplies user input by a hardcoded constant.

const calculate = (miles) => miles * 0.404; // kg CO2 per mile
Enter fullscreen mode Exit fullscreen mode

That’s not a calculator. That’s a multiplication demo.

Non-obvious insight: Real impact comes from data integrity, not UI polish. Did you source emission factors from EPA, DEFRA, or IPCC? Did you account for vehicle type, fuel efficiency, or regional grid mix? Winners didn’t just multiply — they referenced datasets, cited sources, and allowed for variable inputs.

🚨 Pro tip: A plain HTML form with accurate, well-documented logic beats a flashy app with made-up numbers.

2. Ignoring Input Validation (and User Bullshit)

Too many apps assumed users would behave.

// Seen in multiple entries:
const miles = document.getElementById('miles').value;
const result = miles * 0.404;
Enter fullscreen mode Exit fullscreen mode

What if the user types "a lot"? Or leaves it blank? Or inputs -500?

Gotcha: Unvalidated inputs lead to NaN, Infinity, or silently wrong results. One app told a user their 10-mile drive emitted -40.4 kg of CO2. That’s not a bug — it’s misinformation.

Winning insight: Top entries used defensive programming:

function validateInput(value) {
  const num = parseFloat(value);
  if (isNaN(num) || num < 0) {
    throw new Error("Please enter a valid positive number.");
  }
  return num;
}
Enter fullscreen mode Exit fullscreen mode

They also added unit conversions (miles vs. km), input sanitization, and error messaging that educates, not frustrates.

3. Hardcoding Data = Technical Debt on Day One

Several apps embedded emission factors directly in JavaScript:

const emissionFactors = {
  car: 0.404,
  bus: 0.102,
  train: 0.041
};
Enter fullscreen mode Exit fullscreen mode

This seems fine — until regulations change, or you want to support Europe (where train emissions are lower due to electrification).

Non-obvious insight: Winners treated data like configuration, not code. They used JSON files, environment variables, or even fetched from public APIs.

fetch('/data/emission-factors.json')
  .then(r => r.json())
  .then(data => /* use dynamically */);
Enter fullscreen mode Exit fullscreen mode

Why? Because sustainability data evolves. Hardcoding locks you into outdated science.

💡 Bonus: One winner used GitHub Actions to auto-update emission factors monthly from a trusted source. Now that’s maintainable.

4. No Accessibility = Excluding Real Users

Beautiful apps that fail screen readers, lack keyboard navigation, or use color alone to convey data.

One carbon tracker used green/red bars to show impact — but no labels. A colorblind user couldn’t interpret results.

Common mistake: <div onclick="calculate()">Calculate</div> — not focusable, not semantic.

Winning fix: Use semantic HTML and ARIA:

<button onclick="calculate" aria-label="Calculate your carbon footprint">
  Calculate
</button>
Enter fullscreen mode Exit fullscreen mode

Top entries passed axe DevTools checks, used sufficient contrast, and added prefers-reduced-motion support.

🌐 Remember: An app that raises awareness should be accessible to all. Otherwise, it’s performative.

5. Forgetting the “So What?” — Missing the Call to Action

Many apps stopped at “You emitted 120 kg of CO2.” Then… what?

Biggest missed opportunity: No actionable next steps.

Winners didn’t just report — they guided:

  • “Offset this by planting 3 trees. [Partner link]”
  • “Switch to public transit 2x/week to reduce by 40%.”
  • “Download a PDF report to share with your workplace.”

One entry integrated with Tree-Nation API to let users plant real trees via donation.

Insight: Data without action is noise. Impact requires behavioral nudges.

6. Performance Neglect in “Light” Apps

Even simple apps can be slow.

I saw apps that:

  • Blocked the main thread with synchronous logic
  • Loaded 3MB of icons for a 5-button UI
  • Ran calculations on every keystroke without debouncing

Gotcha: input event fires rapidly. Running heavy logic on each keypress = laggy UX.

Fix used by winners:


js
let timeout;
input.addEventListener('input', () => {
  clearTimeout

---

☕ Bounty hunting and automation can be a wild ride, but it's fueled by awesome people like you - if you're enjoying the free tools and articles, toss a coin to your favorite developer at https://ko-fi.com/orbitwebsites.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)