2DoNote

Default view, clearing all finished todos
Todo being marked as complete
Sidebar when resized
Calendar view
Kanban view
Deleting a to-do

2DoNote, also known as Todonote is a to-do list app, inspired by Notion's default student planner template. It is a a task management website designed for students and professionals. It helps users create, organize, and track tasks while providing multiple ways to view the application.

GitHub Link 🔗: https://github.com/Kenramiscal1106/todonote/

🔧 How we built it

2DoNote was built using vanilla JS, which is the most performant way of building web applications. Data is stored locally via IndexedDB, a low-level primitive of the browser that is performant, yet applicable to the use case of the application. Then, we used a function wrapper to perform operations in the database. When it comes to handling animations, the Web Animations API to provide microinteractions, which are essential for providing user engagement. To give more elaboration, here are some of the Web APIs used by the application:

⚠️ Challenges we ran into

Despite the simplicity of the application, 2DoNote was not an easy project to build. Given that it does not use any Javascript or CSS frameworks, rendering and keeping track of changes in the database, as well as the website itself had proven itself tedious. Luckily, we utilized Web APIs that are Baseline compatible, giving us the best Developer Experience and enhancing performance for users.

🏆 Accomplishments

Building 2DoNote in and of itself was already an accomplishment. It served as a learning project that helped us utilize the foundations of the web, particularly plain HTML, CSS, and JavaScript. In addition, it also made us realize how far we've learned for the past few years, giving us a benchmark of our present application level

💡 What we learned

In the production of 2DoNote, we learned that the process of making a usable site is more than just programming, it is programming with a purpose, programming for the improvement of the user's experience in using the site. Thinking in the position of the user, empathizing, is a key technique for making UI's and developing a site/application.

🔭 What's next for 2DoNote?

2DoNote served as a special project that helped us retain and recall the aspects learned in web development. Its existence has become for us a cornerstone of what we should apply to our future projects, and how we view web development as more than a job, but an art of skill mastery and application.