Forem: Anandu

Building a Minimal Developer Portfolio with Google Cloud Run

Anandu — Mon, 02 Feb 2026 07:59:38 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I’m a full-stack developer, but most of the time I find myself leaning more towards the front end, especially UI, UX, and the overall feel of a product.

I’ve built portfolios before, but I tend to overthink them and never feel satisfied. This time, I wanted to stop chasing “perfect” and just build something simple and real.

View full site

Portfolio

How I Built It

The idea

Before starting, I was clear about one thing — I didn’t want anything fancy. I just wanted a simple, clean portfolio.

Something that shows who I am, what I build, and stays out of the way.

Tech Stack

I went with tools I’m already comfortable with:

Next.js (App Router)
TypeScript
Tailwind CSS
Framer Motion
Docker + Google Cloud Run

Using Google AI (Antigravity)

I used Antigravity throughout the process, mostly to think through ideas and get unstuck when I was unsure.

I didn’t use it to generate the whole project, but more for things like:

Trying out layout ideas
Improving wording
Breaking features into smaller steps
Getting quick feedback on UX decisions

It felt a bit like talking to someone while building, helpful for clarity.

The messy part (real experience)

The hardest part wasn’t building the UI.

It was deploying.

I had never used Google Cloud Run before, and I honestly underestimated how many small things could go wrong:

Docker not running
Wrong ports
Missing permissions
Build service accounts failing silently
Artifact Registry access errors

At one point I spent more time fixing IAM roles than writing code.

But that struggle was actually valuable. I now understand:

How container-based deployment works
How Cloud Build, Artifact Registry, and Cloud Run fit together
And why production setups are rarely “one click”

What I'm Most Proud Of

The portfolio feels simple and calm, not overwhelming.
Small micro-interactions that add life without being distracting.
The fact that it’s properly deployed on Google Cloud, not just hosted on a static platform.
And most importantly: I actually finished it instead of endlessly tweaking.

Thanks to DEV and Google AI for the challenge.

📬 From Inbox to Impact: An AI-Powered Wall of Love

Anandu — Mon, 09 Jun 2025 06:58:43 +0000

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

What I Built

For this challenge, I built Wall of Love — an AI-powered testimonial showcase system that automatically receives customer feedback through email, analyzes it using AI, and displays curated testimonials on a public-facing website.

In simple terms:

👉 You send an email.

🤖 AI checks if it’s genuine.

🌟 If yes, it appears live on the site instantly.

This project is built on Postmark’s Inbound Email Streaming and showcases how easy and powerful it is to build automated experiences from something as old-school as email.

I wanted to take the traditional "wall of love" page to the next level — make it smart, real-time, and effortless to manage.

Demo

🔗 Live App

💌 Send a test testimonial to: testimonials@anandu.dev

📸 Here’s how it looks:

You email → Postmark catches it → AI filters it → Supabase stores it → React displays it

Code Repository

💻 GitHub: AnanduApillAi/postmark-challenge

⚙️ Tech Stack

Next.js 14 (App Router + Edge Functions)
Postmark Inbound Webhooks (email parsing + real-time delivery)
OpenAI GPT-4o-mini (AI filtering + sentiment analysis)
Supabase (database + row-level security)
Tailwind CSS (UI)
Vercel (hosting)

🧠 The Smart Workflow

Here’s what happens under the hood:

Email Reception: Customer sends an email to testimonials@anandu.dev.
Postmark Inbound: Instantly receives it and calls my webhook with full data.
AI Processing:
- Removes greetings, signatures, etc.
- Scores sentiment (-100 to +100)
- Filters spam and low-confidence entries
Storage: Only high-quality testimonials are stored in Supabase.
Live Display: A React-based frontend shows approved content in real-time.

🤖 Why Use AI?

Because not every email is a testimonial.

Some people say “hi”, others try to sell you things. AI helps clean the clutter — it only shows what truly matters: heartfelt feedback.

I’ve added confidence scoring, sentiment filtering, spam detection, and manual review flags. And yes — GPT-4o-mini is doing all of that in milliseconds.

💡 Why Postmark?

Before this project, I had never used Postmark. After this project, I’m not going back.

Setup was seamless.
Delivery is instant.
The inbound webhook UI is intuitive.
Email parsing "just works" — no MIME headaches, no flaky payloads.

Honestly, Postmark feels like email done right. I wish I’d discovered it earlier.

✨ What I Loved

Watching a testimonial email show up instantly on the frontend. That’s a dopamine hit.
Building an AI filter that works. Not perfect, but pretty reliable.
Combining old (email) and new (LLMs) to create something delightfully automatic.

🧠 Learnings & Takeaways

Postmark inbound + webhooks = endless automation potential.
GPT is amazing at extracting meaning, but you still need guardrails.
A little design polish.

💭 Final Thoughts

Sometimes, the best UX is no UX — just let users send a plain email, and you handle the rest. That's the magic I tried to build here.

If you're reading this, send me a note at testimonials@anandu.dev. Let’s see how smart the system really is :)

