DEV Community: James Moro

🔍 ArtExplorer - An Interactive and Inspiring Way to Explore Works of Art

James Moro — Mon, 28 Jul 2025 03:28:20 +0000

This is a submission for the Algolia MCP Server Challenge

What I Built

ArtExplorer is an interactive application that uses Algolia's search power to make the Met Museum's art collection more accessible, visual, and enjoyable to explore.

The idea is to offer an experience where users can type in themes, artists, or styles (e.g., “Van Gogh”, “nature”, “Japanese painting”) and instantly view relevant works with organized images and metadata.

The interface also features:

🔍 Interactive filter with artist autocomplete
⚡️ Instant search powered by Algolia InstantSearch.js

Everything was built using HTML, CSS, and vanilla JavaScript, with no frameworks.

Demo

🔗 Live Demo
💻 GitHub Repository
🎥 Presentation Video

How I Utilized the Algolia MCP Server

The Algolia MCP Server was used as a real-time search engine to index and query artworks from the Metropolitan Museum of Art Collection API.

Here’s how it was structured:

Node.js Seed Script
- Fetches data from the Met Museum public API
- Filters and transforms relevant fields (title, artist, period, image, style)
- Indexes into Algolia’s artworks index with objectID and structured fields
Frontend with InstantSearch.js
- searchBox: free-text search with a smart placeholder
- refinementList: artist filter with autocomplete
- hits: responsive grid view displaying artwork cards
- searchFunction: prevents rendering without a search query

Key Takeaways

✅ What I Learned

How to transform a raw API into a rich and fast search experience using Algolia
Implementation of searchFunction for full control over rendering
Smart filtering using refinementList and searchable: true
How to ensure accessibility, responsiveness, and a smooth experience without frameworks

🎯 Challenges Faced

The Met Museum API doesn’t provide full bulk data — required individual ID fetches
Handling null/missing fields required careful validation before indexing
Some visual fields (like title and image) needed fallbacks to avoid breaking rendering

Conclusion

ArtExplorer is proof of how Algolia can turn large datasets into intuitive and delightful discovery experiences - even without heavy frameworks.

Thanks to the Algolia and DEV.to teams for this inspiring challenge!

Credits

Created by @jamesrmoro
Data provided by The Met Museum Collection API

🎨 Office Coolors: A Colorful Intranet for Creative Productivity

James Moro — Sun, 27 Jul 2025 22:44:22 +0000

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

What I Built

Office Coolors is a creative intranet designed for illustrators, visual artists, and anyone who prefers a more visual and interactive approach to organizing tasks.

The main idea is to turn task completion into a visually rewarding process: each completed task unlocks a color that can be used to paint parts of an interactive SVG drawing.

It’s like a digital artistic workspace where motivation grows as your progress brings color to your creations.

✨ Key Features:

Choose a themed workspace: Nature, Office, Beach, or Trailer
Visual tasks unlock exclusive colors
Interactive SVG painting with visual feedback (color explosion effect)
Dark mode with persistent storage
Bounce animations and custom sound effects
Local storage to save your progress

Demo

🖥️ Try the live demo:
https://office.jamesrmoro.me

📁 View the source code on GitHub:
https://github.com/jamesrmoro/office-coolors

📺 Watch in action:

Journey

The idea behind the project came from this simple question:

What if completing each task felt like coloring a piece of a drawing?

As both an artist and a front-end developer, I wanted to explore this fusion of productivity, aesthetics, and gamification.

🧠 Key Design Decisions:

Using SVGs as a base for coloring gave users artistic freedom. Colors are only unlocked after task completion — turning progress into a reward.
Tasks are grouped into "floors," like sections of a creative building.
With ambient sounds, colorful particles, and visual themes, the experience becomes fun and immersive.

🛠️ Technologies Used:

HTML, CSS, and vanilla JavaScript
SVG manipulation via DOM
Persistent progress using localStorage
tsparticles/confetti for celebration animations
Sound effects via Audio API
Dark mode with memory
bounce animations for modals

Closing Thoughts

Office Coolors is more than just a task tool — it’s a digital space where art and progress go hand in hand.

Perfect for illustrators and creatives looking for a more visual and engaging way to stay productive. Each task completed brings your canvas to life.

✨ Feel free to explore, customize, or expand this project to suit your own creative workflow!

Thanks to Axero and DEV for encouraging imagination, customization, and creativity in the digital workspace. 🎨

💾 Save What You Search: A Chrome Extension Created with Runner H

James Moro — Sat, 05 Jul 2025 19:25:46 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I created a Chrome extension called SideSave, designed especially for content professionals, SEOs, and competitive analysis.

The idea came from my own workflow writing search-optimized content, where I often need to analyze how competitors position themselves in Google's sponsored results.

The problem is that these ads — although rich in copywriting, links, persuasive hooks, and keywords — disappear quickly. Just by refreshing the search or waiting a few minutes, the same ad may no longer appear.

This makes analysis and later study difficult.

SideSave solves this by saving ads with title, link, snippet, and a clear visual marker that it's a sponsored result.

Demo

How I Used Runner H

