Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
bin
 
 
 
 
db
 
 
 
 
lib
 
 
log
 
 
 
 
 
 
tmp
 
 
 
 
 
 
 
 
=
 
 
 
 
 
 
 
 
 
 
 
 
 
 

BASANA

Basana splash

Summary

Basana is a single-page project management web application inspired by Asana built with JavaScript, React.js, Redux, PostgreSQL and Ruby on Rails.

Features

Basana allows users to:

  • Create an account
  • Log in / Log out
  • Update profile information
  • Create, edit and delete Teams and Projects
  • Create, edit, complete and assign Tasks to a member or assign a deadline
  • Search for and invite team members

Languages and Libraries

  • JavaScript
  • React.js
  • Redux
  • Ruby
  • Ruby on Rails
  • PostgreSQL
  • HTML5 + CSS3

Implementation in Detail

  • Debounce function

Task title and description are dynamically updated every 1 sec after user stops making changes.

Dynamic update

The TaskForm component is initialized with a timeout instance set as Null. An update function is passed to input field event listener as a callback. Every time when the user changes input, an action is dispatched to mutate the Redux state; the timeout instance is cleared if present and is reset to a new setTimeout object. After 1000 ms, an AJAX request is sent to update the database.

Debounce1 Debounce2

  • User Search

Team member form searches for existing users and completes email addresses upon click.

User search

Debounce function is also implemented here so that an AJAX request to search users is sent whenever user stops typing. Additionally component state controls the visibility of dropdown containing search results. Visibility is toggled through onFocus and onBlur installed on the input field of search bar.

User Search1

setState function of TeamMemberForm component is passed down to its child component UserSearchItem. The child component invokes this callback to mutate the parent component's state. One challenge here was that onBlur(closes the dropdown) and onClick(completes the input field) listens to the same event and event handlers are prioritized in a certain order that the dropdown always closes before the input field is completed. I initially solved this with setTimeout but found out that using onMouseDown instead can fix this issue.

User Search3 User Search4

Future Plans

  • Complete comment feature (edit/delete)
  • Log user's activities on tasks (user1 updated on 06/17/2019)
  • Implement infinite scroll to comment index (display 3 latest comment, scroll to see more)
  • Create report feature ...

About

Asana Clone

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published