DEV Community: Victor Oluwayemi

The Teapot™ Enterprise Brewing Platform – A Delightfully Useless April Fools' Project

Victor Oluwayemi — Sat, 11 Apr 2026 10:29:46 +0000

This is a submission for the DEV April Fools' Challenge.

TL;DR

In summary, you can find the live link here, and the GitHub repo here. Now, let's go on to the main stuff.

What I Built

I built the Teapot™ Enterprise Brewing Platform, a service dedicated to solving a problem nobody has: strictly enforcing the classic April Fools' joke, RFC 2324 (Hyper Text Coffee Pot Control Protocol).

The application is a scalable, "flawlessly engineered" engine that exclusively returns HTTP 418 "I'm a Teapot" responses no matter how you ask it, what tea you select, or what parameters you pass. It refuses to brew anything, accompanied by a premium front-end interface.

The user experience is deliberately ridiculous. The polished UI features "useless" sliders for temperature and sugar that explicitly inform you they do nothing. Before failing exactly as expected, users navigate through a multi-step fake validation process complete with messages like "Consulting the Geneva Convention...".

Demo

Here's a demo of the final product; you can access the link here.

Code

You can find the github repository here:

amiabl-programr / teapot

Welcome to the Teapot Service. This highly scalable, flawlessly engineered NestJS application is responsible for managing the teapot infrastructure of our enterprise architecture.

🫖 Teapot Service

Overview

Welcome to the Teapot Service. This highly scalable, flawlessly engineered NestJS application is responsible for managing the teapot infrastructure of our enterprise architecture.

By design, this service strictly adheres to RFC 2324 (Hyper Text Coffee Pot Control Protocol). Therefore, all requests to brew tea or coffee will result in HTTP 418 I'm a Teapot.

Architecture

This is a state-of-the-art refusal engine:

Strict Mode TypeScript: For maximally robust rejection.
Winston & OpenTelemetry: Highly observable observability for failures.
Throttler: Prevents you from asking too quickly.

Getting Started

npm install
npm run start:dev

Then visit http://localhost:4180/docs to see Swagger docs.

Disclaimer

Attempts to extract tea from this endpoint may result in enterprise disciplinary action.

View on GitHub

How I Built It

The Backend: I built the core service using the NestJS framework to standardise the architecture. I implemented rate-limiting through the Throttler module to prevent users from requesting tea too quickly, so a user can make only 3 requests every 1 minute.

{
  ttl: config.get<number>('rateLimit.ttl') || 60000,
  limit: config.get<number>('rateLimit.limit') || 3,
  errorMessage: 'The kettle needs time to cool down.',
}

Perhaps the most absurd touch was generating enterprise-grade Swagger documentation for an API that literally does nothing but fail in increasingly creative ways. The docs can be accessed through the /docs route.

The Frontend: The entire interface is built with vanilla HTML, CSS, and JavaScript—no frameworks are needed. I created custom SVGs for a beautifully animated, high-fidelity teapot illustration that serves as the visual centrepiece. The styling leverages modern typography with Playfair Display for headings and DM Mono for technical details, complemented by smooth CSS transitions that make a completely useless application feel like a genuinely premium SaaS product.

Prize Category

I'm submitting for Best Ode to Larry Masinter. This project is a direct celebration of RFC 2324 (Hyper Text Coffee Pot Control Protocol), the classic April Fools' joke that Larry Masinter authored.

Conclusion

This project introduced me to a new HTTP status code (418) and the joke around it. I also got to use Antigravity and its agentic features. The experience was good, though its commit message generation isn't as solid as VSCode yet, but it delivers.

Let me know what you think about this Teapot App, thank you 😊.

Building an Airport Info AI Agent with Mastra and Telex

Victor Oluwayemi — Mon, 03 Nov 2025 20:30:28 +0000

Building the Airport Info Agent: A Deep Dive into Mastra, A2A, and Telex

Imagine asking, "Tell me about Heathrow Airport," and instantly receiving a concise, traveler-friendly summary — complete with the airport's name, country, coordinates, time zone, and a brief note about its significance.

That's precisely what the Airport Info Agent does. It's an intelligent AI coworker built using the Mastra A2A protocol, deployed easily on Mastra Cloud, and integrated directly into the Telex workspace, functioning as an indispensable aviation assistant.

In this post, I’ll share the step-by-step process of how I built this agent, from the initial local setup with Mastra to its final, collaborative integration within Telex.

Part 1: Architecture and Local Development with Mastra

Mastra is a powerful framework for building and orchestrating AI agents. At its core, it enables developers to rapidly define an agent's logic and capabilities, abstracting away much of the complexity.