I used Runner H as a tool to automatically and accurately generate the extension code.

With a well-structured prompt, I was able to generate:

A V3-compatible manifest.json
content.js scripts that dynamically detect Google results
Ad detection based on text like "Sponsored"
A floating “➕ Save to SideSave” button with smart behavior
A fixed sidebar with a flat/striped style
Persistent storage using chrome.storage.local
Communication between popup and content script via chrome.runtime.sendMessage

All of this was generated with the help of the AI in Runner, without me needing to manually code everything.

Automation saved me hours of fine-tuning and accelerated the prototyping process.

Use Case & Impact

The main use case for this extension is for digital marketers, content creators, copywriters, and SEO specialists who want to study how ads are structured on search pages — especially when creating campaigns, optimized landing pages, or analyzing competitors.

With SideSave, you can:

Save and classify sponsored ads for future reference
Compare headline and description copy used in competitor campaigns
Identify link patterns used in paid ads
Store ideas for your own strategic content creation

The impact is clear: it makes analytical and creative work easier by keeping key insights readily accessible in the browser.

Social Love

Youtube: https://youtu.be/WoncvzT_bUI
X: https://x.com/jamesrmoro/status/1941583769053372422

🎮 From Prompt to Play: My Game Made with Amazon Q CLI

James Moro — Sun, 22 Jun 2025 03:07:19 +0000

Recently, I saw an announcement right here on dev.to about the Build Games with Amazon Q CLI challenge promoted by AWS. The idea is simple: use Amazon Q's AI to build a game, share how you did it, and if you're among the first 2,000 valid participants, you get an official Amazon Q t-shirt.

Why I Decided to Join

I had already done some tests with Amazon Q before, so when I saw this challenge, I realized it was the perfect opportunity to turn an experiment into something more fun — and still walk away with a new t-shirt in the end. In fact, I had already participated in a previous initiative and shared my experience in this article here on dev.to.

Using the Amazon Q Extension in VS Code

Instead of using just the terminal, I chose to use the official Amazon Q extension for Visual Studio Code, which makes the experience much smoother. With it, you can talk directly to the AI assistant inside the editor, request code snippets, tweak specific parts, and even get performance improvement suggestions for your game.

Everything was super fluid — I switched between the code and Q's chat directly in VS Code, making the process very productive.

The Game I Built

I went for a classic arcade-style game, with a spaceship, GitHub commits as enemies, and a retro vibe. Everything was built using HTML, CSS, and JavaScript, generating code with support from Amazon Q directly inside Visual Studio Code.

💡 I chose this style because it's perfect for testing movement, collision, scoring, and visual effects — and it's lightweight enough to run in any browser.

Game Features:

Player movement using arrow keys (left and right)
Shooting with the space bar
"Enemies" represented by GitHub commits
Real-time scoring
Explosions, visual effects, and shooting sound

Final Result

The game is simple, but quite satisfying for something built almost entirely with AI support. And best of all: I learned a lot through the process without getting stuck in repetitive steps.

📺 Watch the gameplay in action:

👉 Want to try it yourself?

The game is desktop-only:
🎮 https://commits-invaders.jamesrmoro.me

Conclusion

Building a game with AI was a surprisingly fun experience. The Amazon Q extension for VS Code made a huge difference, bringing contextual suggestions directly into the editor and speeding up development.

🎮 #AmazonQCLI #BuildGamesChallenge #AmazonQDevCLI

🕹️ History of Game Consoles – A Visual Timeline Powered by Storyblok

James Moro — Thu, 19 Jun 2025 22:00:54 +0000

This is a submission for the Storyblok Challenge

💡 What I Built

My project is a visual timeline of video game consoles, where each card displays the name, release year, image, and description of a classic console.

The goal was to create a responsive and visually engaging experience, without needing to update the code every time I wanted to add or edit consoles.

All content is powered by Storyblok, which serves as a headless CMS to feed the timeline with console data.

I used Swiper.js to build the visual carousel and enable smooth slide transitions.

Demo

Storyblok Space:
👉 https://app.storyblok.com/#/me/spaces/342145/stories/0/0/689686892

Code Repository:
👉 https://github.com/jamesrmoro/timeline

Live Demo:
👉 https://timeline.jamesrmoro.me/game

The domain is custom for personal use, with public mode enabled for viewing.

Demo Video:

🛠 Tech Stack

HTML + CSS + Vanilla JavaScript
Swiper.js for the responsive carousel
Storyblok as CMS
Deployed via Vercel

🧩 How I Used Storyblok

Created a component called consoles with fields: title, year, description, and image
Inside the game page, I used a consoles block to store all items
Used the Storyblok CDN public API to load data on the frontend without a backend
Content can be edited visually, and updates are reflected in real-time

🤖 AI Integration

This project does not use any AI integration.

📚 Learnings and Takeaways

I learned how to integrate Storyblok with a pure frontend project, no frameworks involved
Understood how to build a modular and scalable structure for visual content
I’m happy with the result and see potential to apply this structure to timelines of books, movies, biographies, or historical events

