Technical Document for analyzing the implementation some features

Dragable

## Overview

Throughout the development the main focus will be on restructuring the code base to be optimised for better testing, easy navigations and readability, to help us catch errors easily and debug typescript will also be set up.
For the frontend of the application I will break down the application into atomic components for easy testing.
For the backend a Routes folder and Services will be created. These 2 new folders will help make the backend easily scalable and splitting some of the code to make the backend easier to understand and test. The routers folder will have all the routes needed in the backend while the services will perform all the logic related to each route and endpoint.

### 1. Sorting task

Description:
This feature is to build a drag and drop sorting feature on the existing list of todos in the application. The main goal of this feature is to allow a user to sort a todo by dragging it across the list of todos.
To accomplish this task I will add some new features to the frontend and backend of the application.

Frontend:
- Extending the UI to allow for drag and drop functionality, for this i will use the React-beautiful-dnd package
- I will then create a component called DraggableList which will contain all the code to handle the drag and drop, this component will receive our todos and will return a callback function onDragEnd which will be triggered when a todo has been dragged and dropped, this callback returns and source and destination which can be used to update the UI and reorder the components.
- When onDragEnd is called a function to reorder the todos on the frontend will be called while the API request is made to the backend, this will improve user experience. To persist this data we will also save this in the backend such that when the UI is refreshed our data remains sorted.

Backend:
To add the drag and drop sorting functionality in our backend we will need a new endpoint to sort the todos accordingly, with this new endpoint we will also add a new value in the todo schema called index_number this will help keep track of each todo’s position in the list.
- To handle this new end point, we will receive the source index (prevEleIndex) and destination index (nextEleIndex) of the current todo which is being dragged, We would use this to update the MongoDB collection accordingly

Time estimate:
The estimated time for this implementation of this feature is 2 days.

### 2. Due dates

Description:
Due date is going to be the timestamp of when a todo is due, this timestamp will also be used to filter the list todos by when they are due, this will help a user to keep track of all their todos better.
To accomplish this feature we will need to add a new value to store the due date in the todo schema when creating a todo, and on the UI a date picker will be added accordingly to allow a user to select due dates which will be sent to the backend.

Frontend:
- In the frontend we will need to add a date and time picker to allow the user to select when a todo is due and also update the request to send this data back to the backend.
- To filter the todos, will add a url parameter to the request being made to the backend and this will be used to filter the todos in the database to give us only the todos for that due date.

Backend:
- We will add a new value called dueDate to save the due date of each todo in the database and when filtering the todos a url parameter will be added to the get todos, this url parameter will contain the due date and will help us write the query to filter the todos.

Time estimate:
The estimated time for this implementation of this feature is 1 day

### 3. Supporting a large number of tasks

Description:
This feature will add pagination to the application both in the frontend (how the list of todos is being fetched) and in the backend (how todos are being gotten from the database and returned to the user).

Frontend:
- When fetching data from the frontend we would also need to include a url parameter to tell the backend which page to fetch data from.
- we would also need to add a functionality to fetch more data when we reach the last todo in the list of todos, we can use the IntersectionObserver and the reference of the last todo to know when the todo is visible on the screen and run a function to fetch more todos.

Backend:
- We would need to add the page number as a url parameter to receive the page number (pageNum) to fetch todos from. Along with this we will use the pageSize (20) to construct a query which will allow us to receive only the required chunk of the data at a time.

Time estimate:
The estimated time for this implementation of this feature is 1 day