I built a @todoist clone using @NotionHQ as the no-code tool and cancelled my $50/year subscription.
Here is how ππ§΅
Here is how ππ§΅
0/ Features
β’ Quick Add bar to enter tasks
β’ Inbox with ALL tasks listed
β’ Show overdue, due today and upcoming tasks
β’ Support for !! (priority) and # (project) shortcut
β’ Group tasks by category/priority on a "Trello" board
β’ Quick Add bar to enter tasks
β’ Inbox with ALL tasks listed
β’ Show overdue, due today and upcoming tasks
β’ Support for !! (priority) and # (project) shortcut
β’ Group tasks by category/priority on a "Trello" board
1/ Setup
To build an app you typically need 3 things:
1) A back-end + DB
2) A front-end
3) Something to connect the 2
Notion provides 1/2 out of the box and 3 is hidden magic. π©
So I started by setting up a DB (called Tasks) with the required properties.
To build an app you typically need 3 things:
1) A back-end + DB
2) A front-end
3) Something to connect the 2
Notion provides 1/2 out of the box and 3 is hidden magic. π©
So I started by setting up a DB (called Tasks) with the required properties.
2/ Create Database Fields
β’ Category & Priority β Formula Ξ£
β’ Word Count β Formula Ξ£
β’ Created At β Auto βοΈ
β’ Done β Checkbox βοΈ
β’ Due Date β Date π
β’ Task β Text βοΈ
Note: Category & Priority are formulas to create support for !! and # shortcuts.
β’ Category & Priority β Formula Ξ£
β’ Word Count β Formula Ξ£
β’ Created At β Auto βοΈ
β’ Done β Checkbox βοΈ
β’ Due Date β Date π
β’ Task β Text βοΈ
Note: Category & Priority are formulas to create support for !! and # shortcuts.
3/ The Quick Add Bar
This is achieved by using the '+New' button on the main column on the Notion DB in a Table layout.
The task disappears from the bar when you hit 'enter' just like Todoist.
This is done by filtering out any row with word count> 0.
Ξ£ length(prop("Todo"))
This is achieved by using the '+New' button on the main column on the Notion DB in a Table layout.
The task disappears from the bar when you hit 'enter' just like Todoist.
This is done by filtering out any row with word count> 0.
Ξ£ length(prop("Todo"))
4/ Inbox with ALL Tasks Listed
As soon as a task is entered into the Quick Add bar, it shows up in another table called 'Inbox'.
This is a "linked view" of the Tasks table (created in step 1 above).
It has 2 subviews - All and Pending.
The 'Done' column is moved to the left.
As soon as a task is entered into the Quick Add bar, it shows up in another table called 'Inbox'.
This is a "linked view" of the Tasks table (created in step 1 above).
It has 2 subviews - All and Pending.
The 'Done' column is moved to the left.
5/ View with Overdue, Due Today and Upcoming Tasks
For this, I created a stand-alone page and added 3 versions of the "linked view".
Ξ£ Overdue: Date is BEFORE today
Ξ£ Due Today: Date = today
Ξ£ Upcoming: Date is AFTER today
[+Unchecked]
For this, I created a stand-alone page and added 3 versions of the "linked view".
Ξ£ Overdue: Date is BEFORE today
Ξ£ Due Today: Date = today
Ξ£ Upcoming: Date is AFTER today
[+Unchecked]
6/ Parse The Task For (!!) and (#)
Priorities:
!!1 β P1
!!2 β P2
!!3 β P3
Categories:
#work β Work
#personal β Personal
#hustle β Side-Hustle
'This is a new task !!2 #work' is auto prioritized as P2 and categorized as Work.
Ξ£ contains(prop("Todo"), "!!1") ? "P1"
Priorities:
!!1 β P1
!!2 β P2
!!3 β P3
Categories:
#work β Work
#personal β Personal
#hustle β Side-Hustle
'This is a new task !!2 #work' is auto prioritized as P2 and categorized as Work.
Ξ£ contains(prop("Todo"), "!!1") ? "P1"
7/ Group Tasks Like Trello
For this, I created an independent page called 'Board' to easily visualize the tasks by Priority or Category.
This is achieved by creating a "linked view" of the Tasks table in a "board" layout and 2 subviews (Priority and Category).
For this, I created an independent page called 'Board' to easily visualize the tasks by Priority or Category.
This is achieved by creating a "linked view" of the Tasks table in a "board" layout and 2 subviews (Priority and Category).
8/ Summary
With a touch of creativity, you can achieve a lot of custom functionality in Notion.
To build this clone I used:
β’ 1 x Database
β’ 3 x Formulas
β’ Many x Filters
β’ Many x Linked Views
This is a great way to get started with no-code development.
Thoughts?
With a touch of creativity, you can achieve a lot of custom functionality in Notion.
To build this clone I used:
β’ 1 x Database
β’ 3 x Formulas
β’ Many x Filters
β’ Many x Linked Views
This is a great way to get started with no-code development.
Thoughts?
If you liked this thread, follow me @thenocodepro for more such ideas, threads and hacks.
Drop a π below if you'd like this template!
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
