Visit Chunkie at [todo.debuggingdan.com](https://chunkie.debuggingdan.com] and try for yourself. Watch this episode on youtube.
In this episode, I walk through my latest pet project, Chunky To Do, a personal task management system I’ve built on top of Notion. I share how I divide my projects into "chunks" and interleave tasks to better prioritize and manage them across various projects. I explain the challenges of integrating this with Notion and how I’ve tackled issues like task ordering, visual organization, and planning. While this app is a hobby project, I’ve made it accessible for anyone interested in using it for their own task management.
Welcome to episode 11 of the Debugging Dan podcast. What I'd like to do today is I'd like to highlight a pet project that I'm working on, which I don't really plan to release as a real full SaaS.
But that's the app that I'm building where I do my to-do's in. I keep track of other items for different projects and my way of working when aligning and stuff like that.
So to give a little bit of background, I make this graph and if you're listening to the podcast, I'll try to explain this as good as possible. So I have different projects running at the same time as a hobby. And what I try to do is I try to divide those projects into chunks. That's why the name Chunky To Do.
And a chunk could contain multiple tasks. And what I try to do, I try to interleave those different chunks from projects. I try to interleave them with each other. So I have four projects here in front of me. And for clarity, I color them green, pink, purple and yellow. And green is, for example, project A. And I create a list with that. So I start with the green chunk. And after that, I switch to the third project and I have a purple chunk. And after the purple chunk, I go back to the green project.
And that's how I do my planning. So I can create the To Do's per project. But this way I can interleave the different things that I have to do and prioritize by moving the chunks. So I'm moving the pink one as number four, then the yellow one. And every project is prioritized in order of chunks. But I don't do each project fully and then move on to the next one or move on to the next one because new To Do's keep popping up. So I interleave them.
And that's what I do with Chunky To Do. And I created a mechanism for that. I first created an app for that. That was too much of a hassle. Then I realized, hey, I started using Notion. And in Notion, I can also do this very easily by just tagging projects. And in Notion, you can reorder items pretty quickly. So the one that I wanted to do was always at the top. And then I would go one down and one down. And by filtering, I could see what I need to do for a specific project. So that worked pretty easy. But as time continued, I started doing more projects in parallel. And I also had some issues making a planning. So this is not really a planning. This is a task order. But I figured when I wanted to do something for the weekend, I would have difficulty really preparing something because I would just start at the top and do something and start doing tasks without really having a deadline. Stuff like that.
So that's why I figured I'd create something that also allows me to use this mechanism and do planning. But I don't want to create an entire database and move out of Notion. And luckily, Notion has an API. So I can build this on top of Notion. And I had built earlier on Notion because I built a blogging software that I'm using for myself where I create the blog posts in Notion. And I have software that builds the web page out of those pages in Notion. So the name of the project is Chunkie To Do. And it's the second item on the list for the accountability list. And I hope that by working on this and creating this, I'm able to organize myself better.
And of course, I also realized that I could have just created a list and just improved the visualization in Notion itself. By adding a due date. But I like programming and I figured I saw a programming challenge and I took it. So, yeah, it's not the most efficient way because I could have done it differently in less time. But I'm also learning new stuff and I enjoy doing it. And it's also a hobby next to my normal job. So I figured let's just do it. So I built it.
And this is already the Notion list that I've prepared. These are just some bogus to-do items that I added for this. And coincidentally, it's kind of the accountability list. I created some stuff from that.
And I need to pause here. So I needed to pause here for a second because I forgot to copy my API key for the Notion access to my clipboard because I'm going to show you how to set up this thing.
So the URL I created is todo.debuggingden.com. You create an API code token.
I'm not going to show you how to set up an integration with Notion. If you just Google it, you should be able to find it yourself. Okay, so I reused the token for the Debugging Dan blog. That's okay. I stored the API key and now it's asking me for the Notion database. So here, the ID of the database is in the URL. So let me just copy that. I'm copying it, but it doesn't work yet because I can show that as pretty easily. I need to share the page to the integration that I created. So here, I select the integration. I confirm that the API integration is allowed to access those pages. And then I should be able to test this. And it's able to fetch the records. I store the database in the integration.
And this is the page that is. And there's a small bug here. If you do the first integration thingy and press complete, then it doesn't work. But if I refresh the page, it's able to query all the things that I had. And I also created to-dos in there. So it's able to show me those. I can collapse, I can expand.
I can open the link to the Notion thing itself because editing here is pretty, what's it called, pretty restricted. You can complete it by checking the checkbox.
You can add a new to-do here and then it will add a new item to the to-do list. In Notion.
So it would really be stored. That's basically all you can do. You can refresh and you can complete.
Before I started recording this, I did some fixes to styling and colors, but I see here now that the complete and refresh buttons, the labels are not that visible. That might be something I need to revisit later. There's also, this is the white mode or the white mode. Yeah, so this is basically what the few they also had in Notion. So if you look at Notion, here you have the list. You can open it.
And the sorting of the list is based on the chunky cone with the number because Notion has a very powerful feature that you can drag and drop these records. I want to remove the sorting, but it was for an example and then it would be sorted. But that type of sorting is something you cannot query using the API. So you need to create a sort field and you cannot say sort field manual or something like that. You need to specify a column. So that's a PD.
So as a workaround, I create a column and if I add a new record here, for example, a demo thing, and I give it a five, then it ends up at the bottom, but I give it a three, then it ends up somewhere else. So and here I created that if you go back to the page, then the refresh item here goes and here you see the demo thing has been added. There is no to do's here and then do a demo, for example, and it's there. So this is the functionality that I had basically in Notion, but it's kind of represented differently. I can check this and it says all to do's are completed. I can choose to hide to do's, what it does by default, or I can choose to show them. But the planning stuff that I added to it was this.
So I can add a board and it creates a funky title, which I should be able to edit. Why am I not able to edit that? So that's the trouble with a live demo. I should be able to just click here, edit it and that's it. But somehow it's not working. I'll have a look at that. But over here in the podcast, you saw it first.
So this is the list and what I can do, I can choose here to create, to pick tasks from the lists of the first one, for example, it says record podcast episode 11, and there's a bunch of to do. I need to record a video. I need to edit the video. There are some sub items, clip to beginning and the end, enhance the audio, stuff like that. And I can just pick the first one and ideally I would name this weekend, for example, for my planned items to do for the weekend. But I can choose here add to and then the title of the board. So the prototype Paladins Pilgrimage. And now I have record video and I can choose to complete it here. It also completes on the list. I can also uncomplete it and I can figure oh wait for the accountability stuff also in the weekend I want to do. So that's the second to do item, update the accountability chart. I also want to do that in the weekend. So now I have tasks from two different projects in the same board and I can choose to set a schedule date, for example.
And so the weekend ends today, I guess. First up here. Yep.
So the weekend ends today, I guess, and I can set it to tonight. I pick a date and then it says it's due today at eight. Now I can also choose the clear date and based on that. So if I put time a little bit near, like so it's now at 10, something like that. I can select a date and as I near the end date, I can't really make it visible now because it's percentage wise and I just created it. But if the end date gets more near, the color changes to yellow. And when it's overdue, it turns to red, the background of the item. And what I can also do, I can pick a color for the background of the item itself and show it differently. So I can also do color coding for things. And for me, I hope this is going to help getting me more organized. So I can choose for the weekend, for the week. I can also add another board and add another one, but I can also take the edit video from the record podcast thingy. And then it takes the edit video, but also the two subtasks for clip the beginning and the end for adding the pre-card and the postcard to the video.
So yeah, and I've been working on this. I'm using the Bulma CSS library, which I use for all my projects. I am really familiar with that and it helps me create stuff. Because as you see, I'm not that good with colors. I didn't notice the refresh and the complete visibility issue. But I don't think, yeah, it's not there when you go to light mode, but not everybody uses light mode. I always use dark mode and the stack that I use, I use SvelteKit. And the thing is all the data is stored in LogoStore.
So your API key, your database ID, it's not stored somewhere in the backend. There is a backend running for this. And that was necessary to circumvent course issues with the Notion SDK. So I'm loading the Notion SDK in the browser, but the Notion API has no CORS header, so you're not able to query data directly from API.notion.so. So what I did in SvelteKit, I created one backend route,
slash API, slash V1, which is similar to what the Notion API has. And I told the Notion SDK, which they very lucky that they have that option, is to define a different endpoint URL.
I just define the input URL to this site. And in the endpoint for in SvelteKit, it just forwards the request to Notion and gets the result back.
So I don't even need to integrate the Notion SDK in the backend and proxy all the different calls, but I just do the same with the ACP request. I forward the out headers and stuff like that.
So if you use this, your API key will be forwarded first to the server and then to Notion, but I don't store the data anywhere. I don't care about your Notion data. I'm not that kind of guy. I don't have bad intentions. I use this myself and I created it so that if they want, other people can also
use it and I will in the future will occasionally be doing some small tweaks like the refresh and the complete here, the visibility, I may be adding some more icons and the last thing I want to show, so here on the demo thing, I completed the to-do there. It now says all to-dos are completed and I can even add something here. So do a demo was added here and I can say edit from Notion. And when I go back to the page, it already refreshed and that's pity because I wanted to do it manually, but I can also do refresh here and I can also mark this demo thing as complete and then it removes itself
from the list and it is still there in Notion on the completed column. If you remove the filter there, you can still see it back. For boards, if everything is completed in the board, you just see this
add a new to-do, I can also toggle that it shows completed to-dos or hides them. I did it on a subtask, but I needed to do it on the full task. And I can toggle it that it only shows the ones that are completed, that it also includes the ones that are completed.
And if you're, so the weekend is done, for example, when your tasks are done and you don't want to see the board anymore, you say remove this board here and you're done and you can do the same thing for this one. And what I had been working on, but I wasn't able to complete this weekend,
so I figured I do that later is to have those board also be synced to Notion. So on a different database than the to-dos, you would be able to sync the to-dos so you could access the boards from your phone and from your desktop because now all the planned things are also stored
only in local storage. So if I close this browser window, for example, and clear the local storage,
then I won't have the boards anymore. I would still have the tasks because those are Notion.
So this was a short overview of the to-do, the chunky to-do app that I've been working on.
I don't really have a homepage for it, but at some point I will probably tidy that up at a simple homepage and just share it at some point saying, hey, you can access it, the todo.debuggingdan.com.
And if you follow the steps that I did here, it should already be working for you if you feel that this is something that might work for you. Yeah, let me know what you think and that's the recording for today.
Bye.