Nicolás Deyros Blog

DevLog: Building an Agentic Travel Planner

Nicolás Deyros — Wed, 04 Feb 2026 00:00:00 GMT

For the past 24 hours, I’ve been working on Travel AI, a high-performance itinerary generator. This wasn’t a solo project, nor was it a simple “AI prompt-to-code” session. I collaborated with a coding agent (Antigravity) in a shared workspace where the agent had terminal access, managed the file system, and handled the DevOps pipeline. Here is the technical breakdown of how we built it and how the human-agent collaboration actually functioned.

The Architecture: Astro Islands & Gemini 3

The goal was to build a fast, SEO-friendly site that still felt like a premium SPA. We chose Astro for its Multi-Page Application (MPA) benefits and used React islands for the complex form state management.

Brain: Gemini 3 (Flash-Preview)

We integrated the latest Gemini 3 model, specifically using the Search Grounding feature. Unlike standard LLM responses, we configured the model to validate locations, opening hours, and travel routes against live web data.

Infrastructure: We used a backend-first approach for the API to hide the API keys and handle rate limiting (5 req/hour) via server-side logic.
Validation: Every response from Gemini is piped through a Zod schema to ensure the JSON structure doesn’t break our frontend rendering.

The Engineering Workflow: Collaborative Debugging

This is where the “Agentic” part gets real. It wasn’t just about writing code; it was about maintaining a high-quality codebase.

1. The Accessibility Fix (Pa11y & WCAG 2.1 AA)

The initial TravelForm was functional but failed accessibility audits. Antigravity ran Pa11y locally and identified 6 critical violations (WCAG 2.1 AA) related to dynamic inputs.

Discovery: The city autocomplete component (CityInput) and the dynamic child-age inputs were missing proper ARIA relationships.
The Fix: Instead of me manually fixing labels, the agent implemented a dynamic ID system (child-age-${i}) and added full keyboard navigation (ArrowUp/Down, Enter, Esc) to the search results. We re-ran the audit until we hit 0 errors.

2. Solving the Union Type Mismatch

Right before the final push, we ran a strict TypeScript check (tsc --noEmit). We hit a TS2345 error in TravelForm.tsx.

The Problem: We were attempting to map a dynamic key from an Object.entries iterator into a strict Union Type of travel priorities.
The Resolution: We discussed the trade-off between softening the types or using a safer cast. We ended up implementing a verified type assertion to ensure the frontend wouldn’t crash during the translation lookup.

3. Internationalization (i18n) Logic

We didn’t want to use client-side translation libraries that increase bundle size. We built a static translation map supporting 6 languages (ES, EN, PT, FR, IT, DE).

The Agent’s Role: Antigravity handled the heavy lifting of populating the missing translation keys for the ErrorDisplay and LoadingItinerary components, ensuring the UX was consistent regardless of the serverLang prop.

Key Technical Specs

Performance: 100/100 Lighthouse score on Home and Plan pages.
State Management: Localized React state for the multi-step form, synced with local storage for draft persistence.
Animations: Used AnimatePresence from Framer Motion for a premium feel without sacrificing fluidity.
CI/CD: Governed by a strict Git flow. Changes were never committed to main directly; the agent created branches, pushed to GitHub, and opened PRs using the GitHub CLI.

Final Reflection

Collaborating with an agent that can execute `npm run build` and `git push` while you’re architecting the next feature is a game-changer. It’s no longer about “generating code,” but about Engineering Management where the agent handles the technical audits (Lighthouse, Pa11y, TSC) and the human handles the product vision and logic edge cases.

Check out the project: 👉 travel-ai-agentic

Engineering the Agentic Loop: Antigravity, Gemini & MCPs

Nicolás Deyros — Fri, 16 Jan 2026 00:00:00 GMT

The transition from “AI as a Chatbot” to “AI as an Engineering Agent” happens when you close the loop between reasoning and execution. In this technical deep dive, I’ll explain how I architected an autonomous engineering system using Antigravity, Gemini CLI, and a specialized stack of Model Context Protocol (MCP) servers.

🛸 The Antigravity Orchestration Engine

At the heart of my workflow is Antigravity—an autonomous agent designed to navigate complex codebases. Unlike standard LLMs, Antigravity operates as a “Pilot” that connects Gemini’s 1.5 Pro/Flash reasoning models directly to my local filesystem and terminal. The connection is established via a suite of automation tools in tools/ that standardize our interactions:

session:init: An AI-driven environment audit that syncs Git state, verifies Node/NPM versions, and updates dependencies.
git:start: A programmatic bridge that initializes features, creates conventional branches, and uses the GitHub CLI to open Draft PRs automatically.
git:ship: The final delivery sequence—Antigravity runs a full validation suite (Lighthouse, Vitest, Playwright), pushes the code, and initiates an auto-merge via GitHub.

🔌 Scaling Intelligence with MCP

The Model Context Protocol (MCP) is the “USB-C for AI.” It allows Antigravity to plug into specialized intelligence silos. My current “Agentic Stack” includes:

TestSprite MCP: This is my autonomous QA department. It analyzes my code, generates a Standardized PRD, and writes/executes its own end-to-end tests without human intervention.
Astro Docs MCP: Provides Antigravity with real-time, RAG-enhanced access to the latest Astro documentation, preventing “hallucinations” on new framework features.
GitHub MCP: Deep integration with the repository lifecycle—managing issues, PR comments, and CI/CD status checks.
Chrome DevTools MCP: Allows the agent to “see” into the browser during E2E testing, inspecting the DOM and console logs to debug hydration issues in real-time.
ESLint & CSS MCPs: Programmatic code quality gates that ensure every line Antigravity writes adheres to the project’s strict styling and logic rules.

🧠 The Hybrid AI Architecture

For the blog’s frontend features (like Summarization and Translation), I engineered a Hybrid AI Strategy designed for resilience:

graph TD
    A[User Request] --> B{Browser Support?}
    B -- Yes --> C[Gemini Nano / Chrome AI]
    B -- No --> D[Gemini 1.5 Flash Cloud]
    C -- Timeout/Fail --> D
    D --> E[Astro DB Cache Check]
    E -- Miss --> F[Cloud Generation]
    F --> G[Store in AICache]
    G --> H[Return Result]
    E -- Hit --> H

Local Processing: We prioritize Gemini Nano (Chrome’s on-device model) for data privacy and zero-latency.
Resilient Fallback: If the experimental Chrome APIs fail (e.g., model download timeouts), the system transparently flips to a server-side endpoint powered by gemini-1.5-flash.
Intelligent Caching: We implemented an AICache table in Astro DB. By hashing the content, we ensure that we never pay for the same summary twice, significantly reducing API overhead and improving user response times.

🛠️ Technical Resilience in Agentic Workflows

Building with autonomous agents requires “Defensive Engineering.” Every tool Antigravity uses is wrapped in robust error handling. For instance, our GitHub Automation handles merge conflicts via the AI’s own reasoning, while our Grammar Checker utility (tools/grammar-checker.ts) automatically cleans up residual metadata to keep the history clean.

🎯 Conclusion: The Future of DevEx

By combining Gemini’s reasoning with the tool-using capabilities of Antigravity and the extensibility of MCP, I’ve moved from “coding” to “orchestrating.” This setup allows me to maintain a 100 Lighthouse score and 80%+ test coverage while focusing 100% on architecture rather than boilerplate. The era of the “Solo Dev” is ending; the era of the Orchestrator has begun.

Implementing Chrome AI APIs in Astro Blog

Nicolás Deyros — Wed, 13 Aug 2025 00:00:00 GMT

The future of web development is here, and it runs directly in your browser. Recently, I integrated Chrome’s experimental AI Translation API and Summarizer API into this Astro-powered blog, bringing client-side AI capabilities to enhance the reading experience. This implementation showcases how modern browsers are becoming powerful AI platforms.

Why Browser-Native AI?

Traditional AI implementations require server-side processing, API keys, and external service dependencies. Chrome’s experimental AI APIs change this paradigm by running entirely in the browser, offering:

Zero latency - No network requests needed
Privacy-first - Content never leaves the user’s device
Cost-effective - No API usage fees or rate limits
Offline capability - Works without internet connectivity
Progressive enhancement - Graceful fallbacks for unsupported browsers

Technical Architecture Overview

The implementation consists of two main components integrated into the Astro blog architecture:

Core Components Structure

src/
├── components/
│   ├── Translation/
│   │   └── BlogTranslator.astro
│   └── Summary/
│       └── BlogSummarizer.astro
├── utils/
│   ├── translator.ts
│   └── summarizer.ts
└── pages/blog/
    └── [slug].astro

Chrome AI Translation API Implementation

The Chrome AI Translation API provides on-device language translation capabilities. Here’s how I implemented it:

1. TypeScript Interface Definition

// translator.ts
declare global {
	interface Window {
		translation: {
			canTranslate(options: {
				sourceLanguage: string
				targetLanguage: string
			}): Promise<'readily' | 'after-download' | 'no'>
			createTranslator(options: {
				sourceLanguage: string
				targetLanguage: string
			}): Promise<{
				translate(text: string): Promise<string>
				destroy(): void
			}>
		}
	}
}

2. Translation Service Class

export class BlogTranslator {
	private translator: any = null
	private isInitialized = false
	async isSupported(): Promise<boolean> {
		return 'translation' in window && 'canTranslate' in window.translation
	}
	async canTranslate(
		sourceLanguage: string,
		targetLanguage: string,
	): Promise<string> {
		if (!(await this.isSupported())) {
			return 'no'
		}
		return await window.translation.canTranslate({
			sourceLanguage,
			targetLanguage,
		})
	}
	async translateBlogPost(
		content: string,
		targetLanguage: string,
		onProgress?: (progress: number) => void,
	): Promise<TranslationResult> {
		// Implementation details...
	}
}

3. Astro Component Integration

The BlogTranslator.astro component provides a clean UI with:

Language selection dropdown with 50+ supported languages
Real-time progress tracking using semantic HTML <progress> elements
Error handling with user-friendly dialog messages
Responsive design that works across all device sizes

<!-- BlogTranslator.astro -->
<div class="blog-translator">
	<select id="language-selector">
		<option value="es">Spanish</option>
		<option value="fr">French</option>
		<!-- ... more languages -->
	</select>
	<button id="translate-btn">🌐 Translate Article</button>
	<progress id="progress-bar" value="0" max="100"></progress>
</div>

Chrome AI Summarizer API Implementation

The Chrome AI Summarizer API generates intelligent content summaries. The implementation follows similar patterns:

1. Summarizer TypeScript Interface

// summarizer.ts
type SummarizerType = 'teaser' | 'key-points' | 'headline'
type SummarizerLength = 'short' | 'medium' | 'long'
declare global {
	interface Window {
		Summarizer: {
			availability(): Promise<'available' | 'downloadable' | 'no'>
			create(options: {
				type?: SummarizerType
				length?: SummarizerLength
				format?: 'markdown' | 'plain-text'
			}): Promise<{
				summarize(text: string): Promise<string>
				destroy(): void
			}>
		}
	}
}

2. Summarizer Service Implementation

export class BlogSummarizer {
	async summarizeBlogPost(
		markdown: string,
		options: SummaryOptions,
		onProgress?: (status: string) => void,
	): Promise<SummaryResult> {
		// Check API availability
		const availability = await window.Summarizer.availability()
		if (availability === 'downloadable') {
			onProgress?.('Model downloading...')
			await this.waitForModelDownload()
		}
		// Create summarizer instance
		const summarizer = await window.Summarizer.create(options)
		// Process and clean markdown content
		const cleanText = this.cleanMarkdownForSummarization(markdown)
		// Generate summary
		const summary = await summarizer.summarize(cleanText)
		return {
			summary,
			type: options.type,
			length: options.length,
			wordCount: summary.trim().split(/\s+/).length,
			timestamp: new Date().toISOString(),
		}
	}
}

3. Enhanced UI with Multiple Summary Types

The summarizer component offers three summary types:

TL;DR (Teaser) - Quick, engaging overview
Key Points - Main concepts and takeaways
Headline - Concise, social-media ready summary

<div class="summary-controls">
	<button data-type="teaser">TL;DR</button>
	<button data-type="key-points">Key Points</button>
	<button data-type="headline">Headline</button>
</div>

Key Implementation Challenges & Solutions

1. API Compatibility Issues

Challenge: The 'tl;dr' summary type wasn’t recognized by the API. Solution: Mapped user-friendly “TL;DR” to the valid 'teaser' type internally while maintaining the familiar UI label.

2. Progress Bar Standardization

Challenge: Inconsistent progress implementations using div-based fake progress bars. Solution: Migrated to semantic HTML <progress> elements with cross-browser CSS styling:

progress {
	appearance: none;
	-webkit-appearance: none;
}
progress::-webkit-progress-value {
	background-color: rgb(37 99 235);
	border-radius: 0.5rem;
	transition: all 0.3s ease-in-out;
}
progress::-moz-progress-bar {
	background-color: rgb(37 99 235);
	border-radius: 0.5rem;
}

3. Button Selection State Management

Challenge: Selected summary type buttons had conflicting CSS classes causing invisible text. Solution: Implemented proper state management with complete class replacement:

// Remove all state classes, then add appropriate ones
summaryTypeBtns.forEach(b => {
	b.classList.remove(
		'bg-blue-600',
		'text-white',
		'border-blue-600',
		'shadow-md',
	)
	b.classList.add('bg-white', 'text-gray-700', 'border-gray-300')
})
// Apply selected state to clicked button
btn.classList.remove('bg-white', 'text-gray-700', 'border-gray-300')
btn.classList.add('bg-blue-600', 'text-white', 'border-blue-600', 'shadow-md')

Browser Support & Progressive Enhancement

Feature Detection

Both APIs implement robust feature detection:

async isSupported(): Promise<boolean> {
  return 'translation' in window && 'canTranslate' in window.translation
}
async checkSummarizer(): Promise<boolean> {
  return 'Summarizer' in window
}

Graceful Fallbacks

When APIs aren’t available, users see helpful information dialogs explaining:

How to enable Chrome flags
Alternative browser recommendations
Manual summarization suggestions

Chrome Flags Required

Users need these experimental flags enabled:

chrome://flags/#optimization-guide-on-device-model
chrome://flags/#translation-api
chrome://flags/#summarization-api-for-gemini-nano

Performance Optimizations

1. Lazy Loading

Components only initialize when needed, reducing initial bundle size.