Our goal was to create an agent that speaks the Mastra A2A Protocol, the framework's implementation of the open Agent-to-Agent (A2A) standard, allowing it to seamlessly interoperate with other services like Telex.

The implementation can be divided into four distinct processes:

1. Mastra Agent Core

Setting up the core agent logic and boilerplate. My project repository is available here for reference:
👉 GitHub Repository

2. The Airport Tool

This is the critical component that performs the actual data fetching. It handles API calls to the Gemini API for reasoning and uses airportdb.io to retrieve structured data like location, codes, and coordinates.

3. The A2A Route Handler

Configuring the specific route that allows external systems to communicate with our agent using the A2A standard.

4. Registration (`index.ts`)

Finally, registering the agent, its tools, and the A2A route handler in the main index.ts file within the Mastra folder to ensure all components are wired up correctly.

Part 2: Deployment to Mastra Cloud

Deployment is one of the most streamlined aspects of using Mastra.

Once your project is committed to GitHub, the deployment process is straightforward:

Go to the Mastra Cloud dashboard and create your project.
Set up the deployment configuration, linking it to your GitHub repository.
Upon successful deployment, your agent automatically receives a unique A2A Endpoint URL, making it accessible to any other A2A-compliant system:

Agent A2A Endpoint URL:
https://most-faint-yacht.mastra.cloud/a2a/airportAgent

Part 3: Integrating with Telex.im

The final and most exciting step is integrating the deployed agent into our collaborative workspace, Telex.

On your Telex dashboard, navigate to the AI Co-Workers section and create a new co-worker. We define the agent's behavior and communication method using a structured JSON workflow in the editor.

The key to this integration is defining an A2A node type that points to our Mastra endpoint. This tells Telex exactly how to communicate with the Airport Agent.

Telex Workflow Definition

Notice the long description defines the agent's persona and rules for generating a traveler-friendly response. The nodes section contains the critical link:

{
  "active": false,
  "category": "utilities",
  "description": "A workflow that gives airport information",
  "id": "sGC3u7y4vBaZww0G",
  "name": "progrmr_agent",
  "long_description": "\n You are an aviation assistant that provides accurate and concise information about airports worldwide.\n\n    Your main responsibilities are:\n    - Provide details about airports when given a name, city, or IATA/ICAO code.\n    - Use the airportTool to fetch structured data such as location, country, codes, timezone, and coordinates.\n    - If the user asks for nearby airports, distance between two airports, or other related data, clarify and respond accordingly.\n    - Always give results in a traveler-friendly format:\n        Airport Name (IATA / ICAO)\n        City, Country\n        Timezone\n        Coordinates\n        Short summary about the airport's importance (international hub, regional airport, etc.)\n    - If the query is unclear, politely ask for more details (e.g., \"Can you specify the airport name or city?\").\n    - Keep responses concise but well-structured.\n",
  "short_description": "Get weather information for any location",
  "nodes": [
    {
      "id": "airport_agent",
      "name": "airport agent",
      "parameters": {},
      "position": [816, -112],
      "type": "a2a/mastra-a2a-node",
      "typeVersion": 1,
      "url": "https://most-faint-yacht.mastra.cloud//a2a/agent/airportAgent"
    }
  ],
  "pinData": {},
  "settings": {
    "executionOrder": "v1"
  }
}

Part 4: Testing the A2A Connection

To ensure the agent is correctly receiving and processing tasks over the A2A protocol, we can test the connection directly using curl. This command sends a JSON-RPC message, a core component of the A2A standard, to our agent's public endpoint:

curl -X POST https://most-faint-yacht.mastra.cloud//a2a/agent/airportAgent \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": "test-001",
    "method": "message/send",
    "params": {
      "message": {
        "kind": "message",
        "role": "user",
        "parts": [
          {
            "kind": "text",
            "text": "Hi, can you tell me about Heathrow Airport?"
          }
        ],
        "messageId": "msg-001",
        "taskId": "task-001"
      },
      "configuration": {
        "blocking": true
      }
    }
  }'

Conclusion

This project demonstrates the power of open protocols like A2A in creating truly interoperable AI ecosystems. By leveraging Mastra for development and deployment, we created a specialized agent that can be immediately utilized within a completely different platform — Telex — to provide structured, domain-specific assistance.

🚀 HNG Stage 0 — Dynamic Profile Endpoint

Victor Oluwayemi — Mon, 20 Oct 2025 17:06:17 +0000

This is my Stage 0 task for the HNG Internship (HNG13).
The goal was simple: build a RESTful API endpoint that returns my basic profile information along with a random cat fact fetched from an external API.