🎉 Celebrating Festa Junina: Brazilian Tradition in Color and Motion

James Moro — Sat, 07 Jun 2025 22:25:38 +0000

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

In Brazil, June is marked by “Festa Junina,” a vibrant celebration filled with colors, traditional foods, lively music, and lots of joy. So, I decided to create a Festa Junina scene entirely in CSS, taking this opportunity to share a bit of Brazilian culture with the global community.

Demo

🎉 https://festa-junina-2025.jamesrmoro.me

Journey

Since 2019, I’ve made a habit of creating Christmas scenes using only HTML and CSS, documenting the entire process year after year in this playlist.

I always wondered where I could share these creations more broadly—so I was thrilled to see that this month’s Frontend Challenge theme is “celebration.” I decided to bring Festa Junina to the challenge and share a bit of this tradition.

For this Festa Junina scene, I added:

A fixed side menu with information about Festa Junina.

Clickable stalls:

Food: Discover the main traditional dishes with images.
Games: See the most classic Festa Junina games.
Correio Elegante: traditional messages from the celebration.

Floating accordion: click to hear a typical tune that brings Festa Junina to life.

🏠 Smart Real Estate: Delivering Instant Sales Updates with Postmark, Chrome Extensions & IoT Integration

James Moro — Sun, 01 Jun 2025 07:22:37 +0000

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

💡 What I Built

In the fast-paced real estate market, instantly notifying the team about new sales is essential for engagement and collaboration.

I created an integrated digital ecosystem for construction companies and real estate agencies, combining:

🧩 Chrome Extension for quickly registering sales
📧 Postmark for reliable transactional email delivery
🔗 Supabase as a real-time scalable backend and database
🔔 PWA (Progressive Web App) for push notifications and multi-platform engagement
🔥 IoT Integration (ESP32 Wi-Fi) for physical notifications in the office

The focus is on real-time, frictionless communication, with Postmark as the pillar for transactional messages, and Supabase ensuring data is always available, regardless of device or browser.

🎥 Demo

📁 Code Repository

jamesrmoro / light-estate-extension

🏙️ Light Estate

Smart Real Estate Dashboard – Instantly track apartment sales, notify your team, and manage all projects in the cloud.

✨ Features

Real-time Sales Tracking – Visual building model, click apartments to register sales.
Instant Notifications – Email and Push notifications for your team using Postmark and webhooks.
Chrome Extension Integration – Register new sales directly from your browser.
Team Management – Add and manage team emails per project.
Project Configs – Support for multiple real estate projects, with custom floors and apartments.
Cloud-first – Built on Supabase, deployable anywhere (Vercel, Netlify, your server).
Mobile Friendly – Works on all devices.

🚀 Demo

▶️ Click the image above to watch the full demo on YouTube!
https://youtu.be/Cc812fVl26I

See the extension in action, real-time sales, notifications, and project management in under 5 minutes.

🛠️ Setup

Clone the repository

git clone https://github.com/jamesrmoro/light-estate-extension.git
cd light-estate-extension

Configure your Supabase credentials
Open the file…

View on GitHub

⚙️ How I Built It

1. Chrome Extension: Sales Trigger

The user registers sales directly from the browser, through a simple and intuitive interface.

Besides the fields for sale data, it is possible to register and manage the list of emails for collaborators who should be notified.

That way, whenever an admin or agent records a new sale, all registered emails instantly receive both a Postmark email and a PWA notification.

2. Supabase: Cloud Database & Synchronization

All sales are stored in Supabase, which combines the robustness of PostgreSQL with modern real-time APIs.

I chose this platform precisely because of the easy integration with both the Chrome extension and the PWA:

Allows you to centralize all sales data, notifications, and collaborators in one place, accessible via API.
Ensures any update made on one device is instantly reflected for everyone, with no infrastructure hassle.
Comes with ready-to-use authentication, flexible access rules, and great documentation, accelerating development and scalability.

Thus, the experience of managing, querying, and notifying about sales becomes truly seamless, modern, and accessible across multiple devices.

3. Postmark: Transactional Email Engine

Postmark is at the heart of communication for this ecosystem, ensuring that everyone involved receives information about new sales quickly, securely, and with a personal touch.

Beyond simple sending, you can create advanced HTML templates, incorporating company branding, digital contracts, QR Codes for e-signatures, and dynamic information about each sale. This makes messages professional, engaging, and ready for a variety of business scenarios.

Another major Postmark differentiator is its webhook functionality.

Webhooks allow you to receive, in real time, events from Postmark itself, such as delivery confirmation, email opens, clicks, and sending failures.

With this, developers can automate processes, feed dashboards, update internal systems, and even trigger new actions whenever the status of a transactional email changes.

4. PWA: Push Notifications

In addition to the Chrome extension, the platform also works as a PWA (Progressive Web App), taking the user experience to the next level.

The PWA offers the best of both worlds: it can be installed on desktop or mobile, works offline, and has performance close to a native app, but with all the flexibility of a web application.

One of the great advantages of this approach is the ability to send real-time push notifications. As soon as a sale is recorded, all connected collaborators — regardless of device or OS — immediately receive a push notification, keeping the entire team engaged and informed, even outside the main system.

