DEV Community: Ageng Putra Pratama

Carbon Calculator: Turning AI-Powered Carbon Tracking into Real-World Climate Action 🌱

Ageng Putra Pratama — Sun, 11 Oct 2026 05:33:20 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass.

What I Built

🌱 Carbon Calculator App is a carbon footprint tracking application designed to help people understand their environmental impact and turn that awareness into meaningful action.

The idea behind the project is simple: understanding our carbon footprint should be the beginning of change, not the end of a calculation.

Carbon Calculator helps users estimate emissions from everyday activities, including transportation, household energy consumption, food choices, and waste management. It then presents visual insights and personalized recommendations to help users identify practical opportunities to reduce their environmental impact.

Key Features

🧮 Carbon Footprint Calculator

Users can track their daily activities across four categories:

Transportation: cars, public transportation, flights, walking, and cycling.
Energy: electricity, heating, and cooling.
Food: meat, dairy, vegetables, and processed food.
Waste: recycling, landfill, and composting.

📊 Environmental Insights and Analytics

Interactive charts help users understand their emissions by category and track daily, weekly, and monthly trends. The application also supports PDF and CSV report generation.

🤖 AI-Powered Recommendations

The application uses AI to generate personalized suggestions based on users' activities and carbon footprint data. Recommendations are organized by difficulty and include estimated carbon reduction potential.

✅ Action Plans and Progress Tracking

Users can turn recommendations into actionable tasks, organize them by priority, and track their progress over time.

🏆 Gamification and Social Sharing

Eco points, achievements, badges, and shareable environmental infographics encourage users to reflect on their progress and inspire others to adopt more sustainable habits.

How It Connects to Touch Grass 🌿

The Touch Grass theme is about using AI to encourage people to experience more of the real world.

Carbon Calculator approaches this through everyday environmental decisions.

Instead of simply displaying a carbon footprint score, the application can help users identify concrete actions they can take outside their screens:

Walk or cycle for suitable short-distance trips.
Choose public transportation when practical.
Spend time walking in a park or exploring a nearby green space.
Reduce food waste and make more thoughtful food choices.
Practice recycling and responsible waste disposal.
Track completed actions and reflect on their environmental impact.

The goal is to make the digital experience short and purposeful: understand the impact, choose an action, and go do it.

The application is intended to help users connect environmental awareness with practical changes in their daily lives.

Demo

🌐 Live Application: Carbon Calculator App

🎥 Video Demonstration: Watch the demo on YouTube

Code

GitHub Repository: [Add your public GitHub repository URL here]

The repository contains the source code, application architecture, and setup instructions needed to explore the project.

How I Built It

Carbon Calculator is built with Next.js and includes interactive data visualizations, carbon footprint calculations, AI-powered recommendations, task management, and social sharing features.

The main components include:

Next.js: Application structure and user interface.
Chart.js: Carbon footprint visualizations and historical trends.
Canvas API: Generation of shareable environmental infographics.
AI integration: Personalized sustainability recommendations.
Reporting tools: Exportable PDF and CSV reports.

The existing AI integration uses Google Gemini. To align the project with the open-source AI challenge, I am focusing on incorporating an open-weight model into the core recommendation workflow.

An open-weight model such as Gemma can provide an alternative for generating practical sustainability recommendations. The model can be evaluated against the existing approach for relevance, response quality, latency, and deployment flexibility.

The objective is to make the AI component more adaptable rather than tying the application's entire recommendation experience to a single proprietary provider.

Why Does Open Innovation Matter?

Climate action is a shared challenge, and the tools we build to support it should be accessible, adaptable, and transparent.

Open innovation offers several important opportunities for Carbon Calculator.

1. More control over AI

Using an open-weight model makes it possible to experiment with different models, customize prompts, and adapt recommendation behavior to specific sustainability use cases.

2. Greater flexibility in deployment

Depending on the model and runtime, recommendations can potentially run locally or on infrastructure selected by the developer. This creates opportunities to reduce dependence on a single external AI provider.

3. Privacy-conscious design

Carbon footprint tracking can reveal aspects of a person's daily routine, including transportation choices, food consumption, and household energy use. An architecture that supports local inference can help minimize the need to send personal activity data to an external AI service.

