In this assignment, you will 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 whiteboard, 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.

Functional Specification

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 features you should include in your app:

Collection of Boards (3p)

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 what it looks like in Trello:

You don't need to have categories for each board. A simple grid list view of cards is enough.

Lists of Cards (3p)

When clicking on a board we should go to a new page 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:

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

Card Content (3p)

The user should be able to add a new card to a given list and give it 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 what opening a card looks like in Trello:

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.

Metrics Collection (1p)

You should also have tools for collecting various metrics integrated into your app. We do not impose any tool or library, but we want you to motivate in the file why you chose a certain technology, what metrics are you collecting, why you collect them, and how you plan to use them to take better business decisions for your Trello app 8-).

App Deployment (bonus - 1p)

Deploy your app somewhere in the cloud so that it can be accessed from anywhere. We strongly recommend Vercel due to its ease of use and seamless integration with Next.js.

Don't forget to mention the URL of the deployed app in the file.

Tech Stack

Some technologies are mandatory and must be included in your tech stack. However, some are just recommendations and you can pick whatever technology you want in the end. So your typical tech stack should look like this:

  • Frontend: React + Next.js - mandatory
  • Backend: Node.js + Express - recommended
  • Database: MongoDB - recommended

We included backend and database technologies in the tech stack because we require your data to be persistent. That means that your boards and tasks should be stored in your database of choice in a meaningful manner and this data should be accessed by your Next.js app through an API (a.k.a. your backend).

Your app should also look pleasant, so a components library might come in handy in order for you not to mess around with too much CSS. Material UI is our strong recommendation for that.

The diagram below depicts a typical architecture for your app:

You can use the sample app provided in the Next.js lab as a starting point for your frontend project.

We will not provide you with a starting point for your backend and database as these 2 components are not imposed. However, you can always Google some boilerplates.

Grading, Upload and Deadline


The assignment has a maximum of 11 points, which corresponds to 1.1p of your final grade. Each feature will give you a certain amount of points:

  • Collection of Boards: 3p
  • Lists of Cards: 3p
  • Card Content: 3p
  • Metrics Collection: 1p
  • App Deployment: 1p (bonus)


You need to upload a .zip file (in the format, containing the code and the file, in which you should explain your implementation and decisions.

The assignment will be graded with zero points if:

  • The file is missing
  • The node_modules directory is included in the archive


The deadline is hard and it is on the 7th of December 2023, 23:55

se/assignment/01.txt ยท Last modified: 2023/11/09 12:36 by emilian.radoi
CC Attribution-Share Alike 3.0 Unported Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0