QuadNote

• 

  Smart task classification powered by the Eisenhower Matrix.

• 

  Fully customizable color themes with built-in data import and export.

• 

  Minimalist design with intuitive click-to-expand and inline editing.

Inspiration

In my daily work, I need to collaborate with multiple colleagues and handle various types of tasks—UI design, backend, and frontend development—each with different levels of urgency. I searched for an existing app that could both distinguish urgency levels and serve as a to-do list, but nothing on the market fit what I had in mind. Spreadsheets? They felt cluttered and unintuitive. So, I decided to build my own solution. That’s how QuadNote was born.

What it does

QuadNote is a smart task management tool based on the Eisenhower Matrix. It helps users sort tasks into four quadrants—Urgent & Important, Important but Not Urgent, Urgent but Not Important, and Neither—allowing them to see priorities at a glance. With a clean and intuitive interface, users can easily add, edit, and organize tasks entirely within their browser for a lightweight productivity experience.

How we built it

QuadNote is a purely frontend application built entirely on modern web technologies. To keep the experience lightweight and fast, we chose to store all user data locally in the browser's built-in storage (LocalStorage/IndexedDB), eliminating the need for a backend server or cloud database. The core UI is built around the Eisenhower Matrix, with an intuitive drag-and-drop interface powered by native JavaScript or lightweight libraries.

Challenges we ran into

The main challenge was managing state persistence effectively within the browser's local storage while keeping the UI responsive and snappy. We also spent significant effort on optimizing the drag-and-drop experience, ensuring that moving tasks between the four quadrants feels natural and responsive without any backend latency.

Accomplishments that we're proud of

We are proud to have built a fully functional MVP that successfully solves a real daily struggle. The interface is clean, responsive, and truly intuitive. Even without a backend, the local-storage-based workflow provides a fast and private experience, meaning users can start planning immediately without any sign-up or data privacy concerns.

What we learned

Throughout this project, we learned a great deal about effective UI/UX design for productivity tools. We also gained deeper insights into handling persistent state management in the browser and building responsive layouts that adapt to different screen sizes. Most importantly, we learned that a simple, user-centered design can make a complex method like the Eisenhower Matrix feel effortless to use.

What's next for QuadNote

In the future, we aim to introduce cloud sync functionality to allow true multi-device usage, so users can access their tasks from anywhere. We also plan to add task reminders, recurring tasks, and a team sharing feature. For now, QuadNote remains a privacy-first, zero-backend tool that puts the user's data entirely in their own hands.

Built With

• css3
• data-import-export
• eisenhower-matrix
• html5
• javascript
• keyboard-shortcuts
• localstorage
• responsive-design
• single-page-application