With the integration between push notifications and Postmark, the user is absolutely certain they have received an important email: as soon as the push notification appears, they know that a new transactional email (via Postmark) has landed in their inbox, making it impossible to miss critical information about new sales.

In daily practice, this means:

The agent can be in the field and still instantly know about updates.
The manager tracks sales performance without needing to open reports or access the system.
The team celebrates every new win together, creating a more connected and motivated environment.

The result is a modern, efficient, and truly omnichannel experience for real estate sales and management teams, with all the delivery reliability of Postmark and the convenience of push notifications.

5. IoT Integration (ESP32 Example)

To make everything more fun, I built — following the same digital layout — a physical mockup of a building, easily produced with a 3D printer.

I used an addressable WS2812 LED strip (commonly known as "NeoPixel") to represent the windows: each LED corresponds to an apartment.

When a sale is registered in the system, the corresponding window’s LED lights up, creating a physical, playful, and impactful visualization for the team to track sales in real time.

This prototype can be replicated and customized according to the number of apartments/floors, serving as an excellent engagement piece for offices, events, and fairs.

Tech Stack

Chrome Extension (JavaScript)
Node.js (API/backend)
Supabase (database, authentication, real-time API)
Postmark (email delivery)
ESP32 (hardware integration)
PWA (push notifications and offline support)
(Optional: Firebase or other push service)

🎯 Conclusion

My experience with Postmark exceeded expectations and was essential in creating a truly robust and professional product.

Customizing the templates made it easy to standardize email visual identity, while Postmark's ultra-high deliverability guaranteed maximum confidence: important notifications and updates land directly in the recipient’s inbox, with no risk of getting lost in spam or junk folders.

This means essential information about each sale always arrives in the right place at the right time, strengthening communication, engagement, and efficiency for the sales team.

✨ Challenge Feed: Real-Time Programming Challenges in One Place

James Moro — Wed, 21 May 2025 16:52:49 +0000

This is a submission for the Bright Data AI Web Access Hackathon

What I Built

I created Challenge Feed, a web application where you can discover the latest programming challenges from several popular platforms—all in one place. Developers often need to visit several sites and browse multiple pages to find new challenges. My goal was to simplify this process, making it faster, more centralized, and engaging.

Challenge Feed collects challenges from different sources, stores and manages this data using Bright Data, and displays everything in a modern interface with features like saving, liking, and viewing highlights in a stories format. Whether you’re looking for hackathons, code jams, or online competitions, you’ll now find it all in one place.

Demo

You can try Challenge Feed live here:

👉 https://challenge-feed.jamesrmoro.me

📺 Watch video:

Main features:

Real-time feed with programming challenges from jams, hackathons, and online competitions
Save and like challenges (using Appwrite for user sessions)
Highlights in stories format, to view images and links
Integrated AI-powered chat assistant (powered by together.ai) to help users discover and discuss challenges
Responsive layout for mobile and desktop

Currently, I’ve used only two example sources to power the Challenge Feed. These platforms were initially chosen for their relevance and diversity of programming challenges. However, the idea is to expand the project and integrate other sites in the future, making the feed even more complete and comprehensive for the developer community.

How I Used Bright Data's Infrastructure

Bright Data’s Collector automatically gathers programming challenges from the sites I select, capturing opportunities on platforms that usually don’t appear in traditional feeds.

Even on protected sites or those with dynamic content loading, Bright Data allows access to the necessary content to power the feed, overcoming common blocks found in traditional scraping.

The data comes already structured, ready to be stored in Appwrite (an open source backend that handles authentication, database, and real-time data management) and displayed in the app, all in real time and at scale.

What’s amazing is that Bright Data simulates a real user browsing the site—clicking, scrolling, and interacting with JavaScript elements when necessary—making it possible to capture challenges even on fully dynamic pages.

Performance Improvements

To keep the feed fast and scalable, I implemented some important optimizations:

Efficient Data Fetching: Data is only fetched from Bright Data when truly needed, reducing processing and unnecessary requests.
Optimized Database Reads: Challenges are grouped and indexed in Appwrite, enabling fast queries and filters, as well as efficient pagination.

Stack and Deployment

Challenge Feed was built using a modern JavaScript ecosystem:

Frontend: Next.js (React)
Backend & Database: Appwrite
Real-time data collection: Bright Data (MCP)
Conversational AI: together.ai
Hosting & Deployment: Vercel, with a custom domain configured directly on the platform

Vercel made continuous deployment and custom domain setup extremely simple, allowing the app to be published in just a few minutes, production-ready.

Conclusion

Using Bright Data made integrating and automating the Challenge Feed much easier—it made collecting and updating data from different sources simple and straightforward.

Have you ever joined a challenge, hackathon, or jam? Share your experience in the comments!

⚔️ The Status Rebellion: An Epic Game About HTTP Codes

James Moro — Sat, 10 May 2025 11:02:11 +0000

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

💡 What I Built

I created a game using HTML, CSS, and JavaScript called The Status Rebellion, with the goal of teaching HTTP status codes in a fun, interactive, and visual way.

