Forem: Phạm Tiến Thuận Phát

Test any website with one URL—meet Scout (an AI quality companion) 🧠

Phạm Tiến Thuận Phát — Tue, 07 Oct 2025 16:05:38 +0000

Test any website with one URL—meet Scout

🧠

I'm super super excited to introduce with you guys to my AI Testing Companion

In the era of AI Native App

Building web apps is faster than ever with tools like Cursor and code assistants. But shipping quickly often turns testing into a pain point: you add a feature, and suddenly an older flow breaks or behaves weirdly.

My teammates and I are working on Scout, an agent that helps you test entire websites with a single URL—then keeps testing the parts you care about.

What Scout does

🟢 First scan (site-wide): Get an overview of the whole website and a report of issues or bugs found on the first pass.

🟢 Targeted follow-ups: Ask Scout to test specific features, user flows, or edge cases you care about.

🟢 Actionable reports: Receive concise findings with concrete next steps. You can also trigger a fresh report any time.

👉 Specially for Lovable and Replit apps

If your product is built with Lovable or Replit, you don’t need any setup. Just insert scoutqa between lovable and .app in your domain and Scout will run automatically.

Example
Original:
https://giggles-and-gizmos-12773.lovable.app/
With Scout:
https://giggles-and-gizmos-12773.lovable.scoutqa.app/

Why this matters

Speed: One URL to kick off testing—no heavy configs.

Coverage: Catch regressions across pages while still drilling into critical paths.

Clarity: Reports focus on root causes and suggested fixes, not just raw logs.

What we’re exploring next

Smarter test-case generation from user stories

Visual diff + accessibility checks in the loop

CI-friendly runs with per-PR summaries

The most significant thing is that we will evolve along the way to make Scout more and more robust, a really helpful Testing Companion.

👉 Try it here on Product Hunt:
https://www.producthunt.com/products/scout-qa-ai-quality-companion?launch=scout-qa-ai-quality-companion

We’d love your feedback

What worked well? What didn’t?

Which features should we add next?

Any wild ideas you think Scout should try?

Share your thoughts here

(quick form):
https://docs.google.com/forms/d/e/1FAIpQLSdhkg-aC8T5d2zFVgPPVuZ1JHRaCkxvTMA69h0bWoXfdDh_Qw/viewform?usp=preview

And if you find Scout useful, an upvote means a lot:
https://www.producthunt.com/products/scout-qa-ai-quality-companion?utm_source=other&utm_medium=social&launch=scout-qa-ai-quality-companion

🚀 Do you want to have your own MCP Server can be used anywhere from VSCode Copilot, n8n ?

Phạm Tiến Thuận Phát — Sun, 29 Jun 2025 17:44:53 +0000

🚀 Complete Guide: Deploying MCP Server on AWS EC2 with SSE Transport and HTTPS

Model Context Protocol (MCP) is revolutionizing how AI applications interact with external data sources and tools. In this comprehensive guide, we'll walk through deploying a production-ready MCP server on AWS EC2 with Server-Sent Events (SSE) transport, complete with HTTPS SSL certificates and proper Nginx configuration.

📋 What You'll Learn

Understanding MCP and SSE transport protocol
Building and pushing Docker images to AWS ECR
Deploying MCP server on EC2 with proper security
Configuring Nginx for SSE streaming with SSL
Troubleshooting common MCP deployment issues
Testing with n8n and other MCP clients

🔍 Understanding MCP and SSE Transport

What is Model Context Protocol (MCP)?

Model Context Protocol is an open standard that enables AI applications to securely connect to external data sources, databases, and tools. It provides a standardized way for Large Language Models (LLMs) to access real-time information and execute actions.

Key Benefits:

Standardized Interface: Consistent API across different tools and services
Security: Controlled access to external resources
Real-time Data: Live connections to databases, APIs, and file systems
Extensibility: Easy to add new tools and capabilities

Why SSE (Server-Sent Events) Transport?

Server-Sent Events provide unidirectional, real-time communication from server to client over HTTP. Unlike WebSockets, SSE is simpler and perfect for MCP's use case:

SSE Advantages for MCP:

HTTP-based: Works with existing infrastructure (load balancers, proxies)
Auto-reconnection: Built-in connection recovery
Simpler than WebSockets: Less overhead for one-way communication
Firewall-friendly: Uses standard HTTP/HTTPS ports

MCP Protocol Flow:

1. Client → GET /sse → Server (Establish SSE stream for responses)
2. Client → POST /messages → Server (Send MCP commands)  
3. Server → SSE Stream → Client (Send responses back)

🏗️ Architecture Overview

┌─────────────┐    HTTPS    ┌─────────────┐    HTTP    ┌─────────────┐
│   MCP       │ ──────────► │   Nginx     │ ─────────► │   Docker    │
│   Client    │             │   Proxy     │            │   Container │
│  (n8n/VSC)  │             │   + SSL     │            │ (MCP Server)│
└─────────────┘             └─────────────┘            └─────────────┘
                                   │
                            ┌─────────────┐
                            │ Let's       │
                            │ Encrypt     │
                            │ SSL Cert    │
                            └─────────────┘

🛠️ Prerequisites

