A simple To Do List web app with the ability to organize list items by importance and urgency (Eisenhower Matrix)
This type of categorization is also called Urgency matrix. The use case is very simple. You can sort out or categorize your tasks in four different categories: Urgent & Important, Not Urgent but Important, Urgent but not important and lastly, Not Important & Not Urgent. This way, you can priorotize your tasks and can easily decide what to do right now.
- Task List: Add tasks by pressing "Enter", edit by double-clicking.
- Drag and Drop: Categorize tasks by dragging them to the appropriate quadrant.
- Local Storage: Your tasks stay private, saved in your browser's local storage.
- Add Tasks: Press "Enter" to add tasks. Edit by double-clicking.
- Categorize: Drag tasks to the quadrant they fit best:
- Urgent & Important: Tasks needing immediate attention.
- Important, Not Urgent: Important tasks with no rush.
- Urgent, Not Important: Tasks that can be delegated.
- Neither Urgent nor Important: Low-priority tasks.
| Important | Not Important | |
|---|---|---|
| Urgent | ||
| Not Urgent |
- Clone repo and navigate to the directory.
- Install dependencies:
npm install - Start the server:
npm run dev - Access the app at
http://localhost:3000
Contributions are welcome! Feel free to open an issue or submit a pull request.
The following may come in handy when figuring the urgency and important for a particular task:
- Do: Urgent and important tasks. These are the tasks that need to be done immediately and that will have a big impact on your goals.
- Schedule: Not urgent but important tasks. These are the tasks that are important, but they can wait. Schedule them for a later time when you have more time.
- Delegate: Urgent but not important tasks. These are the tasks that someone else can do for you. Delegate them to free up your time for more important tasks.
- Delete: Not urgent and not important tasks. These are the tasks that you don't need to do at all. Delete them from your to-do list to avoid wasting your time.
This is a Next.js project bootstrapped with create-next-app.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.