A task manager client application using Teamwork Projects API
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
README.md
home.html
index.html
projects.html

README.md

Project Goal:

Create a Single-Page Application (SPA). Incorporate links or buttons to allow your user to navigate the site and reset/control the site functionality. Whenever possible, strive to use semantic HTML5 elements to structure your HTML code better.

Make sure your site is as responsive as possible. You can test this by checking the site on different screen sizes and browsers. Please note that if you are building a data dashboard, only your chart containers are expected to be responsive. Charts using D3.js are not responsive as they are designed for desktop or large-screen viewing.

We advise that you write down user stories and create wireframes/mockups before embarking on full-blown development. The site can also make use of CSS frameworks such as Bootstrap, just make sure you maintain a clear separation between the library code and your code. You should conduct and document tests to ensure that all of your website’s functionality works well.

Use Git & GitHub for version control. Each new piece of functionality should be in a separate commit.

Deploy the final version of your code to a hosting platform such as GitHub Pages.

Project idea:

"TeamworkToDo" - a one-page task manager application. It utilizes the TeamWork.com API (https://developer.teamwork.com).

Demo:

A development(subject to current dev changes) demo of this app can be viewed here.

Technology stack:

  • HTML & CSS
  • JavaScript
  • Twitter bootstrap framework
  • jQuery
  • Axios, a Promise-based HTTP client for JS.
  • Jasmine, a behavior-driven development framework for testing JS.

UX:

  • The user is first asked to authenticate with their Teamwork Projects sitename and API key.
  • Once authenticated, the user is shown a list of their Teamwork projects gathered from a call to the API - they choose one.
  • Task overview displayed with counters.
  • Side menu to navigate to relevant task due date ranges i.e Today, Tomorrow, Overdue and Completed.
  • An add task form comprising of title, description, due-date and task list to which it should be added displayed on the right most div.
  • Each task may be marked as complete.
  • Each task may also be edited to update any of the form fields.

Version control

  • Git and GitHub were utilized for version control. As additions and edits were being made, files were committed to branches and merged to the master branch.

Deploy

  • Production app is deployed on the Netlify platform.
  • This enabled deployments to be triggered from GitHub commits to a selected branch.

Current issues:

  • Teamwork credentials from login form are currently being stored in browser local-storage. This is not ideal as poses security risk for Cross-site scripting (XSS) vulnerabilities. Need to implement Teamwork's app login flow or similar.

Further features:

User stories (functionality):

  • As a first-time user I want to be able to authenticate via my my Teamwork.com credentials.

  • As an authenticated user, I should be able redirected to overview page.

  • As a user who provides incorrect authentication information, I should an appropriate alert to the problem.

  • As an authenticated user, I want to be able to select a project for which view tasks for.

  • As an authenticated user I want to be able to view All Tasks as available across all Task Lists.

  • As an authenticated user I want to be able to view a dashboard displaying an overview of my tasks.

  • As an authenticated user, if I wish to add a task, I will need to fill out a form which will allow me enter task details such as:

    • title,
    • description,
    • task list,
    • due date
  • As an authenticated user, if I add a task that is successfully submitted, I should see a confirmation message.

  • As an authenticated user, if there are tasks present, these should be presented in reverse-chronological order, beginning with the newest available task.

  • As an authenticated user, if there are no tasks present in my account, I should be alerted to this and prompted to add a task.

  • As authenticated user I want to be able to view Today’s Tasks available across all Task Lists.

  • As authenticated user I want to be able to view Today’s Tasks, if there are none, then I should see a message alerting me of this.

  • As authenticated user I want to be able to view Tomorrow’s Tasks, if there are none, then I should see a message alerting me of this.

  • As authenticated user I want to be able to view Tomorrow’s Tasks, if there are none, then I should see a message alerting me of this.

  • As authenticated user I want to be able to view Overdue Tasks, if there are none, then I should see a message alerting me of this.

  • As authenticated user I want to be able to view Overdue Tasks, if there are none, then I should see a message alerting me of this.

  • As an authenticated user, I should be able to see a list of all task lists available.

Task options

To alter each task

  • Edit task title.

  • Delete task.

  • Alter due date.

Other tasks:

  • Implement Jasmine tests.

Credits: