Backlogs

Backlogs is a to-do list app that helps you manage tasks efficiently with a kanban layout. It automatically extracts deadlines and priorities from natural language input, making it easy to create tasks and stay on track to finish them on time.

Why I built it

Backlogs was initially developed as a final project for Harvard’s CS50w.¹ The task was to design and implement a web application of our own with Python and JavaScript. I figured a to-do list app would be a solid way to practice the basics of web development. I specifically wanted to try natural language input parsing and a basic kanban layout since they seemed hard to pull off without a frontend framework.

How it turned out

Natural language parser

Users can create tasks using intuitive natural language inputs by identifying date phrases and priority keywords, automatically assigning appropriate due dates and urgency levels.

Responsive kanban board

Users can drag-and-drop tasks across different status columns (e.g., To Do, In Progress, Done). The layout also adapts to various screen sizes using responsive design techniques such as transitioning from a 3-column layout to 1-column with 3 tabs.

Task prioritization

Users can categorize tasks by priority levels such as Low, Medium, and High. This helps them focus on the most important tasks first.

Authentication

Users can register, log in, and manage a personal backlog of tasks.

How I built it

The natural language parser was inspired by popular todo list apps like Todoist. The parser is rule-based and was built from scratch with a lot of regex and if statements. The input was built by overlaying a div element for highlighting keywords on top of an input element. It may be hacky but it works.

I implemented the kanban board with custom drag-and-drop task movement using native HTML5 APIs and JavaScript event handling. Utilizing events such as dragstart, dragenter, and drop, I was able to create not only a monster of a JavaScript module but something that actually works well.

Task creation and updates (CRUD) are handled via AJAX. Reloading the page every interaction would’ve been annoying, so I used JavaScript to send and receive data in the background.

Django templates are heavily used to create reusable frontend components (even for small pieces like the checkbox). I leaned on {% include %} a lot, mostly to avoid repeating the same HTML in ten different places. That habit definitely came from working with React. It just makes sense.

What I learned

I got more experience working with Django and JavaScript (again) in the same project. I also developed a DRY habit of organizing templates to make the code easier to maintain.

Working with the native drag-and-drop API taught me how to handle the different events properly. Writing the parser also helped me understand how to structure rule-based logic and use regex more effectively.