2. Efficient Content Processing

Markdown content is cleaned and optimized before API processing:

private cleanMarkdownForSummarization(markdown: string): string {
  return markdown
    .replace(/```[\s\S]*?```/g, '') // Remove code blocks
    .replace(/`([^`]+)`/g, '$1')     // Remove inline code
    .replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1') // Keep alt text only
    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')  // Keep link text only
    .replace(/^#{1,6}\s+/gm, '')     // Remove headers
    .replace(/\n\s*\n/g, '\n\n')     // Clean whitespace
}

3. Smart Progress Animation

Realistic progress indication based on actual processing stages rather than arbitrary increments.

Integration with Astro

The APIs integrate seamlessly with Astro’s architecture:

1. Component Props

---
interface Props {
	className?: string
	markdown?: string
}
const { className = '', markdown = '' } = Astro.props
---
<BlogSummarizer className={className} markdown={markdown} />

2. SSR Compatibility

All AI processing happens client-side, maintaining Astro’s SSR benefits while adding progressive enhancement.

3. View Transitions Support

Components properly handle Astro’s view transitions with cleanup functions:

document.addEventListener('astro:before-preparation', () => {
	if (cleanup) {
		cleanup()
		cleanup = null
	}
})

Future Possibilities

This implementation opens doors for exciting possibilities:

Multi-language content creation workflows
Accessibility improvements with AI-generated descriptions
Content optimization based on AI-generated insights
Personalized reading experiences with AI-driven customization

Getting Started

Want to implement these APIs in your own project? Here’s the checklist:

Enable Chrome flags for AI APIs
Implement TypeScript interfaces for type safety
Create service classes for API interaction
Build UI components with proper error handling
Add progressive enhancement for unsupported browsers
Test thoroughly across different content types

Conclusion

Chrome’s AI APIs represent a paradigm shift toward privacy-focused, client-side AI processing. This implementation demonstrates how modern web applications can leverage browser-native AI capabilities while maintaining excellent user experiences and progressive enhancement principles. The integration of translation and summarization features directly into the blog enhances accessibility and user engagement without compromising performance or privacy. As these APIs mature and gain broader browser support, they’ll become essential tools for creating intelligent, user-centric web applications.

This implementation was developed with assistance from Claude Sonnet, whose insights were invaluable in solving complex integration challenges and optimizing the user experience. The complete source code is available in the astro-portfolio-v2 repository. Resources:

Pokémon Card Battle Arena

Nicolás Deyros — Thu, 07 Aug 2025 00:00:00 GMT

Welcome, developers and Pokémon trainers! Today, we’re taking a deep dive into the code behind the Pokémon Card Battle Arena, a dynamic web application built with modern frontend technologies. This app allows users to search for their favorite Pokémon, build a custom team of three, and face off against a computer-controlled opponent in a turn-based battle. It also features a Pokémon evolution explorer.

Let's unpack the key technologies and architectural decisions that bring this interactive experience to life. ## The Tech Stack The application is built on a robust and modern foundation: - **Framework**: React with TypeScript for a type-safe, component-based UI. - **Styling**: Tailwind CSS for rapid, utility-first styling, augmented with custom CSS for complex animations and the signature holographic card effect. - **Data Source**: The invaluable [PokeAPI](https://pokeapi.co/), a free and open-source RESTful API for all things Pokémon. - **State Management**: A combination of React's `useState` and `useReducer` hooks, creating a powerful and predictable state machine for the complex game logic. ## Core Feature Deep Dive ### The Holographic Card Effect The centerpiece of the UI is the interactive, holographic Pokémon card. It's not just a static image; it's a multi-layered component that responds to user interaction, creating a stunning 3D effect. Here’s how it works: 1. **Perspective & 3D Transform**: The parent `card-wrapper` div establishes a `perspective`, creating a 3D space for its children. The `holo-card` itself uses `transform: rotateX() rotateY()` to tilt in 3D space. 2. **Mouse Tracking**: An `onMouseMove` event handler on the card's wrapper captures the mouse's X and Y coordinates relative to the card's dimensions. 3. **Dynamic CSS Variables**: The JavaScript logic calculates the desired rotation based on the mouse position and updates CSS custom properties (`--x`, `--y`, `--color1`, `--color2`) in real-time. 4. **Layered Gradients & Effects**: The magic lies in the `::before` and `::after` pseudo-elements. - The `::before` element creates the holographic sheen using a `linear-gradient`. Its background position is updated via the `--x` and `--y` variables, making the light source appear to move with the user's cursor. - The `::after` element overlays sparkle and texture images, further enhancing the holographic illusion. ```typescript // In PokemonCard.tsx const handleMouseMove = (e: React.MouseEvent) => { const { clientX, clientY, currentTarget } = e const { top, left, width, height } = currentTarget.getBoundingClientRect() const mouseX = (clientX - left) / width const mouseY = (clientY - top) / height const rotateX = 15 * (mouseY - 0.5) const rotateY = -15 * (mouseX - 0.5) setStyle({ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`, '--x': `${mouseX * 100}%`, '--y': `${mouseY * 100}%`, }) } ``` ### The Game Logic Managing the state of a turn-based game can be complex. To handle this cleanly, all battle logic is encapsulated within a custom React hook: `useGameLogic`. This hook employs a `useReducer` state machine, which is perfect for managing state transitions with discrete actions. The `gameReducer` function handles actions like: - `START_SUCCESS`: Initializes the game with player and computer teams. - `ATTACK`: Kicks off the turn, setting an attack in motion. - `PROCESS_TURN`: Calculates and applies damage to the defending Pokémon. - `FAINT_SWITCH`: Handles the logic when a Pokémon faints, forcing a switch or ending the game. - `SWITCH_POKEMON`: Manages a player switching their active Pokémon. - `GAME_OVER`: Declares a winner and transitions to the game-over screen. ### Team Selection Before battling, a trainer must choose their team. The `TeamSelection` component provides a seamless experience for this: - **Pokémon Discovery**: An `AutocompleteSearch` component allows users to find any Pokémon by name. - **Drag-and-Drop Interface**: The core of the team builder uses the native HTML5 Drag and Drop API. Users can drag Pokémon from a "popular" list or reorder their chosen Pokémon within the three team slots. ## Future Potential: Integrating Generative AI with Gemini While the current application is fully functional, its architecture is ripe for enhancement with a powerful large language model like Google's Gemini. Here are a few ways we could level-up the experience: ### A Truly Intelligent AI Opponent The current rule-based AI could be replaced with a call to the Gemini API. We could send the entire game state and ask Gemini to act as a Pokémon battle strategist. ### Dynamic Battle Commentary The static battle log could be transformed into a lively, narrative experience. After each action, we could ask Gemini to generate flavorful text. ## Conclusion The Pokémon Card Battle Arena is a testament to what can be achieved with modern web technologies. By combining the component-based power of React, the vast data source of the PokeAPI, and the aesthetic flexibility of advanced CSS, we can create rich, engaging, and performant web applications. The modular design not only makes the code maintainable but also opens the door for exciting future integrations with generative AI. _Want to explore the code? Check out the [live demo](https://pok-mon-card-battle-arena-1071820676408.us-west1.run.app/)_

AI-Powered Weather App Development

Nicolás Deyros — Sun, 03 Aug 2025 00:00:00 GMT

Building a Production-Ready Weather App: A Journey with AI-Powered Development

_How I built a comprehensive weather application using Astro, TypeScript, and Tailwind CSS with the help of AI assistants - and what I learned along the way._

--- ## The Beginning: A Simple Idea It started as many projects do - with a simple need. I wanted to build a modern weather application that would showcase real-world development practices, from initial concept to production deployment. But this wasn't going to be just another tutorial project. I wanted to explore something exciting: **AI-assisted development**. Armed with access to two cutting-edge AI assistants - GitHub Copilot and Jules (Google's experimental AI) - I embarked on a journey that would teach me as much about collaborative AI development as it would about building great software.

💡 Key Insight

This wasn't just about building a weather app - it was about exploring a new paradigm of development where AI assistants become collaborative partners in the creative process.

## The Tech Stack: Modern and Minimal Before diving into code, I needed to choose the right tools. After some consideration, I settled on:

🚀 Astro 5.12.6

For its islands architecture and excellent performance

📘 TypeScript

For type safety and better developer experience

🎨 Tailwind CSS 4.1.11

For rapid, utility-first styling

🌤️ Open-Meteo API

For reliable, free weather data

⚡ Vercel

For seamless deployment and serverless functions

🤖 AI Assistants

GitHub Copilot & Google Jules

The beauty of this stack is its simplicity. No complex state management, no unnecessary abstractions - just modern web technologies working together harmoniously. ## Chapter 1: Building the Foundation ### The Core Architecture The first major decision was how to structure the application. I chose Astro's file-based routing with a server-side rendering approach: This API endpoint became the backbone of the application. Notice how I implemented proper error handling from the start - a practice that would prove crucial as the app grew in complexity. ### The Weather Data Transformation One of the most interesting challenges was transforming the Open-Meteo API response into something more usable. The raw API returns weather codes (integers) that need to be mapped to human-readable descriptions and appropriate icons: ```typescript // src/utils/weatherMapping.ts export const WEATHER_CODE_MAPPING = { 0: { icon: 'meteocons:clear-day-fill', description: 'Clear sky' }, 1: { icon: 'meteocons:partly-cloudy-day-fill', description: 'Mainly clear' }, 2: { icon: 'meteocons:partly-cloudy-day-fill', description: 'Partly cloudy' }, 3: { icon: 'meteocons:overcast-fill', description: 'Overcast' }, 45: { icon: 'meteocons:fog-fill', description: 'Fog' }, 48: { icon: 'meteocons:fog-fill', description: 'Depositing rime fog' }, 51: { icon: 'meteocons:drizzle-fill', description: 'Light drizzle' }, // ... 50+ more mappings } as const ``` This mapping system proved to be one of the most valuable parts of the application - it centralized all weather interpretation logic and made testing much easier. ## Chapter 2: The AI Collaboration Begins ### Working with GitHub Copilot

🤖

GitHub Copilot

Code Completion Specialist

Strengths: Pattern recognition, code completion, repetitive tasks

GitHub Copilot became my constant companion during the development process. Its suggestions were particularly brilliant when working on repetitive patterns. For example, when building the weather icon animations, Copilot helped me create a comprehensive set of CSS keyframes: ```css /* AI-assisted animation creation */ @keyframes rainDrop { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes snowFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-8px) rotate(120deg); } 66% { transform: translateY(-4px) rotate(240deg); } } @keyframes thunderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } 75% { transform: scale(1.15); opacity: 0.7; } } ``` Copilot didn't just suggest code - it understood the context and helped me maintain consistency across all animations. ### The Jules (Google AI) Experience

🧠

Jules (Google AI)

Strategic Architecture Advisor

Strengths: Strategic guidance, debugging, architectural decisions

Working with Jules brought a different perspective to the development process. Where Copilot excelled at code completion and pattern recognition, Jules provided more strategic guidance on architecture decisions and debugging complex issues. When I encountered a tricky bug where weather icons weren't displaying properly, Jules helped me trace through the entire data flow:

API Response Analysis - Verified the Open-Meteo API was returning correct data
Data Transformation - Checked that weather codes were being mapped correctly
Icon Resolution - Identified that the Astro Icon component needed proper fallbacks
Client-Side Rendering - Discovered issues with hydration timing

This systematic approach led to implementing a robust fallback system: ```typescript // Emoji-based fallback system for reliable icon display function createWeatherIcon(iconName: string, isLarge: boolean = false): string { const sizeClass = isLarge ? 'text-8xl' : 'text-4xl' let emoji = '☁️' let animationClass = '' switch (iconName) { case 'meteocons:clear-day-fill': emoji = '☀️' animationClass = 'animate-bounce' break case 'meteocons:rain-fill': emoji = '🌧️' animationClass = 'animate-rain-drop' break // Smart pattern matching for unknown icons default: if (iconName.includes('clear') && iconName.includes('day')) { emoji = '☀️' animationClass = 'animate-bounce' } else if (iconName.includes('rain')) { emoji = '🌧️' animationClass = 'animate-rain-drop' } // ... more intelligent fallbacks } return `${emoji}` } ``` ## Chapter 3: The Iteration Cycles ### First Iteration: Basic Functionality The first working version was surprisingly straightforward: - Simple location input - Basic weather display - Minimal styling But as I started using it, the limitations became apparent. The user experience was clunky, error handling was minimal, and the design felt amateurish. ### Second Iteration: Enhanced UX This is where the AI collaboration really shone. Both Copilot and Jules helped me identify UX improvements: **Quick Location Buttons:** ```astro

🇬🇧 London 🇺🇸 New York

``` **Geolocation Integration:** ```javascript // AI-assisted geolocation with proper error handling async function getCurrentLocation() { if (!navigator.geolocation) { throw new Error('Geolocation is not supported by this browser') } return new Promise((resolve, reject) => { const options = { enableHighAccuracy: true, timeout: 15000, maximumAge: 300000, // 5 minutes } navigator.geolocation.getCurrentPosition( position => { const { latitude, longitude } = position.coords resolve({ lat: latitude, lon: longitude }) }, error => { const errorMessages = { 1: 'Location access denied by user', 2: 'Location information is unavailable', 3: 'Location request timed out', } reject(new Error(errorMessages[error.code] || 'Unknown location error')) }, options, ) }) } ``` ### Third Iteration: Production Polish The final iteration focused on production readiness. This meant: 1. **Comprehensive Error Handling** 2. **Performance Optimization** 3. **Accessibility Improvements** 4. **Mobile Responsiveness** 5. **SEO Optimization** ## Chapter 4: The Testing Revolution ### AI-Assisted Test Development One of the most impressive aspects of working with AI was how it helped me build a comprehensive test suite. Starting with utility tests: ```typescript // src/test/utils.test.ts - AI helped structure comprehensive tests getWeatherDescription, getWeatherIcon, convertToFahrenheit, convertToCelsius, } from '../utils/weatherMapping' describe('Weather Utilities', () => { describe('Temperature Conversion', () => { it('should convert Celsius to Fahrenheit correctly', () => { expect(convertToFahrenheit(0)).toBe(32) expect(convertToFahrenheit(25)).toBe(77) expect(convertToFahrenheit(-10)).toBe(14) }) it('should convert Fahrenheit to Celsius correctly', () => { expect(convertToCelsius(32)).toBe(0) expect(convertToCelsius(77)).toBe(25) expect(convertToCelsius(14)).toBe(-10) }) }) describe('Weather Code Mapping', () => { it('should return correct descriptions for all weather codes', () => { expect(getWeatherDescription(0)).toBe('Clear sky') expect(getWeatherDescription(3)).toBe('Overcast') expect(getWeatherDescription(95)).toBe('Thunderstorm') }) it('should handle invalid weather codes gracefully', () => { expect(getWeatherDescription(999)).toBe('Unknown weather condition') }) }) }) ``` ### Integration Testing The AI assistants helped me build integration tests that actually start the development server and test the full application flow: ```typescript // src/test/frontend.test.ts describe('Frontend Integration', () => { const baseUrl = 'http://localhost:3001' it('should load the main page successfully', async () => { const response = await fetch(baseUrl) expect(response.status).toBe(200) const html = await response.text() expect(html).toContain('Weather') expect(html).toContain('App') }) it('should display weather data when coordinates are provided', async () => { const response = await fetch(`${baseUrl}?lat=51.5074&lon=-0.1278`) const html = await response.text() expect(html).toContain('London') expect(html).toContain('°C') expect(html).toContain('Next 3 Days') }) }) ``` The final test suite included **40 passing tests** covering: - **11 utility tests** - Temperature conversion, weather mapping, data validation - **14 API tests** - Endpoint responses, error handling, data transformation - **15 frontend tests** - Component rendering, user interactions, responsive design ## Chapter 5: The Developer Experience Revolution ### Tooling Setup with AI Guidance One of the most time-consuming aspects of modern development is setting up proper tooling. Here's where the AI collaboration truly excelled. Instead of spending hours configuring ESLint, Stylelint, Prettier, and Git hooks, the AI assistants helped me create a production-ready setup in minutes. **ESLint Configuration:** ```javascript // eslint.config.js - AI-optimized configuration export default [ ...typescriptEslint.configs.strict, ...astro.configs.recommended, { plugins: { 'simple-import-sort': simpleImportSort, }, rules: { 'simple-import-sort/imports': 'error', 'simple-import-sort/exports': 'error', '@typescript-eslint/no-unused-vars': [ 'error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_', }, ], }, }, ] ``` **Stylelint for Tailwind CSS:** ```json { "extends": ["stylelint-config-standard"], "rules": { "at-rule-no-unknown": [ true, { "ignoreAtRules": [ "tailwind", "apply", "variants", "responsive", "screen", "layer" ] } ], "no-descending-specificity": null, "selector-class-pattern": null, "custom-property-pattern": null }, "ignoreFiles": [ "dist/**/*", ".vercel/**/*", ".astro/**/*", "node_modules/**/*" ] } ``` **Pre-commit Hooks with Husky and Lint-staged:** ```json { "lint-staged": { "*.{js,ts,astro,jsx,tsx}": ["eslint --fix"], "*.css": ["stylelint --fix"], "*.{js,ts,astro,jsx,tsx,css,json,md}": ["prettier --write"] } } ``` This setup meant that every commit was automatically: - Linted for code quality issues - Formatted consistently - Tested to ensure nothing was broken - Validated for commit message format ### The Power of Automated Scripts The AI assistants helped me create a comprehensive set of npm scripts that made development a breeze: ```json { "scripts": { "dev": "astro dev --port 3001 --open", "build": "astro build", "lint:all": "npm run lint && npm run lint:css", "test:all": "npm run test:unit && npm run test:integration", "test:integration": "start-server-and-test dev http://localhost:3001 \"vitest run src/test/api.test.ts src/test/frontend.test.ts\"", "test:coverage": "vitest --coverage src/test/utils.test.ts" } } ``` The `test:integration` script was particularly clever - it automatically starts the development server, waits for it to be ready, runs the integration tests, then shuts down the server. No manual server management required! ## Chapter 6: Advanced Features and Polish ### Smart Icon System One of the features I'm most proud of is the intelligent weather icon system. Instead of relying solely on SVG icons (which can fail to load), I implemented a dual-system approach: ```typescript // Primary: SVG icons with Astro Icon component // Fallback: Animated emoji system function createWeatherIcon(iconName: string, isLarge: boolean = false): string { const sizeClass = isLarge ? 'text-8xl' : 'text-4xl' let emoji = '☁️' let animationClass = '' // Comprehensive mapping with intelligent pattern matching switch (iconName) { case 'meteocons:clear-day-fill': emoji = '☀️' animationClass = 'animate-bounce' break case 'meteocons:thunderstorms-fill': emoji = '⛈️' animationClass = 'animate-thunder-pulse' break // ... 18+ weather conditions covered default: // Smart fallback based on icon name patterns if (iconName.includes('clear') && iconName.includes('day')) { emoji = '☀️' animationClass = 'animate-bounce' } else if (iconName.includes('thunder') || iconName.includes('storm')) { emoji = '⛈️' animationClass = 'animate-thunder-pulse' } // ... more intelligent pattern matching } return `${emoji}` } ``` This system ensures that users always see appropriate weather icons, even if the SVG icon set fails to load. ### Temperature Unit Persistence A small but important UX detail was remembering the user's temperature unit preference: ```javascript // Temperature toggle with localStorage persistence window.switchToUnit = function (unit) { localStorage.setItem('temperatureUnit', unit) // Update toggle state const toggleCheckbox = document.getElementById('temp-toggle-checkbox') if (toggleCheckbox) { toggleCheckbox.checked = unit === 'fahrenheit' } // Convert all displayed temperatures document.querySelectorAll('[data-temp-c]').forEach(element => { const celsius = parseFloat(element.dataset.tempC) const converted = unit === 'fahrenheit' ? Math.round((celsius * 9) / 5 + 32) : celsius const suffix = unit === 'fahrenheit' ? '°F' : '°C' element.textContent = `${converted}${suffix}` }) } // Restore user preference on page load const savedUnit = localStorage.getItem('temperatureUnit') || 'celsius' window.switchToUnit(savedUnit) ``` ### Responsive Design Excellence The application needed to work perfectly on all devices. Tailwind CSS made this straightforward, but the AI assistants helped me think through the user experience: ```astro

``` ## Chapter 7: Deployment and Production ### Vercel Integration Deploying to Vercel was remarkably smooth thanks to Astro's built-in adapter: ```javascript // astro.config.mjs export default defineConfig({ vite: { plugins: [tailwindcss()], }, integrations: [icon()], adapter: vercel(), }) ``` That's it! The application automatically builds and deploys with: - Server-side rendering for initial page loads - Static generation for optimal performance - Serverless API routes for weather data - Edge caching for global performance ### Performance Optimization The final application achieved excellent performance metrics:

1.2s

First Contentful Paint

✓ Under 1.2s target

2.1s

Largest Contentful Paint

✓ Under 2.5s target

0.08

Cumulative Layout Shift

✓ Under 0.1 target

2.8s

Time to Interactive

✓ Under 3.0s target

🏆

Performance Achievement

All Core Web Vitals passed Google's "Good" thresholds, resulting in better search rankings and user experience scores.

