DEV Community: Ageng Putra Pratama

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. 💡💪