Creating Interactive Apps Challenge

Here we didn't have a single challenge, but a set of little ones. So, going one by one:

1. Set the project icon as the two letters of the name

Great! The project icon is taking the first two letters of the name. I like the simplicity of just slicing the name. https://github.com/bimineco/ifcviewer/blob/8d7f32e14c4c216d7402bf96574fc7e15a846c65/src/classes/Project.ts#L79

If you want another challenge in this same line, try to take the first two letters only if the name contains one word. But if it has two or more words, take the first letter of the first two words.

2. Set a random color to the icon background

Awesome! The background colors for the project initials are changing randomly. One benefit of having a fixed set of colors is you can choose them to match the overall style of the app. https://github.com/bimineco/ifcviewer/blob/8d7f32e14c4c216d7402bf96574fc7e15a846c65/src/classes/Project.ts#L80

3. Don’t create the project if the name is less than 5 characters long

Great! The project is throwing an error if the name contains less than 5 characters long. https://github.com/bimineco/ifcviewer/blob/8d7f32e14c4c216d7402bf96574fc7e15a846c65/src/classes/Project.ts#L46

However, I would tell you is better not to throw the error in the setUI function. The reason is because you depend on the project to have a UI in order to verify if the name complies with the requirements or not. Let's say, for example, that you change the project name after it has been created, and the new name is less than 5 characters. My suggestion is to create accessors for the name property, so anytime the name changes the verification is done. Accessors are basically getters/setters. So, in the project class, you can write something as the following:

class Project {
  private _name: string = ""

  get name() {
    return this._name
  }

  set name(value: string) {
    if (this.name.length < 5) {
      throw new Error(`${value} is less than five characters long.`)
    }
    this._name = value
  }
}

So, any time the project name is set (like project.name = "New Name" the setter will check if it fulfills the requirements before setting the name.

PD: Cool error modal!

4. Give the project a default date if the user don’t specify one

Great! I see the project taking a default date in case no one is specified. https://github.com/bimineco/ifcviewer/blob/8d7f32e14c4c216d7402bf96574fc7e15a846c65/src/classes/Project.ts#L53

I've noticed you set the date property as string. While that's ok the UI, I suggest you keep it as a Date object because you can do math between dates in JavaScript (subtracting dates to get a timespan for example). Instead of storing the date as a string, make a helper method (or getter if you want to get it as a property) to give you the date in the string format you need. Something like this will help you with that:

class Project {
  date: Date = new Date() // this sets the default date as the current date

  get formattedDate() {
    const currentYear = this.date.getFullYear();
    const currentMonth = String(this.date.getMonth() + 1).padStart(2, '0');
    const currentDay = String(this.date.getDate()).padStart(2, '0');
    const startDate = `${currentDay}/${currentMonth}/${currentYear}`;
    return startDate
  }
}

So, if you write something like project.formattedDate then you will get in the display format you need for the UI while also keeping the date as a Date object.

5. Make a form to update the project information from the details page

Great! The modal is visible with the corresponding form when I try to edit the information of an existing project. If I accept the form, it gets updated!

6. Let the user create ToDos and store the data in the project

It seems you not only let the user create ToDos, but also to remove them! Nice one. I really liked you have created a custom class that represents the ToDo and also a ToDo Manager for them. The only thing I would like to have is a property in the ToDo with the ID of the project it belongs to. This makes possible to know the project a ToDo belongs to really easy. Also, I really liked the design when the ToDo is opened.

7. Make sure ToDos are exported along the project

Great! The ToDos are exported along the project.

8. Update the project information from JSON if the project already existed

I have made some tests with this one. It seems the project information is updated, but not the UI.

This is very likely due to some missing matching between the project data and the UI it belongs to, maybe?

9. Allow to specify a status for each ToDo. Change the background color based on the state.

Great! I see you are changing the icon color background based on the state and the ToDo color it-self based on the priority. Well done 💪

Just as a general suggestion here, try to not call some functions in English while others in Spanish 😅

Wonderful work Julián! You're going really great 🚀 I would only need to see the project details updating in the UI to give you the corresponding badge for this module.

bimineco / ifcviewer