These scores were achieved through: - **Astro's islands architecture** - Minimal JavaScript footprint - **Efficient CSS with Tailwind's purging** - Only unused styles removed - **Optimized weather API calls** - Smart caching and request batching - **Proper image optimization** - WebP format with fallbacks - **Strategic use of SSR vs static generation** - Best of both worlds ## Chapter 8: Lessons Learned ### AI as a Development Partner Working with AI assistants fundamentally changed how I approach development:

✅ What AI Excels At

• Pattern Recognition - Spotting repetitive code and suggesting abstractions
• Boilerplate Generation - Creating comprehensive configurations and test setups
• Error Debugging - Systematically working through complex issues
• Code Consistency - Maintaining style and patterns across the codebase
• Documentation - Generating thorough comments and README content

⚠️ What AI Struggles With

• Creative Problem Solving - Novel solutions to unique problems
• Business Logic Decisions - Understanding user needs and requirements
• Performance Trade-offs - Making architectural decisions based on constraints
• User Experience - Understanding subtle UX implications

🎯

The Sweet Spot

The most productive development happened when I provided the creative direction and architectural decisions, while the AI assistants handled implementation details, testing strategies, and tooling configuration.

### Technical Insights

📝

TypeScript is Essential

Even for a relatively simple application, TypeScript caught numerous potential runtime errors and made refactoring much safer.

🧪

Testing Pays Off

The comprehensive test suite caught several bugs during development and gave me confidence to refactor aggressively.

🔧

Tooling Investment

Spending time upfront on proper ESLint, Stylelint, and pre-commit hooks paid dividends throughout development.

⚡

Performance by Default

Astro's architecture meant the application was fast without additional optimization effort.

🚀

Progressive Enhancement

Building the core functionality to work without JavaScript, then enhancing with interactivity, created a more robust application.

## The Final Product The completed weather application showcases modern web development best practices: ### 🌟 **Features** - **Global Weather Data** - Any location worldwide via Open-Meteo API - **Responsive Design** - Seamless experience across all devices - **Smart Weather Icons** - 18+ animated weather conditions with intelligent fallbacks - **3-Day Forecasts** - Current conditions plus detailed forecasts - **Unit Conversion** - Celsius/Fahrenheit toggle with preference persistence - **Location Search** - City search with geolocation support - **Performance Optimized** - Fast loading with excellent Core Web Vitals - **Accessibility Ready** - Proper ARIA labels, keyboard navigation, screen reader support ### 🧪 **Quality Assurance** - **40 Comprehensive Tests** - Unit, integration, and API testing - **100% TypeScript** - Full type safety throughout the application - **Automated Code Quality** - ESLint, Stylelint, Prettier with pre-commit hooks - **Production Deployment** - Live on Vercel with serverless functions ### 🚀 **Performance Metrics** - **Lighthouse Score**: 95+ across all categories - **Bundle Size**: < 50KB gzipped - **First Load**: < 1.2s on 3G - **SEO Optimized**: Proper meta tags, structured data, semantic HTML ## Reflections on AI-Assisted Development This project proved that AI isn't replacing developers - it's making us more effective. The combination of human creativity and AI efficiency created something neither could have built alone. **The Future of Development:** - AI handles boilerplate, configuration, and testing setup - Developers focus on architecture, user experience, and business logic - Code quality improves through AI-assisted best practices - Development velocity increases without sacrificing quality **Key Takeaways:** 1. **AI is a Force Multiplier** - It amplifies good development practices but won't fix poor ones 2. **Human Judgment Remains Critical** - AI suggestions need evaluation and refinement 3. **Iteration is Key** - The best results come from multiple AI-assisted refinement cycles 4. **Testing Becomes Essential** - AI can generate comprehensive tests that catch issues early 5. **Documentation Quality Improves** - AI helps maintain thorough, up-to-date documentation ## What's Next? The weather app serves as a foundation for exploring more advanced concepts: - **Real-time Updates** - WebSocket connections for live weather changes - **Offline Support** - Service workers and cached data - **Advanced Visualizations** - Weather maps and interactive charts - **Machine Learning** - Personalized weather insights - **Mobile App** - React Native or Flutter implementation But more importantly, this project demonstrated a new way of building software - one where AI assistants handle the mechanical aspects of development while humans focus on the creative and strategic elements. The future of web development isn't about humans vs. AI - it's about humans **with** AI, building better software faster than either could alone. --- _Want to explore the code? Check out the [live demo](https://weather-app-pink-phi-60.vercel.app/) or browse the [source code on GitHub](https://github.com/nicolas-deyros/weather-app). The complete test suite, tooling configuration, and deployment setup are all available for reference._ **Final Stats:** - **Lines of Code**: ~2,000 - **Development Time**: 3 days - **Tests Written**: 40 - **AI Interactions**: 200+ - **Coffee Consumed**: ☕☕☕ _This project was built with the assistance of GitHub Copilot and Jules (Google AI). All code, architecture decisions, and final implementation were human-reviewed and approved._

Vibe coding has made me more productive

Nicolás Deyros — Fri, 18 Jul 2025 00:00:00 GMT

