Card Based Project Manager

This project is intended to show that you can design and code a complete web site that is consistently styled, responsive, and interactive.

Most todo list apps are too linear and structured. If you want to go beyond the "done" and "not done" status for your tasks — say, to show things that are in progress or have several steps before they get completed — then they are far from optimal. One of the best alternatives is the low-tech solution of sticking Post-It notes on a whiteboard to help to visualize the lists in logical lists you can easily move around.

Trello is arguably the most popular project management web app today, used by millions of people and companies including Google, Pixar, National Geographic, and Kickstarter. It gives you a digital workspace whose basic layout is minimalist, boards organized into lists of cards that can be easily moved around. Each card, when expanded, provides more details and options about the specific task. In this way it helps visualize the state of a project by letting you see the big picture and also drill down to see relevant details. By being on the web, it makes projects collaborative because everyone can see and change one shared version of the state of project's progress. There may be no limit to what people use Trello to organize including managing their code projects.

Here is a short example of using Trello in action to give you a sense of how the app should work. Of course there are many alternatives to Trello (a few with their pros and cons analyzed, open source only, or a comprehensive list) that have a variety of looks and features that you can use for inspiration. Your app will obviously be much simplified from the full Trello app, but you should use a similar interface of projects (boards) that contain any number of lists, each of which contains any number of cards, although you may tweak the specifics of the look, interactions, and data that you present.

At a minimum, your app should allow users to:

• Work with lists
  • Create lists with a name, edit that name, or remove the entire list
  • Change the order in which the lists are displayed (using basic input techniques like buttons or text fields, etc.)
  • Collapse or expand lists
• Work with cards
  • Create cards with a name, edit that name, or remove cards
  • Add cards to a list or move cards to another list (using basic input techniques like buttons or text fields, etc.)
  • Show status data about the card such as when it was created or how close it is to being completed
    
• Work with users (primarily for information purposes, not for authentication because any user can make any kind of change to the project)
  • Create users with a name, email, and image (no password)
  • "Sign in" by entering name or email (if there is a match the user is allowed in)
  • Change user's name, email, or image
• Customize a project
  • Choose a background color or image
  • Choose categories for cards and colors for those categories
  • Filter visible cards by category or date created
• Click on card to see expanded view of it that contains
  • Name
  • Description (which could include HTML tags)
  • Deadline
  • Image attachments
  • Todo list that represents smaller tasks associated with this card
    

For full credit, you must do at least three of these challenging features that allow users to:

• Drag and drop cards or lists to change their positions
• Switch between viewing the project's lists either vertically or horizontally
• Make any number comments on a card
• Assign any number of users to a card
• Filter visible cards by almost any criteria
• On a separate page, manage multiple projects (all users can see all projects), including
  • "Star" projects as important and order them at the top of the project collection page
  • Close projects as done and order them at the bottom of the project collection page
• View project "activities" that shows changes made to any card and when the change was made
• Be notified (by email, tweet, Slack, or Facebook, etc) when they are assigned to and removed from a card and something changes on a card they have been assigned to

The data entered by the user and represented by the project's state should be stored in a JavaScript data structure. You will start by storing it directly in JavaScript so that you can test your site but the data will be lost when the page refreshes. Then you should be able to load it from a JSON file and display the resulting project state, but still not save any changes. Finally, you will save your data structure dynamically using Firebase so that the data persists when the page is refreshed and multiple users can work on a project at the same time. How you organize the JavaScript data structure to represent the data you need to support your site is up to you. Nothing about the data to be displayed should be hard coded in the HTML file itself, e.g., not the number of users, cards, lists, or boards nor the number or name of the categories in which the tasks belong.

You can use any combination of front end web technology we have discussed in class, i.e., Flexbox, Bootstrap, SCSS, JavaScript, jQuery, Vue, and Firebase. You can use standard UI components or animations from any of these technologies (even if we did not discuss it in class) so you do not need to write everything in raw JavaScript or jQuery. However, you may not use other frameworks that have not been covered, i.e., React, Angular, D3, etc, and especially not any back end libraries that require something like npm — your site must run through GitHub Pages. Your site should also be responsive, providing usable interaction and reasonable organization of the content on at least large, medium, and small screen widths.

The code you submit should be your own. You may look at general tutorials or examples, but even searching specifically for Trello-like examples or tutorials will be considered cheating. As usual, you must attribute the source of any of the code you copied rather than writing yourself, but you may not copy more than 5 lines of code from any specific tutorial or example (other than those given in class). Any copied code must be commented in your own words as to how it works and it must be tuned to the specifications of this assignment. We will be checking that your code is consistent in its style, organized, and cleanly written, rather than a mess of combined tutorials. As a reminder, the goal of this assignment is to demonstrate that you have mastered the basics of creating a web site from scratch.

Resources

• Trello Guide
• Vue.js - The Basics
• A Complete Vue.js Application by Matthias Hager
• Firebase Basics Guide
• Best Practices for Firebase by Chad Robinson
• Structuring your Firebase Data Correctly by Rahat Khanna

Submission

This assignment will be submitted in two parts:

• Basic version: front end display loaded from a JSON file representing your JavaScript data structure, with at least one interaction from each of the five required features
• Final version: integrated with Firebase, completely interactive, with your chosen challenging features done

To submit this assignment

• create a new folder within your assignments-portfolio-GIT_SCREEN_NAME folder named trello
• within that folder put
  • HTML page, CSS style file(s), JavaScript file(s), and JSON data files
  • any local images used to make your page
  • a README file (in plain text or Markdown format) describing your work on the assignment
• then add a very obvious link on your Portfolio web site to the page you have made

Your files must display the way you expect in the latest version of Chrome. You are expected to follow the standard coding conventions for HTML, CSS, and JavaScript (within reason). Your code must validate using the W3C HTML, CSS, JavaScript (within reason), and JSON validators online.

Only what is in your assignments-portfolio-GIT_SCREEN_NAME repository on GitHub at the deadline will be considered for your submission.