Building in Public: From Frontend Polish to Server-Level Hardening

Modern software engineering doesn't stop when React components build cleanly. Real engineering lives at the crossroads of high-converting user experience, autonomous distribution pipelines, and an unyielding Linux production infrastructure.

Today in the studio, we pushed updates across our multi-repository architecture: expanding autonomous distribution tools in andresmorales-nextjs and executing surgical performance optimizations on the que-nivel-maribel ticketing engine.

---

1. Today's Challenges: Cost-Effective Automation and Critical Performance

We tackled three core engineering problems:

1. Unattended multichannel publishing: Distributing engineering devlogs to social channels without paying prohibitive API fees or relying on manual steps.
2. Mobile ticketing UX & performance: Optimizing oversized hero assets that hurt LCP metrics, while eliminating involuntary viewport zoom on iOS inputs.
3. Linux production hardening: Enforcing an ultra-lean VPS security baseline with HTTP/3, intrusion mitigation, and encrypted database vaulting.

---

2. Architectural Highlights & Automation

Playwright Headless Automation & Direct Publishing

We implemented a headless Playwright runner capable of scheduling posts reliably without expensive third-party wrappers, alongside a direct LinkedIn UGC v2 publisher with token refresh. Our devlog engine now includes multi-repository scanning and interactive Telegram deployment webhooks.

High-Performance Frontend

Inside the ticketing app (que-nivel-maribel):

• iOS auto-zoom fix: Standardized input font sizing to 16px and applied viewportFit=cover.
• Next.js responsive image sizing: Defined explicit sizes and downscaled intrinsic assets, cutting over 212 KiB from critical assets.
• Dynamic contrast switching: Implemented a scroll-aware navigation bar that adapts both backdrop and brand assets to maintain AAA contrast ratios.

---

3. Server Hardening & DevOps in Production

Reliability is rooted in simplicity and strict defaults:

• UFW Firewall: Default DROP policy on incoming connections, strictly exposing ports 22, 80, and 443 (TCP & UDP for QUIC).
• Fail2ban Jails: Real-time brute force protection on sshd and authentication endpoints.
• Caddy Reverse Proxy: Native HTTP/3 (QUIC) and automated zero-touch TLS 1.3 certificates.
• Encrypted Telegram Vault Backups: Automated cron snapshots encrypted via OpenSSL and streamed directly into a private Telegram storage vault.

# Production firewall verification
sudo ufw status verbose
# Status: active
# Logging: on (low)
# Default: deny (incoming), allow (outgoing), disabled (routed)
# To                         Action      From
# --                         ------      ----
# 22/tcp                     ALLOW IN    Anywhere
# 80/tcp                     ALLOW IN    Anywhere
# 443/tcp                    ALLOW IN    Anywhere
# 443/udp (QUIC HTTP/3)      ALLOW IN    Anywhere

Automated encrypted database replication to Telegram:

#!/usr/bin/env bash
set -euo pipefail

TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
BACKUP_FILE="/var/backups/db_${TIMESTAMP}.sql.gz.enc"

# Dump, compress, and AES-256 encrypt
docker exec -t postgres_prod pg_dump -U "$DB_USER" "$DB_NAME" \
  | gzip -9 \
  | openssl enc -aes-256-cbc -salt -pbkdf2 -pass env:BACKUP_PASSPHRASE -out "$BACKUP_FILE"

# Stream directly into private Telegram vault
curl -s -F chat_id="$TELEGRAM_VAULT_CHAT_ID" \
     -F document=@"$BACKUP_FILE" \
     -F caption="📦 Production Snapshot Verified: ${TIMESTAMP}" \
     "https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendDocument"

rm -f "$BACKUP_FILE"

---

4. Key Takeaways

1. Headless automation solves API roadblocks: Pragmatic automation beats excessive recurring SaaS overhead.
2. Mobile UX lives in the details: Addressing subtle bugs like iOS input zoom protects checkout conversion rates.
3. Keep the host system clean: A properly configured Caddy + UFW stack provides rock-solid security without maintenance fatigue.

---

Ready to scale your architecture or automate manual bottlenecks? Book a 30-minute discovery call or test our interactive ROI tool.