## Introduction I know the image and video will generate clickbait, and that is the idea. Numerous articles, videos, podcasts, and books discuss the benefits and risks of vibe coding. This is not another article intended to discuss that. This is a **personal article** based on my experience with Vibe Coding and how it has increased my productivity over the past two years. ## Context: My AI Journey First, let's give some context. Since the AI era began, I have been utilizing various AI tools to enhance my productivity and discover solutions that would have been difficult to find using traditional methods, such as Google. Learning and working as a **pair programmer** is another plus for me. My career has been a journey of continuous evolution. I come from the advertising world but found my place in development. I worked in the internet industry before YouTube, Facebook, and many other companies. I consider myself a **pioneer user**. ### The Evolution I've Witnessed The evolution that I've experienced in my 20+ years of career is incredible. I recall when we had to: - 💾 Send all our banners and files to the media on a **CD or USB drive** - 🔧 Update files directly on production using **FTP** - 🎬 Add animations only with **GIF files** - ⚡ When **Flash was the king** of the world What humanity has achieved with AI is incredible, and this is only the tip of the iceberg. I won't deny that AI is overwhelming. Trying to stay up to date with everything is impossible. However, I have felt this way in the past, when a new JS framework was released every week, claiming to solve problems existing in React or promising a breakthrough or some magical trick. > Do not forget that everything JS Nation is offering has already been resolved in PHP, Ruby, or many other languages. ## The Productivity Breakthrough For the past few years, I have been struggling to find time for research and development. I love coding and creating stuff. I enjoy the challenge of solving a puzzle and finding new ways to approach tasks. I consider myself a **problem solver**. Since I started using **Copilot in Visual Studio Code**, I have seen an increase in my productivity. I have also begun playing and investigating the use of **Google AI Studio**. Over the past month, I have developed more applications than I have in the past two years combined. ## Google AI Studio Journey ### 🎮 Pokémon Battle Arena I started my journey creating a Pokémon card game, **Pokémon Battle Arena**—a simple and silly game, but with an incredible UI for the cards. **[🚀 Play Pokémon Battle Arena](https://pok-mon-card-battle-arena-1071820676408.us-west1.run.app/)** > I've always believed that the right tools don't just make you faster—they fundamentally change how you create. While building this interactive Pokémon Battle Arena, I experienced that firsthand by integrating the Gemini API into my development workflow. What would have been a multi-week project, bogged down by complex game logic, API data modeling, and intricate UI styling, was completed in a fraction of the time. The AI served as my tireless pair programmer, helping me: - 🏗️ Scaffold complex React hooks - ✨ Design holographic card effects - 🧠 Generate deterministic logic for the computer opponent This wasn't about offloading work; it was about elevating my focus from the mundane to the truly creative. _Note: The card design was taken from Codepen, following the example created by [Simon 🦝 G.](https://codepen.io/simeydotme/pen/PrQKgo)_ ### 🐉 Dragon Ball Universe Explorer The second application I built, concurrently with the Pokémon Battle Arena, is a Dragon Ball Universe version utilizing the Dragon Ball API. **[🚀 Play Dragon Ball Universe](https://dragon-ball-universe-explorer-135079448490.us-west1.run.app/)** > As a lifelong Dragon Ball fan, I always dreamed of creating an immersive digital encyclopedia for its iconic characters. What would typically have been a months-long solo project, the 'Dragon Ball Universe Explorer,' was brought to life in a fraction of the time, and the secret weapon was AI. Leveraging Google's Gemini API was a paradigm shift in productivity: - 🏛️ Architecting component structure - 🔄 Generating complex sorting logic - 🎨 Refining UI/UX for dynamic feel ### 🤖 AI Conversation Log My latest creation, inspired by other things I've heard, and I was eager to try, is the **AI Conversation app**. **[🚀 Try AI Conversation Log](https://ai-conversation-log-252745535225.us-west1.run.app/)** > Building the "AI Conversation Log" was a powerful lesson in what's possible when human creativity is amplified by artificial intelligence. By leveraging the Gemini API as a development partner, what would have been a complex, multi-week project was brought to life in a fraction of the time. The AI seamlessly handled: - 🎭 Generating diverse character personas - 💬 Drafting complex conversational logic - 🌍 Providing real-time translation capabilities ### 📋 Neon Kanban Board These are the three applications that I have published; however, I have developed many more. For example, a **Kanban Board with a neon look and feel**. > The Neon Kanban To-Do App! It's a vibrant, Jira-inspired task manager with seamless drag-and-drop functionality, designed to make productivity visually engaging. What's truly revolutionary about this project, however, is how it was built. By leveraging the power of Gemini as a coding partner, I was able to: - ⚡ Accelerate development significantly - 🔧 Generate boilerplate code automatically - 🎯 Implement complex drag-and-drop UI logic - 🎨 Focus on architectural design and user experience ## Portfolio Renaissance This inspired me to retake a long-abandoned project: **my portfolio**. Although it is still a work in progress, with the help of AI, I have made significant progress over the last couple of weeks. ### Copilot as a Coding Partner I generally program alone. I do not work on my project with other developers. This is a challenge because my learning curve depends entirely on me. In my daily role as a developer manager, my work is reflected in the work of my team. For my portfolio, which is still under development, I'm using **Astro**. I have found in Astro a great tool that allows me to do all I want. If I need to add additional functionality, I can incorporate React, Vue, or another framework to make it more complete. ## The Future of Creative Development I have a long road to travel in this continuous learning process. When I get accustomed to something new, something new will come up to amaze me. ### 🎬 AI-Generated Content The video of this article was created using **Gemini Veo**. A simple prompt can now create beautiful animation. The possibilities are endless when we combine: - 🤖 AI-powered development tools - 🎨 Creative vision and experience - 🚀 Rapid prototyping capabilities ## Key Takeaways My journey with vibe coding has taught me that AI tools like GitHub Copilot and Google AI Studio are not just productivity enhancers—they're **creativity amplifiers**. They allow us to: - ⚡ **Build faster** without sacrificing quality - 🎯 **Focus on creativity** instead of boilerplate - 🧠 **Learn continuously** through AI pair programming - 🚀 **Prototype rapidly** and iterate quickly ## Join the Conversation Share with me your thoughts, opinions, or journey about AI. How has AI transformed your development workflow? --- _Originally published on [Nicolas Deyros' LinkedIn](https://www.linkedin.com/pulse/vibe-coding-has-made-me-more-productive-nicolas-deyros-x8rff/)_

AI Debate Arena Using Google AI Studio

Nicolás Deyros — Tue, 15 Jul 2025 00:00:00 GMT

Have you ever imagined witnessing a lively debate between a Sarcastic Wit and a Shakespearean Poet discussing the future of technology? Now you can embark on this journey as I introduce the innovative AI Conversation Log, developed with Google AI Studio. This web application, powered by the Gemini API, reshapes our interaction with artificial intelligence, allowing you to orchestrate vibrant, real-time debates between two dynamic AI personas.

What Makes This Project Special

This project is a testament to the endless possibilities of creating an engaging and interactive experience. Here’s what makes it truly remarkable:

🎭 Choose Your Fighters

Say goodbye to mundane prompts. In the AI Conversation Log, you can select and personalize vivid personalities for your AI participants. Dive into a rich tapestry of personas, such as:

The Pragmatist vs. The Philosopher
The Enthusiast vs. The Cynical Critic
The Wise Mentor vs. The Curious Child
The Data Analyst vs. The Storyteller
And many more! Each persona embodies unique behaviors and traits that transform the conversation into something truly memorable.

🧠 Strategic Token Limits

This application introduces a fascinating challenge to interaction. Each debate is bound by a limited token budget, compelling the AIs to articulate their arguments concisely and with purpose. This urgency amplifies creativity and encourages impactful exchanges.

📊 Intelligent Conversation Summary

When the conversation concludes, whether by your direction or reaching the token limit, the application generates a concise, neutral summary using advanced AI algorithms. This summary captures the essence of the dialogue, ensuring that the key arguments and tone are preserved for deeper reflection.

🔊 Integrated Web-Native APIs

The app enhances the debate experience through seamless integration of Google’s advanced AI and web-native technologies:

Gemini API for real-time dialogue generation
Web Speech API for distinct, customizable voices
Multi-language support expanding your experience and understanding Each debate comes alive with unique voices, making the experience truly immersive.

More Than Entertainment

This tool is more than entertainment; it is a powerful gateway to explore complex topics from diverse perspectives. It can:

✨ Inspire creative brainstorming sessions
🤝 Foster meaningful discussions
📚 Serve as an engaging educational model for growth
🎯 Help explore different viewpoints on complex topics

Technical Innovation

Creating this project with Google AI Studio has been an inspiring journey, showcasing the potential for sophisticated AI interactions that blend intellect with excitement. The application demonstrates how modern AI can create:

Dynamic personality simulation
Contextual conversation flow
Real-time response generation
Intelligent content summarization

Experience It Yourself

Ready to witness AI debates that will challenge your perspective and entertain your mind? 🚀 Try the AI Debate Arena

Originally published on Nicolas Deyros’ LinkedIn

Relative Mobile Conversion Rate Dashboard

Nicolás Deyros — Mon, 16 Mar 2020 00:00:00 GMT

In a really interesting post The value of speed, written by Lina Hansson, she develops the concept of Relative Mobile Conversion Rate (Rel mCvR).

