Todo List: Pear Timer 🍐

Published in

Strategio

5 min readJan 20, 2023

Why a todo list:

Time is a precious treasure for everyone. Planning the day well is a good practice to avoid wasting time and focusing on what we want. Writing down what we want to do in a day is a good way to achieve this planning. With a to-do list we can dedicate ourselves to things without thinking about what to do next, which takes a lot of time; and most of the time if we are already relatively exhausted from the last task we prefer to procrastinate. Similarly, checking that we have everything done in a day is an incentive for our brain, we feel more productive and tend to want to feel that feeling again. Being disciplined with oneself is important because if we are not disciplined with ourselves, we will be less disciplined with other people, which could cause both professional and personal problems.

As even a to-do list saves time, testing our code is a very good practice. It helps us to define the requirements of the features we want to implement, to check that we don’t alter the performance of other parts of the code when we add new code. Not doing this could cause us to implement things we are not going to need or have to waste time fixing unexpected bugs once we add new features.

Requirements:

We needed to make a Todo list as simple as possible. Something that would take me only a little bit of time to achieve a Todo. The first thing we needed was a platform where we could create a list and add items to that list, at first that was my MVP.

Later, we would need an application that would allow me to register, create my lists and add items to those lists. A way to save them so that my lists would be persistent over time and would not be deleted every time we closed my browser or left the site. Also, we needed a way to authenticate as easily as possible, something with security but not having to remember another password all the time (we have a very bad memory, another reason why making a ToDo list is very convenient for me).

Plan

To achieve this we decided to use Python and Django to build a monolithic web application. To test it we would use Django.test and selenium to build functional tests.

In order to create a development environment we would use venv.
To handle authentications we would implement an email-based authentication system, where the user would access his token in the web app through an email that would be sent to him.

As a version control system, we would use Git and GitHub.
To achieve persistence in the data of our web we had to use a database, in this case, a relational one, because our data are related to each other. PostgreSQL was chosen because the amount of data will not be so large and it is a very light database.

The tools we planned to use to get our CI/CD Pipeline was the following:

Implementation

Our team workflow for our implementation of each feature was as the following:

Following this workflow was how we managed to make my ToDo list web app. wewill show how this process worked in the implementation of the list logic not to allow the creation of an empty list item:

def test_cannot_add_empty_list_items(self):
    #Marcos accidentally tries to submit an empty list item.
    #he hits enter on the empty input box
    self.browser.get(self.live_server_url)
    self.get_item_input_box().send_keys(Keys.ENTER)

    #The home page refreshes, and there is an error message saying
    #that lists items cannot be blank
    self.wait_for(lambda: self.browser.find_element_by_css_selector(
      '#id_text:invalid'
    ))
    
    #He tries again with some text and it works
    self.get_item_input_box().send_keys('Buy milk')
    self.wait_for(lambda: self.browser.find_element_by_css_selector(
      '#id_text:valid'
    ))    self.get_item_input_box().send_keys(Keys.ENTER)
    self.wait_for_row_in_list_table('1: Buy milk')    #Perversaly, he now decides to submit a second blank list item
    self.get_item_input_box().send_keys(Keys.ENTER)
    
    #He receives a similar warning on the list page
    self.wait_for(lambda: self.browser.find_element_by_css_selector(
      '#id_text:invalid'
    ))    #And he can correct it by filling some text in
    self.get_item_input_box().send_keys('Buy tea')
    self.get_item_input_box().send_keys(Keys.ENTER)
    self.wait_for_row_in_list_table('1: Buy milk')
    self.wait_for_row_in_list_table('2: Buy tea')

Once we have this Functional test and we run it, it is logical that at first our code does not pass the test. Therefore, we must create some unit tests to gradually achieve to pass this test:

def post_invalid_input(self):
    list_ = List.objects.create()
    return self.client.post(
      f'/lists/{list_.id}/',
      data={'text': ''}
    )

  def test_for_invalid_input_nothing_saved_to_db(self):
    self.post_invalid_input()
    self.assertEqual(Item.objects.count(), 0)
 
  def test_for_invalid_input_renders_list_template(self):
    response = self.post_invalid_input()
    self.assertEqual(response.status_code, 200)
    self.assertTemplateUsed(response, 'list.html')
  
  def test_for_invalid_input_passes_form_to_template(self):
    response = self.post_invalid_input()
    self.assertIsInstance(response.context['form'], ExistingListItemForm)
  
  def test_for_invalid_input_shows_error_on_page(self):
    response = self.post_invalid_input()
    self.assertContains(response, escape(EMPTY_ITEM_ERROR))

These are some tests for the view in charge of the lists, but there are also tests to ensure the correctness of our project that test the model of the items and the corresponding form.

Once the code passes all the unit tests and is refactored we run the corresponding functional test to check that everything is correct.

CI/CD Pipeline:

The goal of our CI/CD pipeline is to increase the speed, quality, and reliability of software releases.

we achieved our CI/CD pipeline using GitHub action. We defined different jobs as follows:

Build: what it does is set up the environment on GitHub to run the docker-compose that contains the instruction to run and build the image related to our project image.
Test: it set up the GitHub environment on the GitHub test that we created for our project.
Deploy: we connect our GitHub account to AWS Elastic Beanstalk (EB) to get in charge of deploying our source code.

Conclusion

In conclusion, a todo list app is an essential tool for anyone looking to stay organized and manage their tasks effectively. With a wide range of features, customization options, and integration capabilities, a todo list app can help users to improve their productivity, increase efficiency, and reduce errors. Additionally, many todo list apps provide great security and privacy options to ensure that the data is protected.

GitHub Link: https://github.com/landa44/todoTeam2

Application Link: http://todoteam2app-env.eba-77m4zjcb.us-east-1.elasticbeanstalk.com/