The player must drag cards representing each status into a central trap, where unique effects are triggered based on the meaning of each code.

During the game, players can test their knowledge with 14 examples of HTTP codes, having only 3 lives — or, if they prefer, they can skip a card and move on to the next.

The game features a retro look, soundtrack, animations, and simple mechanics that make learning more engaging.

To complement the project, I created a video that tells the story behind the game and shows how tools like Amazon Q Developer can greatly help with the coding side, while design focuses on creating interactive visual experiences. This separation speeds up the transformation of ideas into reality.

🧪 Demo

🕸️ Play now:
👉 https://the-status-rebellion.jamesrmoro.me

📺 Watch video:

📁 Code Repository

jamesrmoro / the-status-rebellion

A retro-inspired HTML game to learn HTTP status codes like never before.

⚔️ HTTP - The Status Rebellion

A fun interactive game where you must return the HTTP status codes to their original universes. Drag each card into the HTTP TRAP in the center and observe the unique effects of each status.

ℹ️ About the Game

HTTP The Status Rebellion is a game inspired by the true guardians of the internet - HTTP status codes. The game features six different status codes (200, 301, 302, 403, 404, and 500) that you need to send back to their respective universes by dragging them into the HTTP TRAP.

🎮 Play Now

👉 Play the game

📺 Watch the Demo

👉 Watch the video

✨ Features

Interactive drag-and-drop gameplay
Unique animations and sound effects for each status code
Responsive design that works on both desktop and mobile devices
Beautiful space-themed background with stars, shooting stars, and nebulas
Retro console that displays game progress

🧪 Technologies

…

View on GitHub

⚙️ How I Used Amazon Q Developer

I used Amazon Q Developer directly within Visual Studio Code as a coding assistant throughout the entire development of the game.

I started by installing the official extension and, on the very first command, the AI asked for permission to edit files. From that point on, the experience became smooth and collaborative.

I described the general idea of the game and started requesting features in parts, such as:

An animated starry sky using only CSS and JS
The drag and drop system, with collision detection between card and trap
A custom modal with animations and ESC key to close
Integration with the Swiper.js library for card navigation

For each feature, I asked Amazon Q to deliver a functional base — and from there, I added my personal touch to the visual identity, using my front-end knowledge to adjust colors, fonts, textures, icons, sound effects, and the desired retro style.

🧩 Conclusion

Amazon Q was essential for speeding up development and supporting me when doubts or technical blocks arose. The experience was like having a coding partner available at all times, responding in natural language and helping turn the idea into reality.

🏰 Castle of Keys: API-First Access Control in a Physical-Digital Game

James Moro — Sat, 03 May 2025 22:17:12 +0000

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

What I Built
- How It Works (Step-by-Step Flow)
Demo
My Journey
API-First Authorization
- ESP32 Code (Arduino)
- PHP Proxy for Permit.io (ESP32 Integration)
Conclusion

What I Built

Castle of Keys is an interactive, real-world access control game inspired by medieval castles and powered by externalized authorization using Permit.io.

Players assume roles like King, Cook, or Servant and attempt to access different levels of a castle. Access is controlled by external policies — not hardcoded logic.

🔄 How It Works (Step-by-Step Flow)

The player presents an RFID card to the reader connected to the ESP32.
The ESP32 reads the UID and sends a request to proxy.php, including the UID and desired action (e.g., access_floor_2).
The proxy.php script securely forwards the request to the Permit.io API using a private token.
Permit.io returns whether the access is allowed ("allow": true) or not.
The ESP32 interprets the response and activates the corresponding LED:
- ✅ Green = Access Granted
- ❌ Red = Access Denied
In parallel, the ESP32 sends the log to log.php — used for visual display or debugging in the web interface.

⚠️ Note: log.php is not required for Permit.io to function. It’s used to display access attempts inside the game UI.

🎮 Demo

👉 Watch the full walkthrough demo (Web + Hardware):

🎮 Or test the web version (no hardware required): Try the Castle of Keys (Web Demo)

💡 My Journey

This project started as an idea to bring access control to life through gamification. I wanted to create something more than just a UI button or a permission table — something tangible, physical, and interactive. That’s why I decided to integrate real hardware like RFID readers and, soon, biometric sensors, to make the experience both fun and immersive.

🔐 API-First Authorization

Below is the actual .ino code running on my ESP32. It reads an RFID card using the RC522 module, sends the UID to a secure PHP proxy, and receives a real-time authorization decision from Permit.io.

🔌 ESP32 Code (Arduino)

#include <WiFi.h>
#include <HTTPClient.h>
#include <SPI.h>
#include <MFRC522.h>

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASSWORD";


const char* permitUrl = "https://example.com/api/proxy.php"; // your private endpoint
const char* logUrl = "https://example.com/app/log.php";

#define RST_PIN 22
#define SS_PIN  21

MFRC522 rfid(SS_PIN, RST_PIN);

void setup() {
  Serial.begin(115200);
  SPI.begin();
  rfid.PCD_Init();

  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi connected!");
}