Thanks to the Postmark team and the dev.to community for this challenge — I had a blast building this.

🔗 Links

🌐 Live Demo: wall-of-love.anandu.dev
💻 GitHub Repo: github.com/AnanduApillAi/postmark-challenge
📖 Postmark Docs: Inbound Email Webhooks

Built with ❤️ by @AnanduApillAi

Email to testimonial. Just like magic. ✨

KendoReact Form Builder – Build Smarter Forms

Anandu — Sun, 23 Mar 2025 13:46:03 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built a Form Builder using KendoReact that allows users to create custom forms effortlessly through a drag-and-drop interface. The project integrates AI assistance to generate and customize forms based on user input, making the form-building process more intuitive and efficient.

The Form Builder includes the following key features:
✅ Drag and Drop Interface – Easily add fields like text inputs, dropdowns, checkboxes, and buttons.
✅ AI Chatbox – The AI helps users generate forms by asking questions and suggesting the best fields based on the form type.
✅ Code Export – Once the form is built, users can export the code directly for integration into their projects.
✅ Save and Edit – Users can save the form, modify it later, and even generate multiple versions with AI assistance.

Demo

view here

view repository

KendoReact Experience

This project was built entirely using KendoReact components, making the UI smooth, responsive, and easy to customize. The components used include:
Button
Dialog
Input
TextArea
Checkbox
RadioButton
DropDownList
Notification
TabStrip
Fade

AIm to Impress

The standout feature of this project is the AI-powered form generation:

The AI dynamically adapts to the type of form you want to create by asking relevant questions.
It intelligently suggests suitable input types (e.g., text fields, dropdowns, checkboxes) based on your responses.
The project also includes a form restoration feature, allowing you to revert to previously created versions, making it easy to undo changes or restore a preferred form state.

Thank You.

Dark Mode and Night Mode with Tailwind CSS and CSS Variables

Anandu — Thu, 26 Dec 2024 18:07:03 +0000

Dark mode and night mode are must-haves for modern websites. They improve accessibility and give users the flexibility to choose their preferred look. Let’s dive into how you can build this feature using Tailwind CSS and CSS variables.

Why Tailwind CSS and CSS Variables Work So Well

CSS Variables: Simplify managing colors for different themes.
Parent Class: Toggle themes by switching a single parent class.
JavaScript Integration: Dynamically update themes with minimal effort.

Setting Up Theme Colors with CSS Variables

Start by defining the colors for your themes. These CSS variables will be inside a parent class to make switching themes easy.

/* Light Theme (Default) */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* Dark Theme */
.theme-dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

/* Solarized Theme */
.theme-solarized {
  --bg-color: #002b36;
  --text-color: #839496;
}

Using CSS Variables in Tailwind Classes

Tailwind makes it easy to use CSS variables for styling.

<div class="min-h-screen flex flex-col items-center justify-center bg-[var(--bg-color)] text-[var(--text-color)]">
  <h1 class="text-4xl font-bold mb-6">Dark Mode Demo</h1>
  <button class="px-4 py-2 rounded bg-[var(--text-color)] text-[var(--bg-color)] font-semibold">
    Click Me
  </button>
  <select id="theme-select" class="mt-6 p-2 border border-gray-300 rounded">
    <option value="theme-light">Light Theme</option>
    <option value="theme-dark">Dark Theme</option>
    <option value="theme-solarized">Solarized Theme</option>
  </select>
</div>

Adding JavaScript for Dynamic Theme Switching

Here’s the JavaScript to handle theme changes dynamically:

const themeSelect = document.getElementById("theme-select");
const rootElement = document.documentElement;

// Listen for dropdown changes
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;

  // Remove all theme classes
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");

  // Add the selected theme class
  rootElement.classList.add(selectedTheme);
});

// Set default theme on load
window.addEventListener("DOMContentLoaded", () => {
  rootElement.classList.add("theme-light");
});

Real-Time Theme Switching in Action

When users pick a theme from the dropdown, the background and text colors change instantly. This dynamic update makes the experience seamless and interactive.

Why This Approach is Awesome

Scalability: Add new themes by defining additional CSS variables.
Clean Separation: CSS handles theming; JavaScript manages logic.
Performance: CSS variables make updates smooth and efficient.

Save Theme Preferences with LocalStorage

Take it up a notch by saving the selected theme so it persists across sessions.

// Save the theme
themeSelect.addEventListener("change", (event) => {
  const selectedTheme = event.target.value;
  rootElement.classList.remove("theme-light", "theme-dark", "theme-solarized");
  rootElement.classList.add(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
});

// Load the saved theme
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme") || "theme-light";
  rootElement.classList.add(savedTheme);
});

Extra Tips for Dark Mode and Night Mode

More Themes: Add high-contrast or custom user-defined themes.
Transitions: Use CSS transitions for smooth background and text color changes.
Accessibility: Make sure your theme switcher works well with keyboards and screen readers.

With Tailwind CSS and CSS variables, creating a dynamic dark mode or night mode is straightforward and efficient. Try it out and see how it transforms your website’s user experience!