DEV Community: Akua Konadu

Next-Level Intranet: OfficeSpace with Dark Mode & Widgets

Akua Konadu — Thu, 24 Jul 2025 14:58:53 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

My intranet layout is a modern, responsive dashboard designed to boost engagement and productivity. It features a hero section, team spotlight, upcoming events carousel, quick links, and a sticky sidebar with live widgets (clock, weather, notifications). I aimed to create a dynamic, user-friendly space with personalization (drag-and-drop widgets), dark mode, and smooth animations for an interactive experience.

Demo

Demo Link

Repo Link

Journey

I started by planning a clean layout that mimics a real company intranet, then built the structure in HTML and styled it for a modern, responsive design with CSS Grid and Flexbox. After that, I added interactivity with JavaScript, including dark mode, an auto-sliding event carousel with swipe support, and a sticky sidebar with real-time widgets (clock, weather, and notifications).

One of my proudest choices was implementing drag-and-drop widgets in the sidebar with Local Storage, giving users the ability to personalize their dashboard. This feature makes the intranet feel dynamic and user-centric.

I learned how to combine responsive design, smooth animations, and interactive features in a way that feels like a real digital workspace employees would use daily.

Inbox Translator: Automatic Email Translation Made Easy

Akua Konadu — Sun, 08 Jun 2025 20:48:27 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

Inbox Translator is an AI-powered email translation app that automatically translates incoming emails into English using OpenRouter’s GPT-3.5-turbo model. Integrated with Postmark’s inbound email parsing, the app listens for emails sent to a dedicated address, translates their content seamlessly, and sends back the translated message to the sender.

Designed with a sleek, dark-themed, responsive UI, Inbox Translator offers users a simple way to overcome language barriers in email communication without any manual effort. This solution is ideal for professionals, businesses, and anyone who regularly receives emails in different languages and wants fast, reliable translations directly in their inbox.

Demo

Demo link

Code Repository

Repo Link

How I Built It

🛠 Step-by-Step Guide: Building the Inbox Translator App

1️⃣ Project Setup
Tools: Node.js, Express, EJS, TailwindCSS

Initialized the project using npm init

Installed required packages:
npm install express ejs body-parser dotenv postmark node-fetch
Set up project folders:
/views → EJS templates /public → Static CSS (Tailwind) index.js → Main server logic .env → Environment config

