In this assignment you are going to implement a simplified Trello clone. In case you haven't heard of or used Trello, here's a basic description of what it is, taken from their website:

Trello is a collaboration tool that organizes your projects into boards. In one glance, Trello tells you what's being worked on, who's working on what, and where something is in a process.

Imagine a white board, filled with lists of sticky notes, with each note as a task for you and your team. Now imagine that each of those sticky notes has photos, attachments from other data sources like BitBucket or Salesforce, documents, and a place to comment and collaborate with your teammates. Now imagine that you can take that whiteboard anywhere you go on your smartphone, and can access it from any computer through the web. That's Trello!

Also, check out this video that shows how Trello works.

For the purposes of this assignment we are going to create a simplified version of Trello that includes the basic functionality, without all the bells and whistles.

Here are the selected features that we want in the app:

When first opening the app, the user should see a list of boards displayed in a grid-like view. The user should be able to create a new board and give it a name, change the name of an existing board, delete a board, and open a board to see its contents. Here is how it looks like in Trello:

Note: You do not have to have categories for each board. A simple grid list view of cards is enough.

When clicking on a board we should go to a new view that shows the contents of the board. This is a collection of card lists. Each list is shown as a vertical column. We should be able to create a new list and give it a name, change the name of an existing list, and delete a list. Again, here is how this view looks like in Trello:

Note: There is no need to be able to re-order lists by dragging and dropping in our simplified implementation.

The user should be able add a new card to a given list and provide a name. When clicking on a card, the user should see a modal window with the contents of the card. In our simplified version, we are only going to store a title and a description. Also, the user should be allowed to edit the title and the description, as well as to delete the card. Here is how opening a card looks like in Trello:

Note: There is no need to support reordering cards by dragging and dropping, or to support any of the other types of content like comments, images, checklists, etc.

From a technical point of view, you should use the technologies discussed in labs: Frontend, Backend, and Cloud, to build a MEVN (Mongo, Express, Vue, Node) app.

You can use the sample app provided in the Backend lab as a starting point.

Use HTML, CSS, and Javascript, along with the Vue JS Javascript framework. Also, use the Bootstrap UI framework with Vue JS. This is done via Bootstrap-Vue which provides a set of Vue JS components styled to look pretty with Bootstrap. This will be very handy for the assignment as Bootstrap-Vue already comes with a large number of ready-to-use components such as Cards and Modals

For the backend use Node JS and Express to build a RESTful API that can provide data to the app. This will serve as the bridge between the frontend and the database. You will be implementing CRUD (Create, Read, Update, Delete) operations that correspond to the functionality described in the previous section.

Use MongoDB. One simple way to store the data is to have a Mongo collection of boards. Each board would be a separate Mongo document. This document could contain a ”lists” array property, and each list could contain a ”cards” array property.

If you prefer to use Firebase instead of Express and Mongo you are free to do so. However, you will have to make sure your UI updates in real-time across devices by using Cloud Firestore and also deploy the app to Firebase Hosting to receive the full marks.

• Hard deadline at 23:55 on the 14th of December 2018.

• You need to upload a ZIP file (in this format: SurnameNameGroup.zip), containing the code and a Readme file.
• The file has to be uploaded here:
  • SRIC Assignment Upload
  • MTI Assignment Upload
  • Opt - either of the above

• Feature 1 - 0.6p
• Feature 2 - 0.2p
• Feature 3 - 0.2p