AWS Account with CLI configured
Docker installed locally
Domain name with DNS management access
Basic knowledge of Linux/Ubuntu commands

📦 Step 1: Build and Push Docker Image to ECR

1.1 Create ECR Repository

# Create ECR repository
aws ecr create-repository --repository-name mcp-server --region us-east-1

# Get login token
aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin <ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com

1.2 Build and Tag Docker Image

# Build your MCP server image
docker build -t mcp-server:latest .

# Tag for ECR
docker tag mcp-server:latest <ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/mcp-server:latest

# Push to ECR
docker push <ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/mcp-server:latest

🖥️ Step 2: Launch and Configure EC2 Instance

2.1 Launch EC2 Instance

Via AWS Console:

AMI: Ubuntu Server 22.04 LTS
Instance Type: t3.small (or t2.micro for testing)
Key Pair: Create or select existing
Security Group: Create with these ports:
- SSH (22): Your IP
- HTTP (80): 0.0.0.0/0
- HTTPS (443): 0.0.0.0/0
- Custom (8000): 0.0.0.0/0 (for testing)

2.2 Create IAM Role for ECR Access

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "ec2.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

Attach Policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "ecr:GetAuthorizationToken",
        "ecr:BatchCheckLayerAvailability",
        "ecr:GetDownloadUrlForLayer",
        "ecr:BatchGetImage"
      ],
      "Resource": "*"
    }
  ]
}

🐳 Step 3: Setup Docker and Deploy Container

3.1 SSH into EC2 and Install Dependencies

# SSH into your instance
ssh -i your-key.pem ubuntu@<EC2_PUBLIC_IP>

# Update system
sudo apt update && sudo apt upgrade -y

# Install Docker
sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker
sudo usermod -a -G docker ubuntu

# Apply docker group (avoid logout)
newgrp docker

# Install AWS CLI
sudo apt install -y awscli

3.2 Pull and Run MCP Server Container

# Login to ECR
aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin <ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com

# Pull image
docker pull <ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/mcp-server:latest

# Create logs directory
mkdir -p ~/mcp-logs

# Run container
docker run -d \
  --name mcp-server \
  --restart unless-stopped \
  -p 8000:8000 \
  -v ~/mcp-logs:/app/logs \
  <ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/mcp-server:latest

# Verify container is running
docker ps
docker logs mcp-server

# Test endpoint
curl http://localhost:8000/sse

🌐 Step 4: Configure DNS

Add an A record in your DNS provider:

Type: A
Name: mcp-server
Value: <EC2_PUBLIC_IP>
TTL: 300

Verify DNS propagation:

nslookup mcp-server.yourdomain.com
dig mcp-server.yourdomain.com

🔧 Step 5: Install and Configure Nginx

5.1 Install Nginx

sudo apt install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx

5.2 Configure Nginx for MCP SSE Transport

⚠️ Critical Configuration for MCP Protocol:

sudo tee /etc/nginx/sites-available/mcp-server.conf > /dev/null << 'EOF'
server {
    listen 80;
    server_name mcp-server.yourdomain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name mcp-server.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/mcp-server.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mcp-server.yourdomain.com/privkey.pem;

    # SSL configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers off;

    # CRITICAL: SSE endpoint - ONLY GET requests
    location = /sse {
        if ($request_method != GET) {
            return 405;
        }

        proxy_pass http://127.0.0.1:8000/sse;

        # Essential for SSE streaming
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # Standard proxy headers
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # SSE specific - NO BUFFERING
        proxy_buffering off;
        proxy_cache off;
        proxy_read_timeout 3600s;
        proxy_send_timeout 3600s;

        # CORS headers
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, OPTIONS';
        add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
    }

    # CRITICAL: Messages endpoint for POST requests
    location /messages {
        proxy_pass http://127.0.0.1:8000;

        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Content-Type $content_type;

        # CORS headers
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
    }

    # Handle CORS preflight requests
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            return 200;
        }

        return 301 /sse;
    }
}
EOF

# Enable the configuration
sudo ln -s /etc/nginx/sites-available/mcp-server.conf /etc/nginx/sites-enabled/
sudo rm -f /etc/nginx/sites-enabled/default

# Test configuration
sudo nginx -t

# Reload Nginx
sudo systemctl reload nginx

🔒 Step 6: Setup SSL Certificate with Let's Encrypt

6.1 Install Certbot

sudo apt install -y certbot python3-certbot-nginx

6.2 Obtain SSL Certificate

sudo certbot --nginx -d mcp-server.yourdomain.com --email your@email.com --agree-tos --non-interactive

6.3 Setup Auto-renewal

echo "0 12 * * * /usr/bin/certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null

6.4 Verify SSL

sudo certbot certificates
curl -v https://mcp-server.yourdomain.com/sse

🚨 Critical: Understanding the Nginx Configuration

Why This Configuration is Essential for MCP

❌ Common Mistake - Single Endpoint:

# This WILL NOT WORK for MCP
location /sse {
    proxy_pass http://localhost:8000/sse;
    # Tries to handle both GET and POST on same endpoint
}

✅ Correct Configuration - Separate Endpoints:

# GET /sse - For SSE streaming (responses)
location = /sse {
    if ($request_method != GET) { return 405; }
    proxy_pass http://127.0.0.1:8000/sse;
}

# POST /messages - For MCP commands
location /messages {
    proxy_pass http://127.0.0.1:8000;
}

Why MCP Needs Two Endpoints

MCP Protocol Requirements:

SSE Stream (GET /sse): Persistent connection for receiving responses
Command Channel (POST /messages): Send MCP commands and requests

What Happens:

Client establishes: GET /sse → Long-lived SSE connection
Client sends command: POST /messages/?session_id=xxx → JSON-RPC request
Server responds via: SSE stream → Real-time response

Common Errors and Solutions

Error: RuntimeError: Expected ASGI message 'http.response.body'

Cause: POST requests sent to SSE endpoint
Solution: Separate GET and POST endpoints as shown above

Error: 405 Method Not Allowed

Cause: Wrong HTTP method for endpoint
Solution: Ensure GET for /sse, POST for /messages

✅ Step 7: Testing Your MCP Server

7.1 Basic Connectivity Tests

# Test SSE endpoint
curl -v -H "Accept: text/event-stream" https://mcp-server.yourdomain.com/sse

# Expected output:
# event: endpoint
# data: /messages/?session_id=xxx
# : ping - 2024-01-01T12:00:00+00:00

# Test HTTPS redirect
curl -v http://mcp-server.yourdomain.com/sse
# Should redirect to HTTPS

7.2 Monitor Server Logs

# Watch container logs
docker logs mcp-server -f

# Expected successful logs:
# INFO: 172.17.0.1:40138 - "GET /sse HTTP/1.1" 200 OK
# INFO: 172.17.0.1:40152 - "POST /messages/?session_id=xxx HTTP/1.1" 202 Accepted

7.3 Test with VSCode Copilot, n8n

Add MCP Tool in n8n:

{
  "url": "https://mcp-server.yourdomain.com/sse",
  "transport": "SSE"
}

Successful Connection Indicators:

n8n shows "Connected" status
Server logs show both GET and POST requests
Tools are listed and callable

🔧 Troubleshooting Common Issues

Issue 1: DNS Not Resolving

Symptoms:

nslookup mcp-server.yourdomain.com
# Returns NXDOMAIN

Solutions:

Verify A record is created correctly
Wait for DNS propagation (up to 48 hours)
Use online DNS checkers to verify propagation

Issue 2: SSL Certificate Fails

Symptoms:

Certbot failed to authenticate some domains
DNS problem: NXDOMAIN looking up A for mcp-server.yourdomain.com

Solutions:

Ensure DNS is fully propagated before running certbot
Verify domain points to correct IP
Check firewall allows HTTP (port 80) for validation

Issue 3: MCP Client Can't Connect

Symptoms:

Client shows "Connection failed"
405 Method Not Allowed errors
ASGI protocol errors

Solutions:

Verify Nginx configuration separates GET and POST endpoints
Check CORS headers are present
Ensure container is running and accessible on port 8000

Issue 4: SSE Stream Disconnects

Symptoms:

Connection drops after few seconds
Client keeps reconnecting

Solutions:

Verify proxy_buffering off in Nginx
Check proxy_read_timeout is set high (3600s)
Ensure container handles SSE properly

🚀 Production Considerations

Security Hardening

# Restrict SSH access
sudo ufw enable
sudo ufw allow ssh
sudo ufw allow 'Nginx Full'

# Update security group to restrict SSH to your IP only

Monitoring and Logging

