CompSci 290.2
Spring 2018
Web Application Development

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:

For full credit, you must do at least three of these challenging features that allow users 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.



This assignment will be submitted in two parts:

To submit this assignment

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.