4. Opportunities for experimentation

An open AI stack allows developers and contributors to compare model performance, improve recommendation quality, and experiment with new ways to encourage sustainable behavior.

5. Technology with a real-world purpose

The most important part of this project is not the model itself. It is what the model helps people do.

AI should help users understand their environmental impact and identify practical next steps. The ultimate goal is to turn insights into real-world habits, not simply generate more content for people to consume on their screens.

Open innovation makes it easier to explore different ways to achieve that goal and share improvements with the wider developer community.

Final Thoughts

Carbon Calculator started with a simple question:

What if understanding our carbon footprint became the first step toward changing it?

By combining carbon tracking, AI-powered recommendations, and actionable goals, the project aims to make sustainability easier to understand and practice.

Technology can help us make better decisions, but meaningful environmental progress happens when we take those decisions into the real world.

Sometimes, the best thing an AI application can do is help us put our phones away and take the next step outside. 🌍🌱

OfficeHub: Crafting a Digital Workspace with Soul

Ageng Putra Pratama — Mon, 07 Jul 2025 15:53:56 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

For this challenge, I wanted to move beyond a simple design and tackle a common problem: corporate intranets are often dull, lifeless, and purely utilitarian. My goal was to create something that was not only visually appealing but also production-worthy and, most importantly, human-centric. This led to the birth of OfficeHub, a comprehensive intranet homepage designed to be the true digital heart of a company.

This project directly addresses both the Holistic Webdev: Office Space and CSS Art: Office Culture prompts. The idea was to build a central hub that feels alive and genuinely useful. It’s a place where employees can seamlessly access essential tools, stay informed about company news, and feel tangibly connected to their colleagues and the wider office culture. I wanted to replace the static, uninspired portal with a dynamic, engaging experience, using real-time interactive elements and subtle CSS art to celebrate the small, everyday moments that define life in the workplace.

Demo

Experience OfficeHub live! You can interact with the various widgets, explore the different dashboard sections, and see the design and animations in action.

Live Site: https://lambent-rabanadas-7a867e.netlify.app/
GitHub Repository: https://github.com/pratama404/officehub

Journey

The development of OfficeHub was an exciting, iterative process. It began with a clear vision and a foundational set of features, which were then progressively layered with advanced functionality and creative polish to bring the full concept to life.

Phase 1: The Initial Concept & Core Features

My first priority was to establish a solid and intuitive foundation for a modern intranet. I focused on creating a user experience that felt clean, professional, and welcoming.