🔗 GitHub Repo: amiabl-programr/hng13-stage0-dynamic-profile-endpoint-project

🌐 Live Demo: View on Railway

🛠️ Work Process

I built the app using Express.js, a fast and minimalist Node.js framework.

Steps:

Created a /me endpoint that returns:
My name, email, and GitHub username
A random cat fact fetched via the Cat Facts API
Used Axios for external API requests
Implemented error handling for network issues and invalid routes
Structured the JSON response neatly for easy readability

app.get("/me", async (req, res) => {
try {
const { data } = await axios.get("https://catfact.ninja/fact");
res.json({
name: "Victor Oluwayemi",
github_username: "amiabl-programr",
email: "your_email@example.com",
cat_fact: data.fact,
});
} catch (error) {
res.status(500).json({ error: "Unable to fetch cat fact" });
}
});

Handling Unknown Routes

The latest Express version no longer supports using a plain "*" wildcard.
Instead, I handled unknown routes like this:

app.use((req, res) => {
res.status(404).json({ error: "Route not found" });
});

⚙️ Hosting Experience

This part was... interesting 😅

Tried Pxxl App — kept getting “No service found”
Tried Azure (Student Account) — ran into hostname/DNS errors
Finally deployed on Railway, and it worked like magic 🎉

💡 What This Task Taught Me

Even though the task seemed simple, I learned quite a few things:

How to use Axios effectively and handle errors gracefully
How route handling changed in newer versions of Express
The importance of understanding different deployment platforms
And of course, patience — because deployment “wahala” is real 😄

✨ Final Thoughts

What started as a simple task turned into a mini learning journey — from backend structure to debugging, and finally deployment.

This project helped me:

Improve my understanding of Express.js
Get comfortable with error handling
Gain hands-on experience deploying Node.js apps to the cloud
I’m looking forward to the next stage of the HNG journey 🚀

Built with ❤️ by Victor Oluwayemi

How to Deploy your Static Site to Netlify

Victor Oluwayemi — Mon, 13 Mar 2023 21:24:59 +0000

There are various ways to deploy and host static sites after you design them on your local machine. A static site is a website built with plain HTML, Javascript, or CSS code.**
Netlify is an easy way to deploy and host static web projects without buying a domain name and hosting. Netlify does everything for you.

Getting Started

In this article, you will learn how simple it is to launch your static site on Netlify. You need an account to deploy on Netlify. You will deploy a static site designed with HTML/CSS; check out the Netlify documentation to integrate other frameworks like React.js/Next.js.

Prerequisites

To follow the instructions in each section, you'll need the following setup:

A code editor such as VScode.
Git is installed on your system.
An account with a Git provider (GitHub/Bitbucket/Gitlab). GitHub will be used in this article.
Ensure Node.js is installed. To check if Node and npm are installed, type this code in your terminal:

node -v //press enter
//v16.13.1
npm -v //press enter
//8.3.0

Deploy to Netlify using Github

To create a repository on GitHub, open a terminal in VScode, run each command line by line, and press enter. A git provider like Github connects your project to enable Netlify to allow continuous deployment; anytime you make changes to your project and push to GitHub, Netlify automatically redeploys your site, and the changes you make are visible.

echo "# My app" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{your_username}/{your_repository_name}.git
git push -u origin main

Check your repository on GitHub, and you should have something like this.

Create an account on Netlify and log in to your Netlify dashboard.

Switch to the Sites tab, click the Add New Site dropdown, and connect to your GitHub repository.
Connect to Github repository

You will be prompted to authorise Netlify to access your GitHub repositories; if you can’t find the search for a specific repository, select Configure the Netlify app on GitHub.

Then, scroll to the bottom of the page and either grant Netlify access to all your repositories or select a particular repository.

Finally, select the repository and click deploy.

Your browser will then redirect you to the site overview page, where you can look for the deployment in the list of production deploys. Select the link to open your deployed site.
Site overview page

Deploy to Netlify using Drag and Drop

Login to your Netlify Dashboard, switch to the Sites tab, and click the Add New Site dropdown. Select Deploy manually or browse to upload.

Drag and drop your project folder and wait for it to be published.

Conclusion

In this tutorial, you learned how to use Netlify to deploy your project (HTML or CSS) online using Github and manual deployments.
You can connect a custom domain name to your site, connect the forms to Netlify for easy management, or check the documentation to explore more features.

That’s all for now. Happy Coding!

Resources

A step-by-step guide to creating a beautiful slider with Swiper and React

Victor Oluwayemi — Sat, 11 Feb 2023 13:17:23 +0000