2️⃣ Set Up Postmark for Inbound Emails
Steps:
Created a Postmark account and set up a new Inbound Stream.
Set your Inbound Webhook URL to your deployed endpoint:
(https://inbox-translator.onrender.com/inbound-email)

Verified the domain or used Postmark’s testing domain (inbound.postmarkapp.com)

3️⃣ Handling Incoming Emails
How it works:
The webhook /inbound-email receives incoming email data from Postmark.
It logs the sender and the original message content.

4️⃣ Language Detection & Conditional Translation
Tools: LibreTranslate + OpenRouter GPT-3.5

Used LibreTranslate to detect if the email is already in English.

If not, used OpenRouter (GPT-3.5-turbo) to translate the message to English.

Example logic:if (language !== 'en') { // translate using OpenRouter AI }
5️⃣ Sending Back the Translated Email
Used Postmark’s sendEmail method to reply to the original sender.

Dynamic subject and body:Subject: "Translated Email (Inbox Translator)" TextBody:Here is your translated message:\n\n${translatedText}

6️⃣** Frontend UI — Viewing Translations**
Tools: EJS + Tailwind CSS

Created a dark-themed interface to display email history.

Emails are stored in-memory and rendered as responsive cards.

Added a dark/light toggle and smooth animations.

✅ Summary: Tech Stack

Layer	Tool/Service
Backend	Node.js + Express
Frontend	EJS + Tailwind CSS
Email Engine	Postmark (Inbound + Outbound)
Translation	GPT-3.5-turbo via OpenRouter
Deployment	Render.com

I joined the alibaba cloud challenge but never got a completion badge

Akua Konadu — Mon, 12 May 2025 08:44:52 +0000

Please Can anybody explain to me or tag the moderators for me

RetroMix DJ: An AI-Enhanced Digital Mixing Experience

Akua Konadu — Sun, 11 May 2025 08:59:08 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

RetroMix DJ is a browser-based digital DJ application that combines nostalgic retro aesthetics with professional-grade mixing capabilities. It's a complete
virtual DJ console that allows users to mix tracks, apply effects, trigger samples, and create dynamic performances - all within their web browser.

The application features a vibrant, retro-inspired interface with multiple visual themes (Retro, Modern, Neon, and Minimal) that evoke the nostalgic feel of
classic electronic music equipment while providing modern functionality. The neon colors, pixelated fonts, and vintage-style controls create an immersive
experience that's visually engaging and fun to interact with.

Professional DJ Capabilities
Despite its playful appearance, RetroMix DJ offers serious mixing capabilities:
• Dual-deck system with independent controls
• Real-time waveform visualization with beat detection
• Loop and hot cue system for precise performance control
• Advanced audio effects (reverb, delay, flanger, distortion)
• Professional compression tools including multiband and sidechain
• Sample pads for triggering one-shot sounds and loops

AI-Powered Features
The application incorporates innovative AI features that make mixing more accessible and creative:
• Auto DJ functionality that automatically selects and mixes compatible tracks
• Smart track recommendations based on BPM, key, and style
• Vocal isolation for creative acapella mixing
• Style-based track matching for cohesive sets

Interactive Learning Experience
RetroMix DJ serves as both entertainment and an educational tool:
• Users can learn DJ techniques in a fun, low-pressure environment
• Visual feedback helps understand concepts like beat matching and EQ
• The interface mimics professional equipment, building transferable skills
• Real-time audio visualizers demonstrate how sound changes with different
effects

Creative Freedom
The application encourages experimentation and creativity:
• Customizable sample pads let users add their own sounds
• Multiple effect combinations create unique sonic textures
• Track management system helps organize music by style and mood
• Drag-and-drop functionality makes library management intuitive

RetroMix DJ transforms the technical complexity of DJing into an accessible, entertaining experience that appeals to both beginners and experienced DJs. It
balances nostalgic design with modern functionality, creating a unique platform where users can learn, create, and perform music in an engaging and visually
stimulating environment.

Demo

Deployed Project Link

Code Repository

Repository Link

How I Used Amazon Q Developer

Amazon Q Developer was instrumental throughout the entire development process of RetroMix DJ, serving as both a coding partner and technical advisor. Here's
how I leveraged this powerful tool to create a comprehensive DJ application:

1.Initial Architecture and Core Functionality
I started by describing my vision for a browser-based DJ application
with retro aesthetics to Amazon Q. It helped me:

• Design the overall architecture using the Web Audio API
• Generate the HTML structure for the dual-deck interface
• Create the CSS styling for the retro visual themes
• Implement core audio processing functionality

Amazon Q was particularly helpful in explaining complex Web Audio API concepts and generating the necessary code for audio routing, gain staging, and EQ
implementation.

2.Iterative Feature Development
As development progressed, I used Amazon Q to iteratively add more sophisticated features:

1. Loop and Hot Cue System: When I needed precise beat control, Amazon Q helped implement a complete looping system with beat detection and quantization.

2. Sample Pad Integration: Amazon Q generated code for the sample trigger system, including loading, processing, and playing audio samples.

3. Track Management System: When I wanted to add library management, Amazon Q created a comprehensive system with metadata extraction, playlist management,
and smart recommendations.

4. Advanced Audio Processing: For professional-grade effects, Amazon Q implemented reverb, delay, flanger, and distortion algorithms, plus multiband
compression and sidechain processing.

3.Problem Solving and Debugging
Amazon Q excelled at helping me troubleshoot issues:

• When the theme switching wasn't working, Amazon Q identified the missing event connections
• When audio processing caused performance issues, it suggested optimizations
• When UI elements weren't responsive, it provided CSS fixes

Tips and Insights for Using Amazon Q Developer

Based on my experience, here are some valuable insights:

Start with a Clear Vision: Providing Amazon Q with a detailed description of what you want to build yields better initial results.
Iterative Refinement: Rather than asking for everything at once, build features incrementally and refine them with Amazon Q's help.
Explain Technical Context: When facing issues, providing Amazon Q with error messages and relevant code snippets leads to more accurate solutions.
Learn Through Collaboration: Ask Amazon Q to explain complex concepts in the generated code—I learned a tremendous amount about audio processing this way.
Combine Generated Code with Your Ideas: Some of the best features came from my high-level ideas that Amazon Q helped implement technically.
Request Optimizations: After getting working code, ask Amazon Q for performance improvements—it often suggested more efficient approaches.
Maintain File Organization: As the project grew, Amazon Q helped maintain a clean architecture by suggesting proper file organization.

Amazon Q Developer transformed the development process from what would have been weeks of research and coding into a collaborative experience where I could
focus on creative direction while it handled technical implementation. The result is a feature-rich application that would have been significantly more
challenging to build without this powerful AI assistant.

AI Summary Manager with Role-Based Access Control

Akua Konadu — Sat, 03 May 2025 22:11:16 +0000

This is a submission for the Permit.io Authorization Challenge: AI Access Control

What I Built

I built an AI Content Assistant, is an AI-powered content summarization tool enhanced with fine-grained access control using Permit.io. It allows users to submit content for summarization using AI (mocked in this version), while only authorized roles such as admins can review and publish the generated summaries. The goal is to demonstrate how externalized authorization can be used to secure AI-driven workflows in a real-world application.

Problem It Solves:
In many content-heavy environments—like media companies, knowledge bases, or educational platforms—AI can streamline the summarization process. However, there’s often a need to ensure that only approved personnel can review or publish AI-generated output. This project solves that by integrating Permit.io to manage access control declaratively and securely, ensuring users only perform actions they're authorized for. It helps prevent unauthorized publishing of unreviewed AI content while maintaining a seamless workflow between users and reviewers.

Demo

Demo Link

Project Repo

Repo Link

My Journey

Process & Challenges:

My process began by outlining the core functionality of the AI Content Assistant: allowing users to submit text content for summarization using AI, and enforcing fine-grained authorization through Permit.io. The goal was to build two distinct experiences—one for content users, and another for admins/reviewers who manage approval.

Key steps I followed:
Project Setup
I initialized a modern frontend with Vite, React, TypeScript, and
TailwindCSS, and used Node.js with Express for the backend. I chose
Render for backend deployment and Vercel for the frontend for quick and
cost-effective hosting.

Permit.io Authorization Integration
Using Permit.io’s SDK, we created roles (user, admin) and enforced permissions through declarative permit.check() calls. For example, users could only summarize content, while admins were the only ones authorized to review or publish.

AI Integration & Challenge Mitigation
Initially, I planned to use OpenAI's API for summarization, but ran into
quota limitations and couldn’t afford a paid plan. To overcome this, I
mocked the AI responses in a realistic way, allowing the core flow of
the app to remain intact and testable.

Integrating Fine-Grained Authorization with Permit.io

Used permit.check() to enforce who can:
Submit content (user)
Review and publish summaries (admin)

User & Admin Interfaces

I built:

A **User Dashboard **where content can be submitted and feedback is received on submission.

An Admin Dashboard where pending summaries are listed with options to approve or reject.

UI Feedback and UX Polish
We implemented alerts to notify users when submissions were successful or when errors occurred, improving usability.

Testing Authorization Paths
A big part of the challenge was validating that Permit.io’s rules were correctly enforced. We tested each API endpoint with both roles to confirm that unauthorized actions were blocked as expected.

🚧 Challenges Faced & How We Solved Them
API Quota Exceeded (OpenAI):
Once our OpenAI usage quota was exceeded, the backend returned 429 errors. Rather than halting progress, we mocked the summarization logic to simulate AI behavior, keeping the project on track.

Role-Based Access Control Logic:
Ensuring that authorization checks were properly scoped to each endpoint required close coordination between frontend logic and Permit.io policy definitions. Debugging was made easier using Permit.io’s activity logs and Policy Studio.

Frontend Feedback on Submission:
Initially, users had no confirmation that their content had been processed. We resolved this by adding alert modals and real-time UI updates.

Authorization for AI Applications with Permit.io

🔐 How We Built Authorization Controls Specifically for AI-Based Tools or Features

In the AI Content Assistant, I applied fine-grained access control using Permit.io to ensure that AI-powered features like content summarization and publishing could only be accessed by authorized roles. Here's how we structured and implemented the authorization:

🧩 Roles and Permissions Design

  I defined two roles within the Permit.io Policy Editor:
  **User:**
    Has permission to summarize content using the AI feature.

  Cannot view, approve, or publish summaries.

 **Admin:**
  Can access the /review and /review/:id endpoints.

  Has permissions to review, approve, or reject AI-generated 
  summaries.

  Can view published content.

🧠 AI Feature Protection with **permit.check()**

    At every backend route related to AI operations, we wrapped access 
    in _permit.check()_ calls. For example:

     ```
      const allowed = await permit.check(user, "summarize", 
      "content");
      if (!allowed) return res.status(403).json({ error: "Not 
      authorized to summarize content" });

     ```

This ensures that even if a user tries to access a protected route manually (e.g., via Postman or dev tools), they’ll be denied unless their role explicitly allows it.

I used this same pattern for:

_/ai/summarize _→ to protect the AI summarization endpoint.

/review and /review/:id → to ensure only admins can review and manage content.

_/published _→ to restrict access to approved summaries only to authorized roles

🔍 Why Externalized Authorization Was Critical

Instead of hardcoding access rules into the application logic, Permit.io allowed us to declaratively manage permissions. This gave us several benefits:

We could easily update or test roles without changing the backend code.

Authorization logic was consistent and transparent across the app.

It helped demonstrate real-world, secure handling of AI tools, which is especially important for tools that can influence published content or decisions.

✅ Summary

Using Permit.io for authorization allowed us to:

Secure our AI-powered routes without writing complex custom middleware.

Enforce least-privilege access.

Easily scale the permission system as we add more roles or features.

Permit-Powered Task Manager: API-First Access Control in Action

Akua Konadu — Fri, 02 May 2025 15:54:16 +0000

This is a submission for the Permit.io Authorization Challenge: API-First Authorization Reimagined

What I Built

I built a Task Manager API — think of it like a digital notebook where people can create, update, or delete their to-dos (we call them “tasks”). But here’s the cool part: not everyone is allowed to do everything. Some people (admins) can add and remove tasks, while others (users) can only view them.

What problem does it solve?
In many apps, rules about who can do what (called authorization) are written deep inside the code. That’s like building a house where the doors are nailed shut — hard to open, hard to change. If you want to update who can come in or out, you need to tear the walls apart!

Instead, the app uses a tool called Permit.io to handle those rules outside the code, like having a smart security guard at the door. We tell Permit.io who the admins are, who the users are, and what each can do — and Permit makes sure those rules are followed.

Why is that awesome?
🧩 Easy to change rules without breaking anything

🔐 Super safe — users only see or do what they’re allowed to

🧼 Clean code — no messy “if admin do this” scattered everywhere

Real-life example:
Let’s say this app was used by schools. The headteacher (admin) can create homework, and the students (users) can only view it. Using Permit.io, we can control all this easily — even if we have 1,000 schools with their own teachers and students!

Demo

You can test the live Task Manager API here:
👉 https://task-manager-t318.onrender.com

note: This is a backend API. You’ll need a tool like Postman to interact with it.

🧪 Test Credentials
✅ Admin
Username: admin
Password: 2025DEVChallenge
👤 User
Username: newuser
Password: 2025DEVChallenge

🔌 Available API Routes
Here are the main API routes:

👤 Authentication
POST /api/auth/login – Get a token

🧾 Task Routes (Protected by Permit.io)

*GET * /api/tenants/:tenantId/tasks – Read tasks

POST /api/tenants/:tenantId/tasks – Create task

PUT /api/tenants/:tenantId/tasks/:taskId – Update task

DELETE /api/tenants/:tenantId/tasks/:taskId – Delete task

Use global as the :tenantId when testing.

Project Repo

Repo Link

My Journey

This project was built to demonstrate how externalized authorization (using Permit.io) can be used to control who can do what in a real-world API. Below is a breakdown of the process, the challenges I faced, how I solved them, and the key lessons I learned.

🔨 Step-by-Step Process

1. Set up the project structure
Created a backend folder with routes, middleware, and utils subfolders.

Initialized the project using npm init and installed dependencies like Express, jsonwebtoken, dotenv, and permitio.

2. Built the core API
Created basic routes for authentication (/api/auth/login) and task management (/api/tenants/:tenantId/tasks).

Enabled JWT-based authentication and stored roles (admin, user) in the token.
Used middleware to validate tokens before accessing protected routes.

Integrated Permit.io Created a Permit.io account and configured resources, roles, and permissions:

Defined the task resource and CRUD actions (read, create, update, delete).

Assigned permissions to roles like admin and user.

Used the permit.check() method in middleware to verify permissions before allowing access.

Deployed the app Deployed the backend using Render.

Made sure the .env file and node_modules were excluded via .gitignore.

Verified the deployed API worked using Postman.

🚧 Challenges Faced & How I Solved Them
**
🔐 **Permit denying access even with correct token: Realized I needed to match tenant, user, and role exactly as defined in the Permit.io UI

🚨
"secretOrPrivateKey must have a value" error: Forgot to set JWT_SECRET in the .env file during deployment — added it and redeployed

🔒 Confusing PDP & API key configuration: Used Permit.io docs and examples to set up pdp: "https://cloudpdp.api.permit.io" and the correct token

🔍 Understanding how roles map to actions: Explored Permit’s visual UI to assign the right permissions to admin and user roles and test them properly

📘 What I Learned

Authorization should not be hardcoded. Using Permit.io made it easy to manage permissions without constantly editing my code.

Separation of concerns is powerful. By keeping permissions outside the core API logic, the system is easier to update and more secure.

API-first means thinking about security upfront. I had to carefully design endpoints with authorization in mind from the very beginning.

Documentation and testing are critical. It was much easier to validate my work because I documented everything clearly and used consistent test users.

API-First Authorization

✅ Step-by-Step Integration with Permit.io
**
**1. Created a Permit.io Project

I started by creating a free account on Permit.io and setting up a new project. This gave us access to the Policy Decision Point (PDP), where all access decisions would be made.

Defined Resources and Actions

I defined the main resource in our app:
task — the object we wanted to control (e.g., view, create, update, delete).
Then I listed actions users might perform on a task:
read, create, update, delete

3. Set Up Roles

admin — full access to all actions on tasks

user — limited access (e.g., read-only)

IF YOU DONT UNDERSTAND ANYTHING REFER TO THE Permit.io Docs from here

Created Declarative Policies Using Permit’s visual editor, I assigned permissions based on roles:

Admins can read, create, update, and delete tasks.

Users can only read tasks.
This gave us fine-grained control over who could do what — without changing our code every time.

Integrated the Permit SDK In our Express.js backend:

I installed Permit’s Node SDK: npm install permitio

Configured the SDK with our API key and PDP URL from the dashboard
Connected Permit inside our middleware to check permissions for every request
const { Permit } = require("permitio"); const permit = new Permit({ token: process.env.PERMIT_API_KEY, pdp: "https://cloudpdp.api.permit.io", });

Protected Routes with Middleware We created a custom middleware checkPermission(action, resource) that: Extracts the user's role and tenant from their JWT Calls permit.check() to ask Permit.io if the action is allowed Grants or denies access accordingly

await permit.check({ user: req.user.id, action: 'read', resource: 'task', tenant: req.user.tenant, });
🚀 What Makes It API-First?
Authorization is treated as part of the API design, not an afterthought.

Each API route was designed with a specific permission in mind.

I used middleware to enforce authorization consistently across routes.

The logic is clean and externalized, so we can change permissions without touching our backend code.

Robot Invaders Game

Akua Konadu — Sat, 26 Apr 2025 12:50:11 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

My project is called "Robo Invaders", a robot-themed web shooter game built using HTML, CSS, and JavaScript. In the game, players control a robot that defends its base by shooting waves of enemy robots. The gameplay includes different types of enemy robots, animated movements, score tracking, player health, and boss battles for added challenge.The game is designed to deliver a fun, polished experience with smooth controls and exciting robot-themed action.

Demo

Repo Link
click here to Play

[This is the default url when depoyed on Alibaba it will download the files into your system .. You can also play the game directly from your system](https://roboinvadersgamestatic.oss-eu-west-1.aliyuncs.com/index.html

Alibaba Cloud Services Implementation

Function Compute
Why I chose it: I needed a lightweight, scalable backend service to handle HTTP requests from my game without setting up or maintaining servers.

How I integrated it: I used Function Compute to create an Express.js server that receives high scores from the game and stores them in ApsaraDB (MongoDB). It listens for both POST and GET requests to manage scores dynamically during gameplay.

Experience: The integration was smooth once I set up the right function permissions and environment. The ability to quickly deploy updates without worrying about infrastructure was a big advantage. A small challenge was understanding how to configure the public endpoint access correctly for communication with the database.

ApsaraDB for MongoDB

Why I chose it: I needed a reliable, scalable database to store player high scores and game statistics. ApsaraDB for MongoDB offered a fully managed, high-availability solution that matched my game’s needs.

How I integrated it: I connected the Function Compute server to ApsaraDB using a MongoDB connection string. Every time a player finishes a game, their score is sent to the server, which checks if it’s a new high score and saves it if necessary.

Experience: Setting up the database and IP whitelist was straightforward, and the replica set provided built-in reliability. The challenge was ensuring the connection string was correctly formatted (escaping special characters like @ in the password) and managing IP whitelisting securely without exposing public access.

Object Storage Service (OSS)

Why I chose it: I needed a reliable place to host and serve my static web game assets, including HTML, CSS, JavaScript, and images.

How I integrated it: I uploaded the entire game folder to an OSS bucket and configured it as a static website, enabling direct access through a public URL.

Experience: OSS made hosting super easy, and performance was excellent. Setting proper CORS rules to allow communication between the front end and backend services took a bit of testing, but documentation helped a lot.

Game Development Highlights

Interesting Aspects & Features I'm Proud Of:

One of the most exciting parts of building my robot-themed game was designing the dynamic high score system. Every time a player finished a game, their score would instantly update on the leaderboard if it was a new high, and a fun "New High Score!" popup animation would celebrate their achievement. 🎉

I'm also proud of how I structured the game to feel responsive and lightweight. I optimized the game to load quickly from Object Storage Service (OSS) and ensured smooth communication with ApsaraDB and Function Compute for saving player data — creating a seamless experience without noticeable lag.

Additionally, even though it was a browser-based game, I added animations, enemy behavior variety, and a boss level to keep the gameplay engaging and progressively challenging. Getting all the moving parts (front end + backend + database) to sync up in a cloud environment like Alibaba Cloud was a huge achievement for me.

RoboRescue Puzzle . A logic-based grid navigation game

Akua Konadu — Thu, 17 Apr 2025 15:48:03 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

RoboRescue Puzzle is a simple robot-themed puzzle game. Players guide a robot through a 5x5 grid filled with obstacles, aiming to reach the green goal tile. Players use commands like “move forward” or “turn” to solve each level. The game has multiple levels, a level select menu, a clean robot-style interface, and saves progress using both local storage and Alibaba Cloud.

Demo

Watch How To Play The Game Here

This is the default link from Alibaba when deployed. It will only Download the file on your computer

Click This Link to Play

Alibaba Cloud Services Implementation

Function Compute (FC)

Why we chose it: We needed a lightweight backend to collect and sync player progress (level, time, moves) from the client side without setting up a full backend server.

Integration: We created a simple Function Compute endpoint that receives a POST request with gameplay data and stores it.

How it works in the game: After each level is completed, a fetch() POST request sends the player's current progress to our Function Compute endpoint.

Experience: The deployment was fast and straightforward. Function Compute was ideal for serverless handling of progress data. The main challenge was setting up proper CORS headers and endpoint permissions, but Alibaba’s documentation helped resolve that.

Object Storage Service (OSS)

Why we chose it: OSS was used to host static assets like the robot image and optionally level configuration JSON files.

Integration: Game assets such as robot.png are hosted on OSS and loaded directly into the game using their public URLs.

How it works in the game: The robot image is retrieved from OSS at runtime and rendered on the game board. This makes updating assets easier without needing to redeploy the entire app.

Experience: Very smooth experience. We appreciated the high availability and CDN-backed delivery which ensured fast loading, even on mobile devices.

Game Development Highlights

One aspect I'm particularly proud of is the level selection system with cloud progress saving using Alibaba Cloud. Players can resume from where they left off, thanks to local storage backed by Function Compute. I also enjoyed designing the robot-themed UI and making sure the game feels fun and intuitive, even on mobile. Adding movement commands, rotation, and obstacles gave it a real puzzle challenge vibe. Seeing it all come together with Alibaba Cloud services made the process both fun and educational.

Github Repository Manager with Pulumi

Akua Konadu — Sat, 05 Apr 2025 21:28:33 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Get Creative with Pulumi and GitHub

What I Built

🧾 Overview of the Project
Github Repository Manager is a simple tool that helps you create a GitHub repository and connect it to a webhook using Pulumi.
This means you can tell GitHub:

“Hey, when someone opens an issue, send me a message!”

It’s like setting up an alarm that rings when someone knocks on your GitHub project. 🔔

We use code (Pulumi) instead of clicking around. It saves time and feels like magic!

📺 Live Demo Video
👉 Watch the demo here:

Project Repo

Github Repo Link with a through readme anyone can read and understand

My Journey

Started with a Plan 📝 I began by reading the Pulumi + GitHub challenge rules. My idea was simple:

"Let’s make an app that creates a GitHub repo and connects a webhook to it using Pulumi."

This app would let GitHub send messages (webhooks) whenever something happens — like someone opening an issue.

Building with Pulumi ⚙️ I used the Pulumi GitHub Provider and the Pulumi Automation API to write code that:

✅ Creates a new GitHub repository

✅ Adds a webhook to the repo

✅ Sends event data (like when an issue is created) to a webhook site

3.** Challenges I Faced** 🚧
Wrong Method Error: I tried using a function (getRepos) that didn’t exist in Pulumi — oops!

Webhook Confusion: At first, I didn’t know where to get a webhook URL. Later, I found Webhook.site, which made it easy.

Code Errors: I saw lots of red underlines in my code editor. I fixed them by reading Pulumi docs.

*How I Fixed Things *🛠 I checked the Pulumi docs to find the correct resources and methods

I asked for help and used trial-and-error to understand how webhooks work

I kept my code super simple so I could learn as I go

What I Learned 💡 How to use Pulumi to create GitHub repositories with code

How webhooks work and how they send data

That reading error messages and asking questions is part of coding — and that’s okay!

Using Pulumi with GitHub

🤖 How I Used Pulumi
I used Pulumi to write code that:

Creates a GitHub repository

Adds a webhook to it

Runs everything with just one command: pulumi up

🎯 Why Pulumi Was Helpful
I didn’t have to click around in GitHub — everything was automated
It saved time and helped me learn Infrastructure as Code

I didnt use pulumi ai in this project

Pulumi ESC Secrets & Configuration Manager

Akua Konadu — Thu, 03 Apr 2025 20:17:26 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Shhh, It's a Secret!

What I Built

Pulumi ESC Secrets & Configuration Manager is a CLI-based tool built with Node.js that enables users to securely manage secrets and configurations using Pulumi ESC. This tool allows users to:

List environments within a **Pulumi project**

Create new environments

Store, retrieve, update, and delete secrets securely

View and tag environment revisions

By leveraging the Pulumi ESC SDK, this project ensures secure handling of sensitive data while providing a streamlined approach to configuration management. It is designed to be simple, efficient, and easy to use for developers managing infrastructure secrets.

Live Demo Link

You can access the full source code and documentation in the GitHub repository. The project is designed as a CLI tool to securely manage secrets and configurations using Pulumi ESC.

Project Repo

Repo Link
Pulumi ESC: TypeScript/JavaScript SDK installation link

My Journey

I set up a Node.js project using the @pulumi/esc-sdk to interact with Pulumi ESC for managing secrets and configurations. The CLI tool allows users to list environments, create environments, and manage secrets efficiently.

Challenges & Solutions
Understanding Pulumi ESC SDK – I overcame this by reading the documentation and testing API calls.

Securely Managing Secrets – Used Pulumi ESC’s encryption features to ensure security.

Improving CLI Usability – Designed a structured menu for better user interaction.

Key Learnings
I gained a deeper understanding of Pulumi ESC, secure configuration management, and best practices for building CLI tools in Node.js.

Using Pulumi ESC

How Pulumi Was Used & Its Benefits

I used Pulumi ESC to securely manage secrets and configurations within environments. The Pulumi ESC SDK allowed me to:

List and create environments dynamically.

Store, retrieve, update, and delete secrets securely using Pulumi’s built-in encryption.

Track environment revisions and apply versioning for better configuration management.

Why Pulumi Was Beneficial
*Security *– Pulumi ESC ensures secrets are encrypted and stored securely.

Scalability – Managing multiple environments and configurations is straightforward.

Simplicity – The SDK provides a clean API, making it easy to integrate with Node.js.

I did not use Pulumi Copilot in this project.

GitHub Metrics Dashboard (Pulumi & Grafana)

Akua Konadu — Mon, 31 Mar 2025 11:44:50 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Get Creative with Pulumi and GitHub

What I Built

This project is a GitHub Metrics Dashboard, built for the Get Creative with Pulumi and GitHub Challenge. It automates GitHub analytics visualization using Pulumi, GitHub Webhooks, and Grafana. The system collects GitHub repository events, processes them, and displays them in a Grafana dashboard for real-time insights.

Live Demo Link

Project Repo

https://github.com/Adonai-Technologies/GitHub-Metrics-Dashboard-Pulumi-Grafana-.git

GitHub Metrics Dashboard (Pulumi & Grafana)

Features

Automated GitHub Metrics Collection – Uses webhooks to track repository activity.
Pulumi Infrastructure as Code (IaC) – Deploys and configures cloud resources.
Grafana Visualization – Presents GitHub analytics with rich dashboards.
Scalable and Flexible – Supports multiple repositories and event types.

Tech Stack

Pulumi (Infrastructure as Code)
GitHub Webhooks (Event Processing)
Node.js & TypeScript (Webhook Receiver)
Grafana (Metrics Visualization)
Cloudflare Tunnel (Webhook Exposure)

Setup Guide

1️⃣ Clone the Repository

git clone https://github.com/yourusername/github-metrics-dashboard.git
cd github-metrics-dashboard

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Webhook Receiver

cd webhook-receiver
npm install
node index.js

If successful, you should see:

Webhook receiver running on port 4000

4️⃣ Expose Webhook Receiver

cloudflared tunnel --url http://localhost:4000

This generates a public URL, e.g.:

https://your-tunnel.trycloudflare.com

5️⃣ Configure GitHub Webhook

Go to your GitHub repository.
Navigate to Settings > Webhooks.
Click Add Webhook.
Set the Payload URL to https://your-tunnel.trycloudflare.com/github-webhook.
Choose application/json as the content type.
Select the events (push, pull request, issues, etc.).
Click Add Webhook.

6️⃣ Deploy to Cloud with Pulumi

Ensure you have Pulumi installed and configured.

pulumi up

7️⃣ Access Grafana Dashboard

Once Pulumi provisions Grafana, access it via the provided URL and configure data sources.

Contribution

Contributions are welcome! Feel free to submit issues and pull requests.

License

MIT License. See LICENSE for details.

🚀 Built for the Get Creative with Pulumi and GitHub Challenge!

My Journey

Initial Planning & Conceptualization
The project began with brainstorming ideas for the Get Creative with Pulumi and GitHub Challenge. The goal was to automate GitHub analytics visualization using Pulumi and Grafana, making it easier to track repository activity in real-time.

⚙️ Setting Up Pulumi & Webhook Receiver
Pulumi Setup: We used Pulumi to define cloud resources for deploying the webhook receiver and Grafana dashboard.

Webhook Receiver: Implemented using Node.js & TypeScript, it listens for GitHub events and processes them.

Cloudflare Tunnel: Used to expose the webhook receiver to GitHub.

🚧 Challenges Faced & Solutions
🔒 Webhook Exposure Issues

Problem: Ngrok required a paid plan for custom domains, and localtunnel was unreliable.

Solution: Switched to Cloudflare Tunnel, which provided a stable public URL.

💾 Webhook Signature Validation

Problem: GitHub webhooks require a secret signature for security, which initially caused authentication failures.

Solution: Implemented HMAC verification to validate GitHub signatures before processing events.

📊 Grafana Deployment & Data Ingestion

Problem: Configuring Grafana to pull data from the webhook receiver was challenging.

Solution: Used a time-series database (e.g., Prometheus) to store webhook data and connected it to Grafana.

🎯 What We Learned
✅ Infrastructure as Code (IaC) with Pulumi – Automating infrastructure deployment made setup reproducible and scalable.
✅ GitHub Webhook Security – Implementing proper authentication for webhooks is critical.
✅ Grafana Dashboarding – Visualizing GitHub repository activity in real-time provides valuable insights.

Using Pulumi with GitHub

Pulumi played a crucial role in automating infrastructure deployment for this project. We used Pulumi's TypeScript SDK to define and provision resources dynamically, making the setup more reproducible and scalable.

🔹 Key Pulumi Implementations:
Provisioning a Webhook Receiver – Pulumi was used to deploy a cloud-based webhook receiver to process GitHub events.

*Deploying Grafana *– Pulumi automated the setup of a Grafana instance for visualizing GitHub metrics.

Configuring Cloud Resources – Instead of manually managing infrastructure, Pulumi managed hosting, networking, and security configurations as code.

🚀 Why Pulumi?
✅ Infrastructure as Code (IaC) – Allowed us to declaratively define infrastructure, reducing manual errors.
✅ Automated Deployment – One command (pulumi up) deploys the entire system.
✅ Multi-Cloud & Flexible – Pulumi supports various cloud providers, making future expansions easier.

GitHub Repository Blueprint Generator with Pulumi

Akua Konadu — Sat, 29 Mar 2025 14:34:39 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Get Creative with Pulumi and GitHub

What I Built

My project, Repo Blueprint CLI, is a command-line tool that automates the creation of GitHub repositories using predefined templates. It leverages Pulumi to provision repositories programmatically, making it easier for developers to set up new projects with consistent structures.

Key Features:
✅ Automated GitHub Repository Creation – Uses Pulumi to create repositories dynamically.
✅ Project Templates – Supports multiple templates like Node.js and Express.js for quick project setup.
✅ Pre-configured Files – Initializes repositories with essential files like index.js, package.json, and .gitignore.
✅ Infrastructure as Code (IaC) – Manages GitHub resources programmatically.

With Repo Blueprint CLI, developers can streamline the process of setting up new repositories, reducing manual work and ensuring best practices. 🚀

Live Demo Link

Repo Blueprint CLI

Project Repo

Repo

My Journey

Project Development Process

Initial Planning & Setup The project started with the goal of automating GitHub repository creation using a CLI tool built with Pulumi. The key steps involved were:

Setting up the project structure with Node.js and Pulumi.

Configuring GitHub authentication via a personal access token.

Defining project templates (e.g., Node.js, Express.js) for repository initialization.

Implementation Developed a CLI command (create.js) to automate repository creation.

Used Pulumi's GitHub provider to provision repositories programmatically.

Implemented template handling to initialize repositories with relevant files.

Challenges & How They Were Overcome a) Pulumi Configuration Issues Challenge: Encountered errors related to Pulumi.yaml configuration and stack outputs.

Solution: Verified stack settings, ensured github:token was correctly set with pulumi config set, and reviewed Pulumi's documentation.

b) Missing Dependencies
Challenge: Errors like "Cannot find module '@pulumi/github'" and "Cannot find module 'dotenv'".

Solution: Installed missing dependencies using npm install and updated the package.json to include all required modules.

c) Pulumi Output Handling
Challenge: Error messages stating "Calling [toString] on an [Output] is not supported."

