Asauna

Asauna Live -- Open in a new tab to avoid being redirected!

Showcase

Clone of Asana, a project and task management webapp.

Rails backend & React/Redux frontend

• Create, edit, and navigate to different workspaces.

• Simplify your team organization by creating separate workspaces for your projects.
• Create projects to track your tasks.

• Create project-specific tasks.
• Access all of your tasks under MyTasks.

• Complete your tasks by checking it off.

Deleting task animation

The Code

handleRemove(e) {
    if (e.target.classList[1] === "fa-check-circle") {
        e.target.classList.add("done--check-fade")
        let target = e.currentTarget;
        target.classList.add("complete--task");

        setTimeout(() => {
            target.classList.add("complete--task-fade");
        }, 750);

        setTimeout(() => {
            this.props.deleteTask(this.props.task.id)
            .then(() => {
                this.props.fetchTasks(this.props.match.params.workspaceId)
            })
        }, 1500);
    }
}

The CSS

.complete--task {
    background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, 
    rgba(255, 82, 99, 0.8) 51%, rgba(255, 115, 129, 0.8) 60%, 
    rgba(252, 189, 1, 0.8) 80%, rgba(0,0,0,0) 100%);
    background-size: 300%;
    background-position: 230%;
    min-height: initial;
}

Deployment Instructions

1. npm install
2. bundle install
3. enable postgres
4. rails db:setup