void loop() {
  if (!rfid.PICC_IsNewCardPresent() || !rfid.PICC_ReadCardSerial()) {
    return;
  }

  String uid = "";
  for (byte i = 0; i < rfid.uid.size; i++) {
    uid += String(rfid.uid.uidByte[i], HEX);
  }
  uid.toUpperCase();

  Serial.print("Card detected: ");
  Serial.println(uid);

  // Make Permit.io authorization request
  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;
    http.begin(permitUrl);
    http.addHeader("Content-Type", "application/json");

    String payload = "{\"user\":{\"key\":\"" + uid + "\"},\"action\":\"" + action + "\",\"resource\":{\"type\":\"document\",\"tenant\":\"devs\"},\"context\":{}}";

    int httpResponseCode = http.POST(payload);

    if (httpResponseCode > 0) {
      String response = http.getString();
      Serial.println("Permit.io response: " + response);

      if (response.indexOf("\"allow\":true") > 0) {
        Serial.println("✅ Access granted");
        accessGranted = true;
        // digitalWrite(GREEN_LED, HIGH);
      } else {
        Serial.println("❌ Access denied");
        // digitalWrite(RED_LED, HIGH);
      }

    } else {
      Serial.print("Error on sending request: ");
      Serial.println(httpResponseCode);
    }

    http.end();

    // Send access log
    HTTPClient logHttp;
    logHttp.begin(logUrl);
    logHttp.addHeader("Content-Type", "application/json");

    String logPayload = "{\"uid\":\"" + uid + "\",\"action\":\"" + action + "\",\"status\":\"" + (accessGranted ? "granted" : "denied") + "\"}";
    logHttp.POST(logPayload);
    logHttp.end();
  }

  delay(3000); // Prevent repeated scans
}

PHP Proxy for Permit.io (ESP32 Integration)

To keep your Permit.io API key safe, I created a simple proxy.php file. The ESP32 sends a request to this PHP script instead of calling Permit.io directly.

Here’s the full code:

<?php
// proxy.php - Receives data from ESP32 and checks permission via Permit.io

// Read the incoming JSON from ESP32
$body = file_get_contents('php://input');
$data = json_decode($body, true);

// Prepare the payload for Permit.io
$payload = json_encode([
  "user" => [
    "key" => $data['user']  // UID from RFID card
  ],
  "action" => $data['action'], // Example: "access_floor_1"
  "resource" => [
    "type" => "document",   // Replace with your configured resource type
    "tenant" => "devs"      // Tenant ID (if applicable)
  ],
  "context" => new stdClass() // Additional context (empty for now)
]);

// Send the request to Permit.io
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://api.permit.io/v2/allowed");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  "Authorization: Bearer YOUR_PERMIT_API_KEY", // Replace with your Permit.io API key
  "Content-Type: application/json"
]);

$response = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// Return the result back to the ESP32
http_response_code($http_code);
echo $response;

✅ Conclusion

This project shows how easy it is to integrate real-world hardware with Permit.io. With just a few lines of code and external policies, you can control access securely — without hardcoding anything.

Make Your Game Faster with IMG + Alibaba Cloud CDN

James Moro — Sat, 26 Apr 2025 21:02:50 +0000

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

What I Built
Live Demo link
Alibaba Cloud Services Implementation
- Using the CDN to reduce latency
- Image processing via URL
- Automating with JS in the Game
- Creating Custom Styles in the Alibaba Console
Game Development Highlights
Conclusion

What I Built

Container Lost: Balance on the High Seas is my third robot-themed game.

Since this is my third project in the series, I was motivated to dive even deeper into Alibaba Cloud's features right from the start — especially focusing on performance and delivery optimizations.

This time, the robot XR-77 — built for maintenance and combat — wakes up inside a drifting container after a shipwreck.. Deranged consoles, insane sound systems, and hostile drones also fell into the waters. XR-77 must keep his balance on the high seas, dodging falling objects and collecting power-ups to survive the storm — all while trapped in a container filled with uncontrollable products.

🖼️ Screenshots:

Live Demo link

🔗 Play now:
👉 https://container-lost.jamesrmoro.me

Alibaba Cloud Services Implementation

When I started working on my third robot-themed game, "Container Lost", one of my main concerns was loading time — especially on mobile connections. Since it's a static game with lots of images (sprites, backgrounds, HUD, effects), I knew I had to optimize everything I could.

That's when I started exploring Alibaba Cloud's tools, and ended up discovering two features that completely transformed the project’s performance:

The Global CDN integrated with OSS
The image processing (IMG) feature directly in the URL

Using the CDN to reduce latency

The first step was to enable the CDN on my OSS bucket. This made all the assets (JS, images, sounds, etc.) get distributed across servers worldwide, improving response times.

With the CDN, I also set up custom cache rules, like making the index.html expire every 1 minute — not typical for static sites, but super useful during active development when I need to push quick updates and test changes in real-time.

Image processing via URL

After enabling the CDN, I discovered a feature called IMG.

OSS panel on Alibaba Cloud showing the image processing section (IMG) — This is where you can configure custom styles to resize, convert, and optimize images directly via URL.

