My first breakable toy: 4th week at the Spark Program @ Encora

This week started with a great news and a big challenge: Build a full stack Todo application to manage tasks for a fictional client.

Photo by Workshop& on Unsplash

This is something really good and a little weird for me because I'm more of Mobile Development rather than Web Development, but as a Software Engineer, you should know a little bit of many technologies and be able to do any required project because I think the technologies are too similar or at least at the core base, I mean, everything is about algorithms wich are steps, so when you are creating a new project in an unknown technology you only need to know what are those steps and how to translate that to another technology, for example: I’m required to solve the FizzBuzz problem in Python, but I don’t know how to program in Python, only in Java. But I do know what are the steps to solve this problem and what do I need: conditionals and print statements.

So I know a conditional in Java is something like this:

if(condition) {
  //actions if the condition is true
}else if(other condition) {
  //actions if the other condition is true
}else {
  //actions if none of the previous conditions is true
}

And now the next step is know how to do it in Python, so you only have to do some research and look for some examples to find out how these languages are similar and how you can do it. And what you find out is that a conditional in Python is as follows:

if condition:
  #actions if the condition is true
elif other_condition:
  #actions if the other condition is true
else:
  #actions if none of the previous conditions is true

Now after looking at both sintaxis you can see the differences and you know that is the same thing, but expressed differently. This is the same with major technologies like Mobile Development or Web Development, you only have to know the differences and how they’re similar.

For this project we have to create a full stack application that can manage tasks. That is, a web application where you can create a task, update it or get all of the tasks you have registered. And these are the requirements:

• Create a “to do” specifying the name, a priority, and possibly a due date.
• Ability to edit name, priority and due date for existing “to do” tasks.
• Be able to filter “to do’s” specifying the name (or part of the name), and the priority, and if they are done/undone.
• Be able to sort the “to do’s” by priority and/or due date.
• Mark “to do’s” as done (clicking in a checkbox) or to undone a “to do”.
• Since it is possible that the client will have a lot of “to do’s” they need to paginate the list of “to do’s”.
• Ability to know, in average, the time between creation and done for all “to do’s”.

Frontend

• ReactJs
• TypeScript
• Redux or React Context

Backend

• Java
• Maven
• SpringBoot

I’ve never used SpringBoot before so this was going to be a great challenge to learn something new through the best way of doing it: Make something real.

So for this week I started with my favorite part that I do whenever I create a new project: Search for inspiration and create a design, so I can feel comfortable and I know what I need to do and how to do it. For this I use dribble which is an excellent site to look for inspiration for this kind of projects.

Dribbble - Discover the World's Top Designers & Creative Professionals

When I feel inspired and I know how I want the design of the project to be. I create a small design in Figma where I can see the overview of the project and the components that I need to create and how they are going to interact with each other, but also, how the user is going to interact with them and have a great experience using the project.

I think the design is one of the most important parts of building a project because your application could be the most functional but if it doesn’t look pretty or is easy to use people won’t use it, they'll prefer something pretty and easy to use even though it doesn't have a lot of features. And yes, you don't have to create the most beautiful application and follow the thousands of guidelines to provide an excellent user experience but you can find balance between something that looks pretty good and that have good functionalities and improve it from there to create something better.

This is how my design looks like, as you can see is far from being perfect or even good, but with this I have a notion of how I want the project to look like, how the brand will be and I can start from there to improve it.

My project is named SimpleTask because I was already working on a similar project for Android devices with Kotlin and Jetpack Compose, so this is a great opportunity to create a web version of it.

In the design you can see the main requirements: A space where the user can see the tasks where also will be able to see the attributes like due date and priority, a search bar where the user can search the tasks by name and a section where the user can measure the time spent to perform the tasks.

Once the idea of the design is done, it was time to start with what I thought was going to be the hardest part of the project: the backend.

When I learn a new technology I usually read and watch tutorials, I get bored easily so I have to create something (learn by doing) and as my mentor said “doing a breakable toy of the breakable toy”. I love this way of learning because I can understand how things are connected and how they work, instead of only watching, reading or hearing how it works and saying that I understood everything but when it’s time of do it by myself I don't know anything and I have a lot of doubts. That’s why I think it’s better to just listen a little bit how it works and start doing something to really understand it and solve the doubts that arise.

This is the tutorial I was following to understand how SpringBoot works and I find it a very good example because it creates something very similar, even with a database.

What I learn by doing this demo project is that the Architecture that SpringBoot uses is really similar to the MVVM architecture in Android (and even you can use Gradle — the default dependency management and building tool in Android — but sadly I had to use Maven). So this is what I meant when I told you about know the steps and how to translate them to another technology at the beginning of this blog.

Also, one thing that I heard in a lot of tutorials and even from my mentor is to use a initializer for the project, so you can choose the language (Java or Kotlin), building tool, metadata and dependencies in a more easy way. For this project I used IntelliJ Idea because is one of my favorite IDEs.

After initializing the project (I didn't do it with the initializer because IntelliJ also creates the structure of the project and you can add the dependencies in the maven or gradle file) I created the model, which works as a Singleton and a Entity for the Data Base. In this file, you can specify the attributes of the object and use annotations to indicate if an attribute is an ID, if the parameter is required and a lot of other things.

@Builder
@Entity
@Table(name="todo")
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
@ToString
public class Todo {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Size(max=120)
    @NotNull
    private String text;

    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    @JsonFormat(pattern = "MM/dd/yyyy HH:mm")
    private LocalDateTime dueDate;

    @Builder.Default
    private Boolean done = false;

    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    @JsonFormat(pattern = "MM/dd/yyyy HH:mm")
    private LocalDateTime doneDate;

    @NotNull
    private Priority priority;

    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    @JsonFormat(pattern = "MM/dd/yyyy HH:mm")
    private LocalDateTime creationDate;

    @JsonDeserialize(using = LocalDateTimeDeserializer.class)
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    @JsonFormat(pattern = "MM/dd/yyyy HH:mm")
    private LocalDateTime lastUpdateDate;

}

The next step is to create a repository that is simply an interface that extends from JpaRepository receiving the model and the Id of the model.

@Repository
public interface TodoRepository extends JpaRepository<Todo, Long> {
}

Once this is finished is time to create the most important part of the project: the controller. This object is who manage all of the logic of the backend, is who define the methods of the API and returns a response to indicate the status of the request.

@GetMapping("/todos/{id}/")
public ResponseEntity<Todo> getTaskById(@PathVariable Long id) {

    Optional<Todo> task = todoRepository.findById(id);

    if (task.isPresent()) {
        return new ResponseEntity<>(task.get(), HttpStatus.OK);
    }

    return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}

You can follow the development of this project in the following repository:

GitHub - brandonhxrr/SimpleTaskWeb

At the beginning of the project I thought building the backend was going to be the most difficult task in this project but after completing it I think it was the easiest one. Spring Boot is really easy to understand and you can always look for help to understand how to do certain things.

I think I rediscovered Java again and it’s fun because is rediscovering things that I already knew and learning others. SpringBoot seems like a really helpful tool and I really liked it, with it I can stop relying on Firebase and start building new and interesting things.