Solution: Used apply() or pulumi.interpolate instead of .toString() when handling Pulumi outputs.

d) Repository Push Blocked (Secrets Detected)
Challenge: GitHub rejected pushes due to detected secrets in .env files.

Solution:

Removed sensitive data from commits.

Updated .gitignore to exclude .env files.

Used git rebase -i HEAD~X to remove commits containing secrets.

Key Learnings Pulumi Best Practices: Learned how to properly configure and use Pulumi’s GitHub provider.

GitHub Security Rules: Understood GitHub's secret scanning and how to prevent push protection errors.

Modular Code Design: Improved handling of dynamic template creation using JavaScript functions.

Debugging & Dependency Management: Learned how to efficiently debug module resolution errors and manage dependencies in Node.js projects.

Next Steps Expand the CLI to support more templates.

Improve error handling and user feedback.

Automate repository setup with initial commits and CI/CD integration.

Using Pulumi with GitHub

Pulumi was the core infrastructure-as-code (IaC) tool used to automate GitHub repository creation. Instead of manually setting up repositories, Pulumi allowed us to define repositories as code, ensuring consistency, repeatability, and automation.

Implementation Details
GitHub Provider: We leveraged Pulumi's GitHub provider to programmatically create repositories.

Automated Setup:

Created repositories with predefined templates (e.g., Node.js, Express.js).

