hapiben / todoist-tribute

:white_check_mark: Todoist clone, written in Rails + Vue

Imitation is the sincerest form of flattery.

This is a clone of the Todoist web-app.

Here's how it looks:

Visit a live instance to check it out!

You can also deploy your own copy to heroku:

Installing locally

This is a standard Rails app, using webpacker to manage JS modules.

You'll need Ruby, bundler, yarn and Postgres installed. All the following steps are to be executed in the root directory of this repository.

• Run bundle install to install the required Rubygems
• Run yarn install to install the required NPM packages
• Run createdb tudu_development to create a development database
• Run rake db:migrate db:seed to create database schema and sample records
• Run rails s to spin up the Rails dev server
• Run ./bin/webpack-dev-server to spin up the webpack dev server

Hit localhost:3000 and you should be ready to go!

Under the hood

The backend is written in Ruby + Rails, and the frontend in Typescript + Vue.js.

A few interesting files to look at:

• editor_nodes.ts

Current Status

• Tasks
  • Creating tasks
  • Editing tasks
  • Completing tasks
  • Re-ordering tasks
  • Nested/indented tasks
• Projects
  • Switching between project views
  • Creating projects
  • Editing projects
  • Re-ordering projects
  • Deleting projects
  • Color picker
• Labels
  • Creating labels
  • Editing labels
  • Viewing tasks for a label
  • Rendering labels in task-item
  • Assigning labels via task-editor
• Priorities
• Due dates
• Filters
• Karma
• Keyboard Shortcuts
  • Task List
    • a to open editor at bottom of list
    • A to open editor at top of list
  • Task Editor
    • Enter to create new task and open editor below
    • Esc to cancel
    • Shift + Enter to save and create new one below
    • Ctrl + Enter to save and create new one above