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.

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:

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:

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:

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:

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 Readme.md 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 .

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.

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).

The diagram below depicts a typical architecture for your app:

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 surname-name-group.zip), containing the code and the Readme.md file, in which you should explain your implementation and decisions.

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