When a visitor first arrives at your website, sliders are a fantastic way to showcase your greatest work, especially if photography, fashion, or nature are your main features.
Building a beautiful slider from scratch with javascript can be lengthy and time-consuming, but instead of creating a slider(or carousel) from scratch, we can leverage Swiper to bootstrap the process for us. In this article, we will discuss how we can easily set up a basic slider with Swiper.

Repository

Check out the complete source code here.

Prerequisites

Node.js must be installed on your machine before you can begin. You may download and install these tools from the Node.js website if you don't already have them.
Also, the code editor we will be using is VScode.

What is Swiper?

Swiper is the most cutting-edge free mobile touch slider with incredible native behavior and hardware-accelerated transitions. Mobile web applications, native mobile apps, and web pages can use Swiper. Swiper employs the cutting-edge flexbox style for slide layout, eliminating many issues and saving a lot of time with size calculations. Such a layout also enables the Slides grid's pure CSS configuration. A fairly robust API is included with Swiper. It allows you to make your own navigation buttons, parallax effects, and pagination, among many other things.

Swiper with React.js

Open your preferred code editor, we'll be using VScode in this tutorial. Open your terminal and enter this command to spin up a react project.

npx create-react-app swiper-and-react

Navigate to the new directory now, then launch the development server as follows:

cd swiper-and-react
npm run start

By doing so, you'll launch the development server. Check your terminal for the port your project is assigned to, then open it in your web browser.

Install Swiper with npm

Next, install Swiper by running the command below:

npm i swiper

Clean up your React project, and ensure your directory resembles this:

//App.jsx
import "./App.css";
function App() {
  return <div></div>;
}
export default App;

/* App.css*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

In your App.jsx file, import Swiper React components

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

Update your CSS file with the default Swiper styling using the code below(this code is optional):


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Building the Slider

Add the Swiper component.


//App.jsx
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "./App.css";

function App() {
  return (
    <Swiper spaceBetween={50} slidesPerView={3}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
}

export default App;

Go to Unsplash to get some beautiful images for your slider and add them to your React project. In the src folder, create an image folder and put all the photos there.

Import the images in the App.jsx file.


// Import Swiper React components
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import leaf from "../src/images/leaf.jpg";
import clouds from "../src/images/clouds.jpg";
import mountains from "../src/images/mountains.jpg";
import sunset from "../src/images/sunset.jpg";

// Import Swiper styles
import "swiper/css";
import "./App.css";

function App() {
  return (
    <Swiper spaceBetween={50} slidesPerView={3}>
      <SwiperSlide>
        <img src={leaf} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={sunset} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={mountains} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={clouds} alt="" />
      </SwiperSlide>
    </Swiper>
  );
}

export default App;

Your demo application will look like this when you complete it:

Conclusion

Congratulations, you have a basic slider set up already. You can visit the documentation where you can find more examples of how you can add more features to the slider.

Resources

In this post, I covered the basic aspects of the Swiper library. You may use this resource to learn how to add extra features to your slider, such as navigation and pagination.
Swiper React Documentation

DEV Community: Victor Oluwayemi

The Teapot™ Enterprise Brewing Platform – A Delightfully Useless April Fools' Project

TL;DR

What I Built

Demo

Code

amiabl-programr / teapot

Welcome to the Teapot Service. This highly scalable, flawlessly engineered NestJS application is responsible for managing the teapot infrastructure of our enterprise architecture.

🫖 Teapot Service

Overview

Architecture

Getting Started

Disclaimer

How I Built It

Prize Category

Conclusion

Building an Airport Info AI Agent with Mastra and Telex

Building the Airport Info Agent: A Deep Dive into Mastra, A2A, and Telex

Part 1: Architecture and Local Development with Mastra

1. Mastra Agent Core

2. The Airport Tool

3. The A2A Route Handler

4. Registration (index.ts)

Part 2: Deployment to Mastra Cloud

Part 3: Integrating with Telex.im

Telex Workflow Definition

Part 4: Testing the A2A Connection

Conclusion

🚀 HNG Stage 0 — Dynamic Profile Endpoint

🛠️ Work Process

Handling Unknown Routes

⚙️ Hosting Experience

💡 What This Task Taught Me

✨ Final Thoughts

How to Deploy your Static Site to Netlify

Getting Started

Prerequisites

Deploy to Netlify using Github

Deploy to Netlify using Drag and Drop

Conclusion

Resources

A step-by-step guide to creating a beautiful slider with Swiper and React

Repository

Prerequisites

What is Swiper?

Swiper with React.js

Install Swiper with npm

Building the Slider

Conclusion

Resources

4. Registration (`index.ts`)