Basically, you can add parameters directly in the image URL, like this:

https://container-lost.jamesrmoro.me/assets/images/bg.jpg?x-oss-process=image/resize,m_fill,w_320,h_480/format,webp/quality,q_75

With that, I can:

Resize images for mobile devices
Automatically convert them to WebP
Reduce file size without editing or duplicating anything

Automating with JS in the Game

Since the WebP format offers better compression without losing quality, I wrote a simple script to apply this format to all images automatically — using the CDN URL with dynamic IMG parameters:

const cdn = "https://container-lost.jamesrmoro.me/assets/images";
const ossSuffix = "?x-oss-process=image/format,webp";

const imagePaths = [
    "bg.jpg",
    "shield.png",
    "life.png",
    "battery.png",
    "combo.png",
    "game.png",
    "tv.png",
    "drone.png",
    "phone.png",
    "sound.png",
    "rain-1.png",
    "rain-2.png"
].map(name => `${cdn}/${name}${ossSuffix}`);

With this, all images are served in WebP format, reducing file size without the need to duplicate files or modify anything on the backend. The conversion happens directly in the URL, thanks to Alibaba Cloud’s x-oss-process feature.

Creating Custom Styles in the Alibaba Console

Alibaba Cloud allows you to create reusable image styles directly in the OSS panel, which makes it much easier to generate clean and consistent URLs in your code.

Name	IMG Parameter
webp-only	image/format,webp/quality,q_85
mobile	image/resize,m_fill,w_320,h_480/format,webp/quality,q_75
tablet	image/resize,m_fill,w_768,h_1024/format,webp/quality,q_80

Example:

https://container-lost.jamesrmoro.me/assets/images/bg.jpg?x-oss-process=style/mobile

In my case, I created three simple styles with easy-to-remember names that I can call directly in the URL.

Game Development Highlights

To handle responsive images efficiently, I used CSS variables (:root) with Alibaba Cloud’s x-oss-process. This lets me serve optimized WebP images directly via CSS, switching between styles based on screen size.

Example:

:root {
    --intro-desktop: url("https://container-lost.jamesrmoro.me/assets/images/intro-desktop.png?x-oss-process=image/format,webp");
    --intro-mobile: url("https://container-lost.jamesrmoro.me/assets/images/intro-mobile.png?x-oss-process=image/format,webp");
}

1. Background image of the title screen (desktop version)

@media (min-width: 601px) {
    .titleBackground {
        background-image: var(--intro-desktop);
    }
}

var(--intro-desktop) loads an optimized webp image for larger screens using x-oss-process.

2. Background image of the title screen (mobile version)

@media (max-width: 600px) {
    .titleBackground {
        background-image: var(--intro-mobile);
    }
}

var(--intro-mobile) ensures mobile devices carry a lighter version of the background image automatically.

The game was built entirely with CreateJS, which I used to handle canvas rendering, sprite animations, real-time updates, and interactions.

🌊 Animated SVG waves and continuous rain effects
⚡ Explosions, sparks, and lightning with dynamic visual control
🛡️ Creative power-ups: shield, battery, explosive combo
🎮 Movement with easing, animated sprites, and direction flipping
📱 Mobile-first design with both touch and keyboard controls
📳 On mobile, the robot vibrates when hitting the edges of the container
💾 High Score system using localStorage, with persistent scoring
🧊 Rust effect if the robot remains idle for 10 seconds

Conclusion

I already expected a CDN to help, but what really made the difference was the ability to automate image delivery for each screen size — without plugins, without creating multiple image versions, and without setting up a backend.

If you're building static games (or visually heavy websites), it's definitely worth exploring these features. In my case, I reduced mobile loading time by over 40% with just these optimizations.

Automatic Game Deployment on Alibaba Cloud Using GitHub Actions

James Moro — Mon, 21 Apr 2025 21:01:25 +0000

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

What I Built
Live Demo link
Alibaba Cloud Services Implementation
- Create Secrets on GitHub
- Create the Automatic Deploy Workflow
Game Development Highlights
Conclusion

What I Built

In this article, you will learn how to set up an automatic deployment workflow to publish static websites directly to Alibaba Cloud (OSS) using GitHub Actions — without needing to use the local command line with ossutil.

Prerequisites

An Alibaba Cloud account
An OSS bucket created and configured as a static website
A project with a public/ folder containing your files (e.g., index.html, assets/, etc.)
A GitHub repository

Live Demo Link

👉 Play now: https://arena-magnobot.jamesrmoro.me

jamesrmoro / arena-magnobot

Arena Magnobot

Arena Magnobot is a fast-paced, retro-style online game where you control a magnetic robot in a futuristic arena. Your mission is to dodge dangerous goods, collect valuable product power-ups, and survive as long as possible.

A high-speed retro arena game where you control a magnetic robot and dodge dangerous products while collecting power-ups — built entirely with JavaScript and HTML5 Canvas!

Playable online & mobile-friendly
Built with CreateJS
Deployed automatically to Alibaba Cloud OSS using GitHub Actions
Supports multiple languages (PT 🇧🇷 / EN 🇺🇸 / ZH 🇨🇳)
PWA ready — install the game on your device and play offline!