Configured repository settings such as visibility and default branches.

Added template files like index.js, package.json, and .gitignore.

Secrets Management: Used pulumi config set github:token --secret to securely store GitHub credentials.

Benefits of Using Pulumi
✅ Infrastructure as Code (IaC): Defined repositories in a structured, version-controlled manner.
✅ Automation: Eliminated manual GitHub setup, reducing errors and improving efficiency.
✅ Security: Handled sensitive credentials securely using Pulumi’s built-in secret management.
✅ Scalability: Made it easy to create multiple repositories with consistent settings.

Pulumi Copilot Usage & Key Prompts
Pulumi Copilot was used to generate configurations and troubleshoot issues. Some key prompts included:
"How do I create a GitHub repository using Pulumi?"

"How do I securely store GitHub tokens in Pulumi?"

"How do I apply Pulumi Outputs correctly to retrieve repository URLs?"

"How can I initialize a repository with template files using Pulumi?"

Challenges & Solutions
Issue: "Calling [toString] on an [Output] is not supported."

Fix: Used apply() and pulumi.interpolate for handling outputs properly.

Issue: "Push declined due to repository rule violations (secrets detected).”

Fix: Removed secrets from committed files and used .gitignore to prevent future issues.

Future Enhancements
Automate repository initialization with default commits.

Integrate CI/CD workflows using Pulumi.

Extend support for more project templates.