Design Philosophy: I opted for a clean, card-based layout that promotes clarity and organization. The professional color palette—with a primary blue (#2563EB), a secondary teal (#0D9488), and an accent orange (#EA580C)—was chosen to be energetic yet trustworthy.

Core Functionality: The initial build included:

A modern, intuitive homepage with clear navigation.
Interactive dashboard widgets for upcoming events and team spotlights.
Fun, culture-driven elements like a real-time coffee counter and a team mood tracker.
A fully responsive design optimized for desktops, tablets, and mobile devices.
Subtle CSS art and smooth hover animations to make the interface feel alive and responsive to user actions.

Phase 2: Evolving into a Production-Ready Application

After building the core, I focused on significantly expanding the feature set to transform OfficeHub into a comprehensive solution worthy of a real-world office environment. This is where the project truly matured.

🏠 Enhanced Dashboard: The dashboard became the central nervous system. I introduced real-time announcements with priority levels (e.g., critical, warning, info) and engagement metrics (likes, comments, views). I also expanded the office amenities tracking to include real-time status for parking, cafeteria capacity, and game room availability. Interactive polls with live voting functionality and a dedicated section for active projects with progress tracking were added to boost engagement and transparency.

👥 Employee Directory: To foster connection, a complete employee directory was built. It features detailed profiles with status indicators (online, away, busy, offline), advanced search by name, role, or department, and direct contact actions (email, chat) for seamless communication.

📁 Document Library: A robust document library was implemented to serve as a single source of truth. It includes full document management with metadata for file types, sizes, and categories, along with download tracking and sharing capabilities. Advanced filtering and search make finding information effortless.

📊 Analytics Dashboard: To provide actionable insights for leadership, I designed an analytics dashboard. It showcases key performance metrics with trend indicators, usage analytics, and overall productivity scores. While the charts are currently placeholders, they are designed for easy integration with a data visualization library.

Phase 3: Polishing the CSS Art and Interactivity

With the core functionality in place, I dedicated significant time to refining the "Office Culture" aspect through creative CSS and interactive flourishes.

🎨 Animated CSS Art: I created a series of animated, floating elements that represent office culture motifs—coffee cups, plants, lightbulbs. These elements respond to user interaction with subtle hover states and micro-interactions, adding a layer of delight to the user experience.

💫 Deeply Interactive Elements: The user experience was enhanced with features like tabbed navigation for different dashboard sections, a real-time updating clock and notification badges, and a fully interactive voting system for the polls.

🎯 Production-Ready Polish: Finally, I focused on the small but critical details that elevate a project to production quality. This included implementing a sticky navigation header for persistent access, a well-designed mobile hamburger menu, custom scrollbars for a consistent look, and thoughtful loading states. Crucially, I integrated accessibility considerations, such as clear focus states for keyboard navigation and support for prefers-reduced-motion to ensure an inclusive experience.

This journey taught me a tremendous amount about structuring a scalable frontend application and the powerful synergy between robust functionality and engaging design. I'm particularly proud of how the enhanced CSS art brings the digital workspace to life, transforming the intranet from a simple tool into a vibrant, integral part of the office culture. The next logical step is to connect the frontend to a backend service to power all the interactive features with real data, making OfficeHub fully operational.

🦠 Avoid the Virus – Survive, Power Up, Repeat (Built with Amazon Q + Pygame)

Ageng Putra Pratama — Sun, 01 Jun 2025 12:43:58 +0000

🎮 Introduction

It started with a simple idea: what if we built a survival arcade game where a small character dodges waves of incoming viruses? Powered by curiosity and the newly released Amazon Q Developer CLI, we created "Avoid the Virus", a Python-based Pygame survival game that tests reflexes, timing, and a bit of luck.

Using Amazon Q's generative AI capabilities, we iteratively built the game, starting from a single prompt and evolving it into a fully playable experience — complete with power-ups, sound effects, and a city-themed backdrop.

⚙️ Tech Stack

🧠 Starting with AI-Powered Game Generation

We kicked things off using this prompt in Amazon Q Developer CLI:

Create a complete game using Python and Pygame called "Avoid the Virus".

That alone set up the foundation — a main game loop, a player-controlled character, and virus-like enemies that home in on the player. With a few refinements and additional prompts, the AI helped scaffold out features like:

Virus enemy generation
Player movement using arrow keys
Collision detection and game-over logic

🛡️ Adding Power-Ups and Gameplay Depth

To make the gameplay more exciting and strategic, we added two types of power-ups:

🟦 Mask – Grants 5 seconds of immunity.
🟨 Hand Sanitizer – Instantly destroys all viruses on screen.

Prompts used:

Add a power-up in the shape of a blue mask that makes the player immune for 5 seconds.

Add another power-up: a yellow hand sanitizer that removes all viruses on screen when picked up.

These additions were surprisingly easy to integrate using Amazon Q’s step-by-step output and Pygame classes.

⏱️ Score & Survival Mechanics

Every second counts! The game tracks how long you can survive, with the score tied directly to time. You’ll find yourself dodging, grabbing power-ups, and getting better with each run.

Prompt used:

Add a survival timer and display the score in the top-left corner.

And voilà — a sleek timer and live score appeared on the screen, updating in real-time.

🏙️ Game Feel & Visuals

To boost immersion, we incorporated:

City street/hospital-themed background
Simple sprite-based visuals using placeholder rectangles (for now)
Sound effects for picking up power-ups and the dreaded game over

Folder Structure

avoid_the_virus_game/
├── main.py
├── assets/
│   ├── player.png
│   ├── virus.png
│   ├── mask.png
│   ├── sanitizer.png
│   ├── background.jpg
│   └── sounds/
│       ├── powerup.wav
│       ├── gameover.wav
│       └── bgm.mp3
└── README.md

🔁 Our Prompt Workflow (Simplified)

Stage	Prompt
🧱 Basic Setup	`Create a Pygame arcade game called "Avoid the Virus".`
⚡ Add Power-Ups	`Add a blue mask power-up that gives 5 seconds of immunity.`
🧟 Enemy Behavior	`Make virus enemies move from all directions toward the player.`
🕓 Score/Timer	`Display the player's survival time as a score.`
🔊 Sounds	`Play a sound when the player picks up a power-up and another when the game ends.`

💡 What We Learned

🧰 Amazon Q CLI is an incredibly efficient way to bootstrap and iterate game mechanics.
✏️ Prompt-driven development helps you stay in creative flow — you focus on ideas, not syntax.
🎮 Even simple games benefit from thoughtful power-up mechanics and sound design.
🐍 Pygame remains a fun, beginner-friendly tool for building 2D games fast.

📁 Repo

🔗 GitHub Repository – Avoid the Virus

🖼️ YouTube – Avoid the Virus

🚀 What’s Next?

🖼️ Custom sprite art (replacing placeholder rectangles)
🎚️ Difficulty scaling (faster virus spawns over time)
🏆 Leaderboard for high scores
📱 Mobile adaptation using Kivy or Unity

🙌 Conclusion

"Avoid the Virus" was born from a simple idea and supercharged by Amazon Q CLI. The fusion of AI-assisted coding and an intuitive Python game engine like Pygame enabled rapid prototyping, fast iterations, and fun development.

We hope this inspires you to try building your own games.

With the right prompts, even beginners can make something amazing. 🕹️

✅ Want to Try It Yourself?

Install Pygame:

pip install pygame

Start your own AI-prompted dev session:

q chat

Happy coding and game building!

🚀 Debugging 2024: From Code to Impact, One Milestone at a Time

Ageng Putra Pratama — Thu, 02 Jan 2025 08:06:29 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

2024 was my year of breaking barriers and building dreams. From mastering AI to crafting solutions that matter, it was a journey defined by growth, grit, and game-changing lessons. 🌟

🌍 From Learning to Leading Change
In 2024, I took a deep dive into the world of artificial intelligence by completing a comprehensive AI course. It wasn’t just about algorithms and data—it was about unlocking the potential of technology to address real-world challenges.

Bangkit added another dimension to my growth. Immersing myself in cloud computing taught me how to scale solutions, work collaboratively, and design systems that deliver value. Bangkit wasn’t just a program—it was a launchpad for my ambitions. 🚀

✨ Turning Vision into Reality: Awair AI Quality App
One of my standout achievements in 2024 was building the Awair AI Quality App. This wasn’t just another tech project; it was my way of addressing a critical global issue: air quality.

Designing an app that utilized AI for real-time monitoring required not just technical skills but also a relentless commitment to excellence. The process of refining algorithms, enhancing user interfaces, and ensuring data accuracy challenged me to grow beyond my limits.

The result? An app that empowers individuals and communities to make informed decisions about their environment. Awair AI became my proof that innovation begins where passion meets persistence. 🌱

💡 Lessons That Lit the Way
Curiosity is the Best Teacher: Diving into AI and cloud computing reaffirmed that curiosity opens doors to endless possibilities.
Teamwork Makes the Dream Work: Collaborating with peers during Bangkit showed me the power of diverse perspectives in achieving shared goals.
Resilience is the Ultimate Superpower: Facing setbacks during development taught me to embrace failures as stepping stones to success.
⚡ Turning Challenges Into Stepping Stones
Every journey has its hurdles. For me, grappling with AI’s technical intricacies and cloud computing’s scalability challenges tested my patience and perseverance.

But instead of deterring me, these challenges fueled my determination. I learned to pivot, adapt, and keep moving forward—a mindset that became my most valuable asset.

2024: The Year That Built Me
As I look back, I realize that 2024 was more than a year of achievements—it was a foundation for the future. It taught me that growth lies in stepping out of comfort zones, collaboration creates magic, and technology is most powerful when it’s used to solve meaningful problems.

Here’s to carrying these lessons into 2025 and beyond, with a heart full of gratitude and a mind ready for innovation. Let’s build something extraordinary. 💡💪