I built the task manager I actually wanted, and it talks to itself over MCP

Luca Faggianelli — Mon, 31 Aug 2026 18:51:35 +0000

Built for the All Things Agentic Hackathon (Google Cloud x Devpost, August 2026)

I run two companies, I have a family I actually want to spend time with, and I keep starting more side projects than any reasonable person should. Every morning, the same thing happened: I'd open my task list and burn twenty minutes just deciding what to do — and a chunk of what was on there didn't need a human at all. It just needed doing.

I wanted to build this for a while, then All Things Agentic Hackathon arrived in my mailbox and I decided to do it, I built Today Do. Here's what it does and how it's put together.

What it does

Every morning it plans my day out of a backlog of everything I could be doing - using deadlines, the priorities I've said out loud (like "this month I'm head down on project X," "today I just want to take it easy"), and whatever mood I'm in. Tell it in the chat, and it replans around that.

You can also define recurring, multi-step pipelines — send the invoices to my clients every month, for instance — where each step is either for you or for the agent. A human step waits for you, just like a normal to-do. An AI step runs on its own, and depending on how dangerous it is, either goes fully autonomous or stops and waits for your approval before doing anything out of the system.

The AI isn't only there to execute. It helps shape the work too: composing the day from a sentence, cutting a task down when it's too big, looking into why you keep putting something off instead of just nagging you about it.

How I built it

Full-stack TypeScript. Hono API on Bun, React frontend with HeroUI components, Better Auth for sign-in. Genkit orchestrates everything AI-related, including the MCP connections, with Gemini 3.5 Flash as the default model — deliberately a light model: most of what the model does here is small, bounded work, and a bigger model doesn't help much.

It all runs on Google Cloud: Cloud Build turns a push into an image and deploys it to Cloud Run through the GitHub integration, and app secrets live in Secret Manager, exposed to the container as env vars. Data is stored in a libSQL (SQLite) database hosted on the very generous free plan of Turso. MCP connection tokens, API keys, and anything else sensitive are encrypted before they ever touch the database.

The part I'm actually proud of

Today Do talks MCP in both directions.

It connects out to external MCP servers — right now, Gmail — so a pipeline step can draft an email as part of an automated workflow. And it exposes itself as an MCP server, so any agent you already use can control it directly. I've been having long, genuinely useful conversations with Claude Code about redoing my bathroom — materials, sequencing, what blocks what — and at the end of it, one sentence: put this in Today Do. It called the same tools my own in-app chat uses, and the whole plan landed as a real, ordered task list.

That's the task manager I actually wanted. Not one more place to type things into — a place that whatever agent I'm already talking to can hand things off to.

Challenges I ran into

Wiring up the Gmail MCP server took longer than I expected, and not for a technical reason — I had to register for Google's developer program first, which wasn't obvious going in, and cost me a chunk of a day I hadn't budgeted for it.

I also ran into a real bug in Genkit itself, around JSON Schema conversion, and ended up filing an issue and working around it in my own code in the meantime. Small thing, but it's the kind of thing you only find by actually building things.

What I learned

Good design comes before good code, every time — and that's true even, maybe especially, when you're racing a hackathon deadline and every hour spent not-coding feels like a mistake. It isn't.

And: use your own project from day one. If I hadn't been planning my actual mornings with this thing while building it, I wouldn't have found half of what needed fixing — and I don't think anyone else should trust a tool the person building it doesn't trust with their own day.

What's next

Letting users choose which tools an MCP connection is allowed to expose, instead of a fixed list per server, and actually expanding the available servers
Moving secret storage from an encrypted database column to Google Cloud's key management service properly
A PWA with real mobile integration — share an email straight into Today Do, control it from Siri, get a push notification when something needs you

So... is this a problem you also have? The app's live — go poke at it... be gentle :).
Live app: https://today-do-968387508977.europe-west1.run.app

Interactive SVG + JS map

Luca Faggianelli — Wed, 25 Nov 2020 18:15:15 +0000

Now and then, on several web applications projects, I need to use maps to display data, sometimes it's a world map, sometimes a country map with regions and provinces, often I need a click-on-region event handler and I always need to display some data on the map as colors or numbers. You know what I'm talking about right? Not a Google Maps map, but a simple and plain map with country borders.

Of course there are libraries for this purpose, also free ones, but not so many and they're pretty heavy as they bring a lot of functionalities, whereas I just need a simple map, so I like to make my own map, also because it's fun 🙂. Let's make it!

Get started

The first step is to find a map in SVG format, I typically use simplemaps they have world and regional maps and they're free to use (check the license for details).

When I speak of regions I refer to geographical regions, that is any of country, region, province, state, area, etc.

Now we're ready to go, these are the features we're going to implement at the end of the article:

Load the SVG map and render it into the HTML page
Color the map regions based on supplied data
Attach mouse events listeners (for click and hover) to regions

So let's start with step 1 and part of 2:

Yeah so easy! I only used a tiny library for SVG manipulation called Svg.js, even if it's not mandatory, it makes life a bit easier.
In the codepen above we load the map SVG file content with the fetch() method and we render it into the HTML, then we manipulate the map adding labels and changing the colors just for demo purpose.

Please note that I'm selecting the map regions with draw.find('path') but if you use another map, the regions may be represented by <g> elements or may be inside nested into other elements.

OK let's make this thing a bit more useful, I found Belgian population data (2019) on Wikipedia and we're going to plot it on our map, plus we'll make it interactive!

Better? Now we have real data and each region's color represent its population, the colors are shades between green and white, whereas the most populated region (Antwerp province) has a mix of 100% of green and 0% of white, while the least populated (Luxembourg province) has more white than green: this is called a heatmap. As for the interaction, if you hover a region, you get a popup and the region color changes. The color effect is done with CSS to demonstrate that you can style an SVG element (and its children) with plain CSS.

This is pretty basic, but it's good starting point for creating a fully featured map.
I'm going to extend this demo with more features and I'm going to package it into an NPM library, so stay tuned!

Well now I'm curious, do you use maps and for what? Do you use them in apps you develop or in blog post or whatever? What library do you use?
Questions and feedbacks are highly appreciated!

Luca

DEV Community: Luca Faggianelli