# Setup log rotation
sudo tee /etc/logrotate.d/mcp-server << EOF
~/mcp-logs/*.log {
    daily
    rotate 7
    compress
    delaycompress
    missingok
    notifempty
}
EOF

# Monitor with CloudWatch (optional)
# Install CloudWatch agent for detailed monitoring

Backup Strategy

# Backup container logs
tar -czf mcp-logs-backup-$(date +%Y%m%d).tar.gz ~/mcp-logs/

# Backup Nginx configuration
sudo cp /etc/nginx/sites-available/mcp-server.conf ~/nginx-backup.conf

🎯 Final Verification Checklist

[ ] Container running and accessible on port 8000
[ ] DNS resolves to correct IP address
[ ] HTTPS certificate valid and auto-renewing
[ ] GET /sse returns SSE stream
[ ] POST /messages accepts JSON requests
[ ] MCP client (n8n/VS Code) connects successfully
[ ] Server logs show both GET and POST requests
[ ] Tools are discoverable and executable

🎉 Conclusion

You now have a production-ready MCP server running on AWS EC2 with:

Secure HTTPS with automatic SSL certificate renewal
Proper SSE transport configuration for real-time communication
Scalable architecture ready for production workloads
Comprehensive monitoring and troubleshooting capabilities

The key insight from this deployment is understanding that MCP requires two separate endpoints: one for SSE streaming (GET /sse) and another for command messages (POST /messages). This separation is crucial for the protocol to work correctly with clients like n8n, VS Code, and other MCP-compatible tools.

Next Steps

Scale horizontally: Use Application Load Balancer for multiple instances
Add monitoring: Implement CloudWatch dashboards and alerts
Enhance security: Add API authentication and rate limiting
Optimize performance: Implement caching and connection pooling

📚 Additional Resources

Happy deploying! 🚀 If you found this guide helpful, please share it with others building MCP servers.

🐦 VibeCoding - AmazonQ CLI Building Flappy Bird with Phaser 3 + TypeScript: A Journey from Bugs to Victory

Phạm Tiến Thuận Phát — Sun, 08 Jun 2025 14:10:12 +0000

How I created a fully functional Flappy Bird game and learned valuable lessons about game development, debugging, and problem-solving along the way pair with AmazonQ CLI

🎮 The Challenge

Ever wondered what it takes to recreate one of the most addictive mobile games of all time? I recently embarked on a journey to build Flappy Bird from scratch using modern web technologies, and let me tell you - it was quite an adventure!

Tech Stack:

🎯 Phaser 3 - Game engine
📝 TypeScript - Type safety and better DX
📦 Rollup - Module bundling
🎨 HTML5 Canvas - Rendering
🔊 Web Audio API - Sound effects

🚀 The Development Journey

Phase 1: Setting Up the Foundation

The project started with a clean architecture approach:

flappy-bird-game/
├── src/
│   ├── scenes/          # Game scenes (Menu, Game, GameOver)
│   ├── objects/         # Game entities (Bird, PipeManager, Background)
│   ├── config/          # Game configuration
│   └── assets/          # Images and sounds

Key decisions:

TypeScript for better code maintainability
Scene-based architecture for clean separation of concerns
Component-based game objects for reusability

Phase 2: The Physics and Animation

Creating the bird was surprisingly fun! Here's what made it special:

export class Bird {
  private sprite: Phaser.Physics.Arcade.Sprite;

  flap(): void {
    this.sprite.setVelocityY(GameConfig.bird.flapStrength); // -350 px/s
    this.flapSound.play();
  }

  update(): void {
    // Realistic rotation based on velocity
    if (this.sprite.body.velocity.y < 0) {
      this.sprite.setRotation(-0.5); // Upward tilt
    } else {
      this.sprite.setRotation(Math.min(0.5, this.sprite.rotation + 0.05));
    }
  }
}

The magic details:

✨ Smooth rotation that follows physics
🎵 Sound feedback on every flap
🎭 3-frame animation for wing flapping

Phase 3: The Great Scoring System Debugging Saga 🐛

This is where things got really interesting. What seemed like a simple feature turned into a fascinating debugging adventure!

The Problem: Score Wasn't Working! 😱

// ❌ This approach FAILED miserably
this.physics.add.overlap(bird, pipes, (bird, object) => {
    if (object.getData('isScoreTrigger')) {
        score++; // Never executed!
    }
});

The symptoms:

Game loaded perfectly ✅
Bird physics worked ✅
Pipes generated correctly ✅
Score remained stubbornly at 0 ❌

The Investigation 🔍

Through extensive console logging, I discovered:

Overlap detection wasn't firing for invisible score triggers
Mixed object types in physics groups caused conflicts
Phaser's collision system was more complex than expected

// Debug logs revealed the truth:
console.log('Bird position:', birdX, birdY);        // ✅ Working
console.log('Score trigger created:', triggerX);    // ✅ Working  
console.log('Overlap detected:', object);           // ❌ Never appeared!

The Breakthrough: Manual Position Tracking 💡

Instead of fighting with Phaser's physics system, I implemented a custom scoring algorithm:

private checkScoreManually(): void {
    const birdX = 50; // Bird stays at fixed X position

    this.scoreTriggers.forEach(trigger => {
        // Pipes move left: X(t) = X₀ + velocity × deltaTime
        trigger.x += GameConfig.pipes.speed * deltaTime; // -200 px/s

        // Score when pipe passes bird (left movement)
        if (!trigger.scored && trigger.x <= birdX && trigger.x > birdX - 50) {
            trigger.scored = true;
            this.passedPipes++;
            this.scene.events.emit('score-updated', this.passedPipes);
        }
    });
}

The key insight: In Flappy Bird, the bird doesn't move horizontally - the pipes move toward the bird! 🤯

🎯 Technical Highlights

1. Smart Asset Management

// Automated asset copying during build
const copyAssets = () => {
    copyDir('./src/assets', './dist/src/assets');
    console.log('Assets copied successfully!');
};

2. Persistent High Score System

// Simple but effective localStorage implementation
const highScore = localStorage.getItem('flappyHighScore') || 0;
if (currentScore > highScore) {
    localStorage.setItem('flappyHighScore', String(currentScore));
    showNewRecordAnimation(); // ✨ Visual feedback
}

3. Performance Optimizations

Object pooling for pipes
Manual cleanup of off-screen objects
Efficient collision detection only where needed
Optimized sprite animations

🏆 The Final Result

After solving the scoring system puzzle, everything clicked into place:

Game Features:

✅ Smooth 60fps gameplay
✅ Accurate collision detection
✅ Persistent high scores
✅ Sound effects and animations
✅ Responsive controls (mouse + keyboard)
✅ Mobile-friendly design

🎓 Lessons Learned

1. Sometimes Simple Solutions Win

Complex framework features aren't always the answer. My manual position tracking turned out to be more reliable than Phaser's built-in collision system.

2. Debug Logging is Your Best Friend

console.log('🎯 Manual score detection! Pipe passed bird at X:', triggerX);
console.log('✅ New score:', this.passedPipes);

Those emoji-filled logs made debugging actually enjoyable!

3. Understanding Game Mechanics Matters

I initially misunderstood how Flappy Bird works. The bird doesn't move horizontally - this insight was crucial for fixing the scoring system.

4. TypeScript + Game Development = ❤️

Type safety caught numerous bugs before runtime and made refactoring much safer.

🔧 The Architecture That Worked

graph TB
    A[GameScene] --> B[Bird]
    A --> C[PipeManager]  
    A --> D[Background]
    C --> E[Manual Score Detection]
    B --> F[Physics & Animation]
    A --> G[Collision System]
    H[GameConfig] --> A

Detailed Class Diagram

Key Components:

GameScene: Orchestrates everything
Bird: Physics-based player character
PipeManager: Obstacle generation + custom scoring
Background: Scrolling environment
GameConfig: Centralized configuration

🚀 Try It Yourself!

Want to build your own version? Here's the quick start:

# Clone and setup
git clone <your-repo>
cd flappy-bird-game
npm install

# Build and run
npm run build
npm run serve

# Open http://localhost:8080

Pro tips for aspiring game developers:

Start with a simple game loop
Add one feature at a time
Debug with extensive logging
Don't be afraid to try different approaches
Test frequently on different devices

🎮 What's Next?

The game is fully playable, but there's always room for improvement:

📱 Mobile touch controls
🎨 Particle effects for enhanced visuals
🏆 Online leaderboards
🎵 Background music
🔧 Level editor

💭 Final Thoughts

Building Flappy Bird taught me that game development is as much about problem-solving as it is about coding. The scoring system bug that initially frustrated me became the most educational part of the entire project.

The real victory wasn't just creating a working game - it was learning to debug systematically, think creatively about solutions, and persist through challenging problems.

Whether you're a seasoned developer or just starting out, I encourage you to try building a simple game. You'll be surprised by how much you learn about programming, problem-solving, and the satisfaction of creating something interactive and fun!

🔗 Resources & Links

🎮 Play the Game
💻 Source Code
📚 AmazonQ CLI Docs
✨ AmazonQ CLI Challenges and T-shirts
📚 Phaser 3 Documentation
🎯 TypeScript Handbook

What's your experience with game development? Have you faced similar debugging challenges? Share your stories in the comments below! 👇

Happy coding, and may your birds always flap smoothly! 🐦✨

Tags: #AmazonQCLI #gamedev #typescript #phaser #javascript #webdev #debugging #flappybird #html5games

Build a Python Bot to Automate Your Expense Tracking with Discord and Google Sheets [Part1]

Phạm Tiến Thuận Phát — Sun, 08 Jun 2025 12:48:25 +0000

Source Code
LinkedIn
Tired of manually entering every single coffee purchase or subscription fee into a clunky spreadsheet? Me too. Manual expense tracking is tedious and prone to errors. What if you could just send a message to a personal bot and have everything logged, categorized, and visualized automatically?

In this step-by-step guide, we'll build exactly that. We'll create a personal Discord bot that listens for your expense messages, processes them, and pushes the data to a Google Sheet. To top it off, we'll build an interactive dashboard right within Google Sheets to see where your money is going.

The results image to easier visualization our goal:

🏷️ All WE NEED IS OPEN OUR PHONE AND CHAT WITH BOT

Here’s a sneak peek of the final result:

The Bot in Action:

The Interactive Dashboard:

Ready to build your own financial assistant? Let's dive in.

The Architecture: How It Works
Before we write any code, let's understand the flow of data. Our system has a simple but effective architecture:
Architecture_Diagram

You send a message, the bot picks it up, and the Google Sheet acts as both our database and our business intelligence tool.

Part 1: Setting Up the Foundations

This part involves configuring Discord and Google Cloud. It's a one-time setup that gives our bot the permissions it needs.

Step 1: The Discord Bot
First, we need to create a bot user in Discord.

1. Create an Application: Go to the Discord Developer Portal, click "New Application," and give it a name.

2. Create a Bot: Navigate to the "Bot" tab and click "Add Bot."

3. Enable Intents: This is crucial. You must enable the MESSAGE CONTENT INTENT. This allows your bot to read the content of messages.

4. Get Your Token: On the same "Bot" tab, click "Reset Token" to get your secret bot token. Copy it and save it somewhere safe.

5. Invite the Bot: Go to the "OAuth2" -> "URL Generator" tab. Select the bot scope, and then grant it Send Messages and Read Message History permissions. Copy the generated URL and paste it into your browser to invite the bot to your server.

Step 2: The Google Sheets "Database"
Next, we'll set up the Google Sheets API so our Python script can write data to it.

1. Create a Google Cloud Project: Go to the Google Cloud Console, create a new project, and give it a name.

2. Enable APIs: In your project, search for and enable two APIs: Google Drive API and Google Sheets API.

3. Create a Service Account: In "APIs & Services" -> "Credentials," create a new Service account. Give it a name and grant it the Editor role.

4. Generate a JSON Key: After creating the service account, go to its "Keys" tab, add a new key, select JSON, and create it. A credentials.json file will be downloaded. Place this file in your project folder.

5. Share Your Sheet: Create a new Google Sheet. Open the credentials.json file, copy the client_email value, and share your Google Sheet with this email address, giving it Editor access.

Part 2: The Brain - The Python Code

Now for the fun part. Here is the complete Python script for our bot. Save it as main.py.

import asyncio
import sys
import discord
import gspread
from oauth2client.service_account import ServiceAccountCredentials
import re
from datetime import datetime
import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv() 

# --- Bot Setup ---
# This code block fixes an EventLoop issue on Windows
if sys.platform == 'win32':
    asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())

# --- Configuration ---
DISCORD_TOKEN = os.getenv('DISCORD_TOKEN')
GOOGLE_SHEET_NAME = os.getenv('GOOGLE_SHEET_NAME')
ALLOWED_CHANNEL = os.getenv('ALLOWED_CHANNEL')

# Expense categories dictionary
CATEGORIES = {
    'Food & Drink': ['ăn', 'uống', 'cà phê', 'cf', 'nhà hàng', 'quán', 'trà sữa', 'bữa trưa', 'bữa tối'],
    'Transportation': ['xăng', 'grab', 'be', 'bus', 'taxi', 'vé xe', 'gửi xe'],
    'Utilities': ['điện', 'nước', 'internet', 'net', 'thuê nhà', '4G'],
    'Shopping': ['quần áo', 'giày', 'mỹ phẩm', 'sách', 'mua sắm', 'shopee', 'lazada'],
    'Entertainment': ['xem phim', 'game', 'du lịch', 'concert'],
    'Self-development': ['thi certification', 'khóa học', 'English', 'cert', 'IELTS', 'gym'],
    'IT-Industry': ['GPT', 'Cursor', 'AWS', 'AI'],
    'Networking': ['Mời nước', 'mời cơm trưa', 'network']
}

# --- Core Logic Functions ---
def get_gsheet_client():
    """Authorizes the gspread client and returns it."""
    scope = ["https://spreadsheets.google.com/feeds", 'https://www.googleapis.com/auth/spreadsheets',
             "https://www.googleapis.com/auth/drive.file", "https://www.googleapis.com/auth/drive"]
    creds = ServiceAccountCredentials.from_json_keyfile_name("credentials.json", scope)
    client = gspread.authorize(creds)
    return client

def parse_message(text):
    """
    Parses a message to extract description and amount.
    Handles 'k' suffix for thousands (e.g., 10k -> 10000).
    """
    match = re.search(r'(.*):\s*([\d.,]+)\s*([kK]?)', text.strip())
    if match:
        description = match.group(1).strip()
        amount_str = match.group(2).replace('.', '').replace(',', '')
        suffix = match.group(3).lower()
        try:
            amount = float(amount_str)
            if suffix == 'k':
                amount *= 1000
            return description, int(amount)
        except ValueError:
            return None, None
    return None, None

def categorize_expense(description):
    """Automatically categorizes an expense based on keywords."""
    description_lower = description.lower()
    for category, keywords in CATEGORIES.items():
        for keyword in keywords:
            if keyword.lower() in description_lower:
                return category
    return 'Other'

# --- Discord Bot Events ---
gsheet_client = get_gsheet_client()
worksheet = gsheet_client.open(GOOGLE_SHEET_NAME).sheet1

intents = discord.Intents.default()
intents.message_content = True
client = discord.Client(intents=intents)

@client.event
async def on_ready():
    """Called when the bot successfully connects."""
    print(f'Bot has logged in as {client.user}')
    print('Bot is ready!')

@client.event
async def on_message(message):
    """Called for every new message."""
    if message.author == client.user: return
    if message.channel.name != ALLOWED_CHANNEL: return

    description, amount = parse_message(message.content)

    if description and amount:
        category = categorize_expense(description)
        now = datetime.now()
        date_today = now.strftime('%d/%m/%Y')
        time_now = now.strftime('%H:%M:%S')
        new_row = [date_today, time_now, category, description, amount]

        try:
            worksheet.append_row(new_row)
            await message.channel.send(
                f'✅ **Successfully Logged!**\n\n'
                f'📅 **Date:** {date_today}\n'
                f'⏰ **Time:** {time_now}\n'
                f'🏷️ **Category:** {category}\n'
                f'📝 **Item:** {description}\n'
                f'💰 **Amount:** {amount:,} VND'
            )
        except Exception as e:
            print(f"Error writing to Google Sheet: {e}")
            await message.channel.send('Sorry, there was an error saving to Google Sheets.')

# --- Main function to run the bot ---
if __name__ == '__main__':
    # Setup environment variables in a .env file
    # DISCORD_TOKEN=...
    # GOOGLE_SHEET_NAME=...
    # ALLOWED_CHANNEL=...
    client.run(DISCORD_TOKEN)

Part 3: The Interactive Dashboard in Google Sheets

This is where we turn our raw data into valuable insights without writing any more code.

1. Create a "Month" Helper Column: In your data sheet (WalletManagement), go to the next empty column (e.g., F1), title it "Month," and paste this formula into cell F2. It will automatically populate the month for every entry.

=ARRAYFORMULA(IF(A2:A<>"", IFERROR(TEXT(A2:A, "MM/YYYY")), ""))

Note: Depending on your region, you may need to replace the comma , with a semicolon ;.

2. Create a Pivot Table: In a new sheet (call it Dashboard), go to Insert -> Pivot table. Use your WalletManagement sheet as the data source.

Set Rows to Hạng mục (Category).
Set Values to Số tiền (Amount), summarized by SUM.

3. Add a Slicer: This is our "remote control." Go to Data -> Add a slicer. In the slicer settings, choose the "Month" column as your filter. Now you can click the slicer and select any month to filter your report!

4. Add the Pie Chart: Select the data in your Pivot Table (the categories and their totals). Go to Insert -> Chart and choose a Pie Chart. It will automatically link to the pivot table and update whenever you use the slicer.

Conclusion and Next Steps

And there you have it! A fully automated expense tracker tailored to your needs. You've connected a Discord bot to Google's powerful spreadsheet and visualization tools, creating a system that's both practical and fun.

From here, the possibilities are endless:

Deploy the Bot: Deploy the Python script to a free cloud service like Render or a Raspberry Pi so it runs 24/7.
Add More Commands: Create commands like !summary or !last5 to get insights directly within Discord.
Deeper Analysis: Use more advanced Google Sheets functions or connect your sheet to Google Looker Studio for even more powerful BI dashboards.
Happy coding, and may your budgets be ever in your favor!

Avoiding Common Pitfalls: Deploying Node.js Backends to AWS Lambda with Docker & Serverless on macOS

Phạm Tiến Thuận Phát — Fri, 09 May 2025 06:13:07 +0000

Avoiding Common Pitfalls: Deploying Node.js Backends to AWS Lambda with Docker & Serverless on macOS

Deploying a Node.js (NestJS) backend to AWS Lambda using Docker and the Serverless Framework can be a smooth experience—if you know what to watch out for. On macOS, especially with Apple Silicon, there are unique challenges that can trip up even experienced developers. Here's a practical guide to the most common pitfalls and how to avoid them, based on real-world troubleshooting.

1. Global Package Permissions: Never Use `sudo` with Serverless

Pitfall: Installing Serverless Framework globally with sudo (sudo npm i -g serverless) can cause permission errors, making it impossible to update or remove packages later.

Solution:

Always install Serverless globally without sudo:

  npm install -g serverless

Or use a Node version manager (like nvm) for even more control.

2. Base Image Confusion: Use the AWS Lambda Base Image

Pitfall: Using a standard Node.js image (e.g., node:20-alpine) instead of the AWS Lambda base image leads to entrypoint errors like:

Error: fork/exec /usr/local/bin/docker-entrypoint.sh: exec format error

Solution:

Always use the AWS Lambda base image:

  FROM public.ecr.aws/lambda/nodejs:20
  ...
  CMD [ "dist/lambda.handler" ]

This ensures Lambda can find and invoke your handler correctly.

3. Handler Syntax: CMD Must Match Lambda's Expectations

Pitfall: Using the wrong CMD in your Dockerfile, such as CMD ["node", "dist/lambda.js"], will break Lambda's invocation process.

Solution:

Use the format CMD [ "<file>.<exported function>" ] (e.g., CMD [ "dist/lambda.handler" ]).
Make sure your built JS file exports the handler as exports.handler.

4. Architecture Mismatches: Build for `linux/amd64`

Pitfall: On Apple Silicon (M1/M2), Docker may build images for arm64 by default, but AWS Lambda requires amd64 (x86_64). This leads to manifest errors or runtime failures.

Solution:

Always build with:

  docker buildx build --platform linux/amd64 -t lambda-img:latest --load .

Check your image manifest to ensure only amd64 is present.

5. CORS Configuration: Place It in the Right Spot

Pitfall: Defining CORS under each function event in serverless.yml (as you might with REST API) will cause configuration errors with HTTP API.

Solution:

Place CORS configuration under provider.httpApi:

  provider:
    httpApi:
      cors:
        allowedOrigins:
          - "*"
        allowedHeaders:
          - "*"
        allowedMethods:
          - "*"

6. Manifest Bloat: Clean Up Before Rebuilding

Pitfall: Docker image manifests may accumulate unwanted architectures (unknown, arm64) if you don't clean up before rebuilding, leading to Lambda deployment failures.

Solution:

Regularly prune Docker images and cache:

  docker system prune -af
  docker rmi $(docker images -q) || true

7. Debugging: Always Check CloudWatch Logs

Pitfall: Many Lambda errors (handler not found, runtime errors) are only visible in CloudWatch logs.

Solution:

After each deployment, check CloudWatch logs for your Lambda function to quickly identify and resolve issues.

Final Thoughts

Deploying with Docker and Serverless on macOS is powerful, but requires attention to detail. By following these best practices and learning from common mistakes, you'll save hours of frustration and ensure your backend runs smoothly on AWS Lambda.

Happy deploying!

Troubleshoot: Update Boto3 'BedrockRuntime' object has no attribute 'start_async_invoke' 🚀

Phạm Tiến Thuận Phát — Mon, 10 Mar 2025 15:28:12 +0000

Today, I tried using a new feature from AWS—Amazon Nova Model—to generate videos. However, when integrating it with AWS Lambda using Boto3 SDK, I encountered an error related to the method start_async_invoke. The error message stated that the object has no attribute "start_async_invoke", and I wasn’t sure why exactly this happened.

After some investigation, I suspected that when AWS releases a new feature, it sometimes takes a little time for Lambda runtime environments to update accordingly. As a result, I ran into this issue because my Lambda function was using an outdated version of Boto3.

The solution? Upgrading the Boto3 layer to the latest version! After applying the update, I was able to use the method successfully to generate videos using a provided prompt.

If you're facing the same issue, here’s the exact process you can follow to update your Boto3 layer in AWS Lambda 😊:

Step-by-Step Guide to Upgrading Boto3 in AWS Lambda

1. Open AWS Cloud Shell on the AWS Management Console

2. Create a library directory
Run the following command to create a new directory for your custom Boto3 layer:

LIB_DIR=boto3-mylayer/python
mkdir -p $LIB_DIR

3. Install the latest Boto3 version in the library directory

pip3 install boto3 -t $LIB_DIR

4. Package the dependencies into a ZIP file
Navigate into the boto3-mylayer directory and create a ZIP file containing the updated Boto3 package:

cd boto3-mylayer
zip -r /tmp/boto3-mylayer.zip .

5. Publish the updated layer to AWS Lambda
Run this command to publish the new Lambda layer:

aws lambda publish-layer-version --layer-name boto3-mylayer --zip-file fileb:///tmp/boto3-mylayer.zip

Once this step is completed, AWS will return a confirmation dictionary that includes the ARN (Amazon Resource Name) for the new layer like in the below image. You’ll need this ARN for the final step.

6. Update your Lambda function to use the new Boto3 layer
Replace MY_FUNCTION with your actual Lambda function name and LAYER_ARN with the ARN you obtained in the previous step:

aws lambda update-function-configuration --function-name MY_FUNCTION --layers LAYER_ARN

Example (Replacing MY_FUNCTION & LAYER_ARN):

aws lambda update-function-configuration --function-name genVideoAI --layers arn:aws:lambda:us-east-1:123456789:layer:boto3-mylayer:1

7. Test Your Lambda Function
Now, go back to your AWS Lambda function and test it out. If everything is set up correctly, your function should work without the previous error!

That’s it! This method worked for me, and I hope it works for you as well. Let me know in the comments if this helped or if you faced any issues. Thanks for reading, and happy coding! 🚀

Fact: This is a video model Amazon Nova generated for me after troubleshoot method "start_async_invoke"

Connect me on LinkedIn:https://www.linkedin.com/in/tienthuanphat/
Repo Github: https://github.com/delee03/genVideo_NovaReels

DeepSeek R1 vs. OpenAI o1 vs. Anthropic Claude: AI Coding Battle of 2025 – Who Reigns Supreme? 🚀

Phạm Tiến Thuận Phát — Thu, 06 Feb 2025 15:23:36 +0000

Introduction: The AI Showdown of 2025

**
In the rapidly evolving landscape of artificial intelligence (AI) in 2025, developers are presented with a variety of models that excel in logical reasoning and coding capabilities. The recent introduction of DeepSeek’s R1 model has intensified discussions about the comparative strengths of AI models from industry leaders such as OpenAI and Anthropic.

Which model is the ultimate coding assistant for developers? Let’s break it down.

The Contenders: A Quick Overview
🔥 DeepSeek R1: The New Disruptor
DeepSeek, a Chinese AI company, has developed R1, which emphasizes logical inference, mathematical reasoning, and real-time problem-solving. Notably, DeepSeek claims that R1 surpasses OpenAI’s o1 model in benchmarks like the American Invitational Mathematics Examination (AIME) and MATH.

🧠 OpenAI o1: The Reasoning Giant
OpenAI’s latest model, o1, represents a major shift towards advanced reasoning capabilities, moving beyond statistical predictions to true logical thinking. This makes it an invaluable tool for developers looking for intelligent coding assistance.

🛡️ Anthropic’s Claude Series: The Safety-Conscious AI
Anthropic has developed the Claude series, focusing on alignment, safety, and responsible AI behavior. Claude models are designed to minimize hallucinations and biased outputs, ensuring safe and ethical AI-assisted development.

**Comparison Table: DeepSeek R1 vs. OpenAI o1 for easily illustration

Conclusion: Which AI Model Should You Use?
Each model brings unique strengths to the table, and the best choice depends on your specific needs:

If you need raw logic power, mathematical reasoning, and a cost-effective AI, DeepSeek R1 is a game-changer. 🚀

If you prefer a well-rounded, reasoning-driven AI for general coding tasks, OpenAI o1 is your best bet. 🔥

If you prioritize safety, reliability, and ethical AI use, then Anthropic Claude is the way to go. 🛡️

2025 is shaping up to be the most competitive year for AI coding assistants. Which model will dominate? Only time will tell! ⏳

💡 What do you think? Which AI model do you prefer for coding tasks? Drop your thoughts in the comments! 🚀