Since you’re interested in how site speed affects conversions, the mobile site is most relevant—that’s where you’re most likely to see the benefits of speed improvements. Rather than looking at the mobile conversion rate alone, though, you’ll be analyzing the relative mobile conversion rate (Rel mCvr), which is calculated by dividing the mobile conversion rate by the desktop conversion rate. This approach reduces the noise from external factors, which tend to affect both desktop and mobile, and makes it easier to see whether any increases in the mobile site’s effectiveness were actually caused by the speed improvements. I’m not going to cover all the posts written by Lina because she does a great job. Her post is a must-read. I’m just going to present my approach for developing her dashboard in Google Data Studio.

Relative Mobile Conversion Rate Data Studio Dashboard

Below you’ll find a step by step procedure for reproducing Rel mCvr report in Google Data Studio. In order to create this dashboard you need to take into consideration the following steps:

1. Data Source

You should use the blended data of the same data source. The join keys you should select are:

Date
Week of year and Week of the year
Month of year and Month of the year After that you should proceed and select the following metrics:
Speed Metrics Sample
Ecommerce Conversion Rate
Sessions
Avg. Page Load Time (sec)
Revenue As you can see, you should rename the metrics adding “Mobile” or “Desktop” for differentiation purposes.

2. Filters

You should apply filters to each data source before you blend them. You should create two filters, one for mobile and the other for desktop. To perform this task, just include the information from the metric “Device Category” equal to mobile or desktop. Filter Configuration:

Mobile Filter: Device Category = mobile
Desktop Filter: Device Category = desktop

3. Relative Mobile Conversion Rate Formula

The process, for calculating the formula of the Rel mCvR, is that you should create a custom field. The formula is the following:

SUM(NARY_MAX(Mobile Ecommerce Conversion Rate,0))/SUM(NARY_MAX(Desktop Ecommerce Conversion Rate,0))

The process for creating a custom calculated field involves:

Adding the formula above
Defining the type as a percent
Naming the field “Relative Mobile Conversion Rate” The image below shows you the process for creating a custom calculated field, adding the formula and the define the type as a percent.

Video Tutorial

## Implementation Steps Here's a quick checklist for implementation: - [ ] Set up blended data source in Google Data Studio - [ ] Configure join keys (Date, Week, Month) - [ ] Apply device category filters - [ ] Rename metrics with Mobile/Desktop prefixes - [ ] Create custom calculated field for Rel mCvR - [ ] Set field type to percentage - [ ] Build dashboard visualizations ## Final Thoughts As mentioned at the beginning of this article, Lina's post is a must-read in order to get a deep understanding of the Relative Mobile Conversion Rate (Rel mCvR). This dashboard approach allows you to: - **Isolate mobile performance** from external factors - **Track speed optimization impact** on conversions - **Make data-driven decisions** about mobile improvements - **Benchmark mobile against desktop** performance Don't hesitate to contact me if you have any doubts or if you need help implementing this dashboard. --- _Originally published on [Nicolas Deyros' LinkedIn](https://www.linkedin.com/pulse/relative-mobile-conversion-rate-dashboard-nicolas-deyros/)_

Programmatic Advertising for Digital Project Manager

Nicolás Deyros — Thu, 31 May 2018 00:00:00 GMT

Introduction

Programmatic advertising is the best solution for delivering creative content/advertising to consumers according to their phase in the consumer journey. Programmatic gives brands the power of creating specific creativity adapted to the consumer necessity, voice, etc.

Objective

This article is written as a guide for Digital Project Manager. It provides an overview of what needs to be done in order to setup a programmatic advertising campaign.

Scope

The Digital Project Manager is responsible for the scope definition, coordination and execution. In order to do so, he needs to understand the roles and responsibilities of all the FTEs involved.

Roles & Responsibilities

Trafficker

DoubleClick Manager (DCM) setup
Placement tag creation
DoubleClick Studio profile creation
DoubleClick Manager (DCM) floodlights setup

Bid Manager

DoubleClick Bid Manager (DBM) setup
Suggest media investment and advertising buying deal types (Open Auction, Private Auctions, Preferred Deals, Guaranteed Deals & Traditional Tag Based)
Suggest and implement media optimizations
Connects DBM with the DMP

Business Intelligence

Defines control metrics cross platform
Defines Google Analytics funnel goals
Report campaign & site (landing page) performance
Define media & site A/B test
Setup Google DataStudio
Defines naming convention

Designer

Adapt creativity to Google Web Designer
Creates media feed
Connect Google Web Designer with DoubleClick Studio profile

Media Planner

Defines media mix
Media planning
Defines reach and frequency

Strategic Planner

Define strategy
Define feed rules
Define consumer journey’s
Define campaign audience

Project Manager

Define scope of work
Estimate timeline
Project control and follow up
Defines deliverables

Audience Manager

Create campaign audiences
Manage Data Management Platform (DMP)
Defines floodlights

Creative

Campaign concept creation
Creative development

Developer

Google Tag Manager implementation
Implement tracking tags
DoubleClick Manager (DCM) floodlights implementation
Site performance analysis
Integrates client CRM

Quality Assurance (QA)

Creativity QA
Media Tags QA
Platforms Tags QA
Programmatic feed QA
Media performance QA

Project Plan

Below’s graphic presents a macro overview of time, priority and effort required:

Programmatic Advertising Project Workflow

{/* Phase 1: Planning */}

1. Planning

Strategic Planner

Media Planner

Audience Manager

Business Intelligence

{/* Phase 2: Creative & Development */}

{/* Phase 2.1: Creative */}

2.1. Creative

Creative

Designer

{/* Phase 2.2: Development */}

2.2. Development

Trafficker

Developer

{/* Phase 3: Implementation */}

3. Implementation

Bid Manager

Trafficker

Media Planner

Audience Manager

{/* Phase 4: Optimization */}

4. Optimization

Bid Manager

Media Planner

Business Intelligence

Audience Manager

{/* Quality Assurance & Project Manager - Always Present */}

Quality Assurance

Continuous oversight across all phases

Project Manager

Coordination and execution management

{/* Timeline Indicator */}

Sequential workflow with parallel creative and development phases

## Tools - DoubleClick Campaign Manager (DCM) - DoubleClick Bid Manager (DBM) - DoubleClick Rich Media - DoubleClick Studio - DoubleClick for Publishers (DFP) - DoubleClick Ad Exchange (AdX) - Google Analytics - Google Data Studio - Google Tag Manager - Google Optimize - Google Attribution - Google Audience - Google Web Designer ## Best Practices 1. **Define all scenarios** to test from the beginning in order to create DoubleClick Studio rules, programmatic feed structure and creativity design 2. **Control all platform metrics** in order to see gaps, delivery bounce rate, A/B test results 3. **Control default creative metrics** - Default creativity should print/consume less than 1% of the budget 4. **Manage default creatives** - Default creative is implemented on the feed and DCM, which means you have 2 defaults to control 5. **Create different insertion orders** (DBM) according to the audience strategy, geo localization and test 6. **Consider mobile devices** - Do not forget mobile device sizes when thinking of a creative ## Sources - [The buyer's guide to Programmatic Direct](https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/industry-perspectives/buyers-guide-to-programmatic-direct/) - [Google Studio](https://www.google.com/doubleclick/studio/homepage/) - [Google DoubleClick Tools](https://www.thinkwithgoogle.com/intl/en-154/products/doubleclick/) --- _Originally published on [Nicolas Deyros' LinkedIn](https://www.linkedin.com/pulse/programmatic-advertising-digital-project-manager-nicolas-deyros/)_