About this project

This repository contains the full source code and deployment workflow for Arena Magnobot, a retro-inspired arena-style web game developed for the Alibaba Cloud Web Game Challenge.

In the game, you command a magnetic robot that must collect power-ups and avoid hazardous products in…

View on GitHub

☁️ Alibaba Cloud Services Implementation

I've broken this tutorial down into 2 quick and easy steps to help you deploy your static content using Alibaba Cloud OSS with GitHub Actions.

Step 1: Create Secrets on GitHub

In your GitHub repository:

Go to Settings > Secrets and variables > Actions
Click New repository secret and create one at a time the following secrets:

Name	Value
OSS_ENDPOINT	e.g., `oss-eu-west-1.aliyuncs.com`
OSS_BUCKET	Your bucket name
OSS_KEY_ID	Your AccessKeyId
OSS_KEY_SECRET	Your AccessKeySecret

For each secret, do the following:

Go to Settings > Secrets and variables > Actions
Click "New repository secret"
Fill in the fields like this:

1st secret – OSS_ENDPOINT

Name: OSS_ENDPOINT
Secret: oss-eu-west-1.aliyuncs.com (or your bucket’s endpoint)
Click "Add secret"

2nd secret – OSS_BUCKET

Name: OSS_BUCKET
Secret: your-bucket-name
Click "Add secret"

3rd secret – OSS_KEY_ID

Name: OSS_KEY_ID
Secret: your Alibaba Cloud AccessKeyId
Click "Add secret"

4th secret – OSS_KEY_SECRET

Name: OSS_KEY_SECRET
Secret: your Alibaba Cloud AccessKeySecret
Click "Add secret"

After adding the four secrets, move on to the next step to create the automatic deploy workflow.

Step 2: Create the Automatic Deploy Workflow

Now that your secrets are ready, it's time to tell GitHub Actions what to do every time you push changes to your code.

1. Create the workflow file

Inside your project, create the following folder structure (if it doesn’t exist yet):

.github/workflows/

Inside this folder, create a file named:

deploy.yml

2. Paste the following content into `deploy.yml`

This script tells GitHub Actions to run a deployment process every time a push is made to the main branch.

name: Deploy to Alibaba OSS

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Download and configure ossutil
        run: |
          curl -O https://gosspublic.alicdn.com/ossutil/1.7.16/ossutil64
          chmod +x ossutil64
          ./ossutil64 config \
            -e ${{ secrets.OSS_ENDPOINT }} \
            -i ${{ secrets.OSS_KEY_ID }} \
            -k ${{ secrets.OSS_KEY_SECRET }}

      - name: Upload to OSS
        run: |
          ./ossutil64 cp -r public/ oss://${{ secrets.OSS_BUCKET }}/ --force

What this workflow does

Step 1: Checks out your latest code from the main branch.
Step 2: Downloads ossutil, the CLI tool used to interact with Alibaba OSS.
Step 3: Configures ossutil using your secrets (already set in Step 1).
Step 4: Uploads all files from the public/ folder to your OSS bucket, replacing the previous content.

Once this file is added and committed, any push to the main branch will automatically trigger the deployment process.

The GitHub Actions workflow running the automatic deployment to Alibaba Cloud OSS.

🎮 Game Development Highlights

This is my second game submission for the same Alibaba Cloud challenge, and this time I decided to take a different approach. Instead of focusing solely on gameplay and retro aesthetics, I explored modern web technologies by implementing the game as a PWA (Progressive Web App).

In addition to enhancing the mobile experience with features like home screen installation and offline support, this was a strategic choice: in the future, the same game could be published on the Play Store using TWA (Trusted Web Activity), without the need to rewrite the code in another language.

You can check out my first game here on the Alibaba Cloud challenge page.

This project was developed to demonstrate the capabilities of web technologies in a lightweight, fully browser-based gaming environment. Key highlights of the implementation include:

✨ Progressive Web App (PWA): Playable instantly from your browser with offline support and installable on mobile devices.
🧱 Canvas-based gameplay: Developed entirely with CreateJS to deliver smooth 2D animations and real-time interactions.
📲 Responsive controls: Designed for all devices — keyboard support for desktops and tap-based input for touchscreens.
🔊 Dynamic audio: Background music and sound effects enhance immersion, with a simple toggle for sound control.
📐 Orientation guidance: Automatically detects mobile landscape mode and prompts users to rotate their device for the best experience.
🏆 Local high score tracking: Challenge yourself to improve, as your highest score is saved directly in the browser.
🌍 Internationalization built-in: Language selection right at the start — currently supporting Portuguese, English, and Chinese.

Conclusion

Every time you push to the main branch, GitHub Actions will automatically handle deployment to Alibaba Cloud:

Download and configure ossutil – the official CLI for interacting with Alibaba OSS
Upload all files from the public/ folder to your designated bucket
Deploy your static website live on Alibaba Cloud OSS – no manual steps required!

You can track the full process via the Actions tab in your GitHub repository.