Building a full stack web application in 2 weeks: 5th week at the Spark Program @ Encora
As part of the Spark Program at Encora, we have to create a web application to handle basic task management. During last week, I was working on the backend with Spring Boot, a technology that I had never used before and that I had to learn in a short time. Despite not knowing this technology it was easy to finish this part, despite some errors due to incorrect understanding of the requirements, so some last minute changes had to be made, but they were simple changes.
This week I worked on developing the frontend of the application with React and TypeScript, I had already used this technology but I still feel it was the most complicated part due to the interaction of the components, the state handling and the requests to the back.
To make the design of the application I made a small design in Figma, quite basic but I think it meets the requirements and is vuisually nice.
As you can see, it is very simple but it contains the essentials which are the task display view and the search, plus the details of each task in the task component, where you can see the task name and priority.
To start converting this design to a React implementation, I started with the navigation bar or Header of the application, where the name of the application will be displayed, the current section (for now the application will only have one section so it will always be Dashboard), the bar where users can search the tasks and the user’s name (which will not be implemented now, but could be implemented later). This is the implementation of this component.
After finishing this, it is time to perform the most important part of the application: the task visualization section, where tasks will be managed, filters will be applied and milked. For this component the following functionalities should be developed:
- Task visualization
- Task creation
- Task modification
- Marking tasks as done/undone.
- Filter tasks by priority and/or status.
- Sort tasks by due date and/or status.
- Delete tasks.
- Paginate tasks.
This was the most difficult component to develop since it includes too many functionalities, which implies the development of multiple components that perform each functionality so as not to perform everything in one and to have a cleaner structure, in addition to reusing the components and avoiding code repetition.
To style the components I used Tailwind, which was a great help, since it allows to define the styles in a simpler way than using only CSS, defining a class per component and styling each component individually, which becomes tedious. However, with tailwind it is much simpler since the classes are already defined and you just have to use them.
The result of this component is as follows:
For this component I decided to use a table to organize the components in a more efficient way, where each column fulfills a particular role, either to perform some action or to display information. Outside the table, the options to filter the tasks either by status and/or priority are shown, as well as the button to add new tasks that opens the following modal:
In this component the details of the task to be added are added and it has functionalities such as clearing the deadline. This component is reused to update the tasks since the same fields are needed, so when a task is updated, only these fields are filled with the information of the task to be updated.
Finally, the last component to perform is the metrics, where you can view the time spent on the tasks, this time is composed of the sum from the date of creation to the date on which the task was marked as completed for each task, in addition the time for each priority is also calculated. The result of the complete application is this:
As you can see, the application was kept simple, but it has all the necessary components according to the requirements and it is scalable, which means that more functionalities can be added easily.
Through the development of this application I learned too much, mainly that I must read the requirements correctly to not do double work and write them to corroborate that I understood them and that there are no ambiguities and if there are, ask.
I also learned that despite knowing a technology, unforeseen events or inconveniences may arise, so you should always develop in advance and seek help if necessary. There are some things that cannot be foreseen, especially if you are working with new technologies but it is important to develop the logic to know what kind of error it could be and how it could be solved.
I think I can apply what I learned this week on any other project and make some kind of plan to tackle any other project.
- Read and understand the requirements: Perform a breakdown of these requirements to corroborate that they are understood and eliminate ambiguities and doubts.
- Make a sketch, either digital or physical, in which the structure of the project can be visualized.
- Develop in advance.
- Plan a project structure: Technologies to use, learn those technologies and develop on the fly if time is very tight.
- Look for help if you are stuck.
You can follow the development of this project in the following repository:
