As per my daily job, we're required to track the time we invest in each assigned task and upload weekly to an Excel summary provided by management. It is very easy to forget when did you started each task, the exact amount of time invested, hard to manage when you're multitasking two or more tasks, etc...
This causes, not only frustration to the employee but also to management, as they cannot trust the values they're gathering as they're not 100% accurate.
This project attempts to solve this problem by also providing the end-user a better way to self-manage work and rest times by using the famous Pomodoro technique, if he or she wishes to abide to it.
This project was initially designed to be my User Centric project however as I started developing I realized that it was getting too much out of scope so I decided to leave it on the shelf as my project to be for the data centric project. I didn't know at that time that the project example that Code Institute will provide is also a task manager application.
However, after discussing this with my mentor, we've considered this to be complex enough as follows:
- The original project was server side rendered with Flask as render engine. This project uses Flask as the data access layer piece providing RESTful APIs that will be consumed by a frontend app.
- The original app is not a Single Page Application and needs to re-render on each user action. This application use ReactiveX module to handle state changes and provide a seemless experience to the user without navigating away.
- This application implements unit testing in both frontend and backend, using standard libraries for both system so the final product is more resilient to code changes.
I've noted sections that belong to the old project and are no longer relevant, to keep track of them so the reviewer can check the improvements upon the spec, if he or she wishes to do so.
The intended audience of this website is a person who is going to be doing a job that can be separated into tasks and where time needs to be tracked, either for management request, or to ensure the user that enough breaks are taken for both content assimilation or avoiding interrumptions.
An example of such tasks are:
- Software Development
- Studying
- Physical work
- Exercising
- House chores
- ...
By adding a mobile-first design approach we allow the user to not have to rely in a computer to track the time and remaining tasks to do.
- As a user, I want to be able to store the application data, so time and task completion are not lost after the web is closed. (*New* This used to be a should have requirement and has been moved to an important part of the features)
- As a user, I want to be able to start and stop the timer, so that I can track the time spent on each task assigned.
- As a user, I want to be able to record tasks in the app, so that I can better organize my time an plan ahead.
- As a user, I want to be able to choose the type of timer between Pomodoro timer and regular timer so I can pick the best that suit my needs regarding the task at hand.
- As a user, I want to be able to change the state of the tasks, so that I can mark those that I complete and tag those that were not completed with some useful information.
- As a user, I want to be able to visualize a summary of the time spent using a variety of charts, so that I can have a better picture of the time spent for my own records or for management reporting.
- As a user, I want to be able to import multiple tasks from a file or a structured string format, so I don't spend too much time adding new tasks to the system.
- As a user, I want to be able to export the data of the application, so I can use it in different applications or send it as a report to my supervisors.
- At this point further API integration is out of scope. In the future, it would be great if this can be integrated with other task management tools like Trello, project management tools like JIRA or even software development tools like Github or Visual Studio.
Initial Paper Mockup:
Basic Wireframe Setup for Mobile view and Desktop View
State Machine for Timer Functionality
State Machine for Task Status
- Task Manager: Allows the user to track the status of his workload by creating, updating and progressing the tasks assigned to him
- Timer: Allows the user to start and stop a timer to check the time spent on a certain task. This timer can later be added to a task to keep track of how long each tasks takes.
- Settings: Allows the user to configure the settings of his application.
- Reports: Gives you a bit of insight in how you're doing in terms of productivity and efficiency.
- Possibility to switch between different forms of storage i.e. LocalStorage, Filesystem, Azure Blobs, Firebase, etc... The data layer interface can be used for these implementations into angular services, and then, the user could choose to inject one service or another.
- Import and Export the data from/to CSV or tabulated format to be reused on other applications like Excel.
- Connectivity to other apps to provide notifications, statistics or any other form of app integration.
- This project's frontend was scaffolded by Angular CLI version 8.0.2 which installs the following technologies (among others):
- rxjs: Introduces the concept of reactive programming and observables with the ReactiveX library.
- Typescript: Adds typing and additional constructs not present on the JavaScript language but common to other languages to increase resilience to your code.
- Jasmine and Karma for testing
- The angular cli tooling itself which provides compilation, bundling and minification of the JavaScript code, as well as support to older browsers via Polyfills.
- Angular Material was used for styling and providing page structure and responsiveness as well as a common theme.
- Highcharts library for generating graphs and plotting data.
- FontAwesome library to get scalable svg icons to be used throughout the app.
*New* No backend was designed at the start of the project as it used to be an optional requirement
- Python Flask and PyMongo libraries have been used to provide a suitable backend in the form of a RESTful API.
- Python Unittest was used for testing purposes on the python code.
- Postman and Postmanerator by Aurélien Baumann to test and generate the API documentation
The full API documentation can be found in the Postman public repository.
- This project has been created using Visual Studio Code IDE in a Node v.10.13 environment
- Project organization and task management provided by GitHub and GitHub Projects.
- All feature branchs within a sprint are squashed and merged into their respective sprint. Each sprint is Squashed and Merged into the master branch. Each Github issue and pull request still retain the history of commits against the branch or feature. Non-sprint branches are deleted after merge.
- Continuous Integration/Development automation provided by Travis CI and Github Actions.
- Heroku is used to host the data layer in form of a RESTful API and provide Continuous Delivery *New*.
- MongoDB Atlas is our database provider *New*.
- Code quality and analysis provided by SonarQube via its cloud service SonarCloud
- Snyk is used to analyze vulnerabilities within dependencies.
Click on the badges at the top of this file to check the build status and quality metrics.
Most of the services have been automated although due to the complexity nature of the application getting a high code coverage proved to be out of scope and will leave it for a future learning experience. The UI interaction is not automated, please follow the Test Cases described in the appropriate section.
Run npm run test to obtain a report of the tests with the no-watch option enabled.
The command ng test is also available just to execute the unit tests via Karma with the watch option enabled, useful for development purposes.
A Code Coverage report is also available in SonarCloud
The file test_app.py can be run with any test runners for Python. If none is available, executing the command with python test_app.py will also run the tests, however, some of the test data will be committed to the database as a result.
A detailed Test Plan can be found in the following link
A strange bug surfaced while testing using the Angular TestBed suites. In this case, while running the tests in Travis, I will often get compile FAILED Uncaught [object Object] thrown error which never happens in local and does not cause any issues with the application.
I spent several days debugging it and was unable to find the source. In the end, as this is something that only affects the testing suite I've decided to leave it in the backlog. Rerunning the CI script will often autorecover from this bug.
The application should be compatible with the latest versions in all browsers thanks to the use of polyfills. There are some fields that behave erratically in Internet Explorer but the application is functional despite these graphic issues
| Vendor | Version | Compatibility status |
|---|---|---|
| Google Chrome | 76.0.3809.132 | Fully Compatible |
| Mozilla Firefox | 68.0.1 | Fully Compatible |
| Microsoft Edge | 42.17134.1.0 | Fully Compatible |
| Internet Explorer | 11.950.17134 | Functional, with some visual errors due to CSS |
This project was created using the Angular CLI which implements webpack under the hood to bundle all the files and create several JS files that contain the whole project structure.
I used TravisCI to automate the deployment process. On each push and pull request, Travis will create a container where it will do a fresh deployment of my app, run all the tests, create a production build and deploy it to the gh-pages branch. This is all configured on the file .travis.yml.
*New* The backend is provided by Heroku. I have a different github repository where all the backend is implemented connected to Heroku. On each push, Github will analyze my tests and if they pass Heroku will pick up the build and deploy it as a separate server. Heroku has internally configured a set of environment variables where all the secrets are stored (i.e. the database user, password and connection string). The YML script to automate this can be found in the .github\workflows\ folder in that repository.
This repository has been included as Git submodule so it's also present as reference on this project.
Requirements: Node 10.6 and NPM
In order to run your project locally just do:
npm install
npm start
This will run the project in development mode. To get a production build after npm install run:
npm run build
Further configuration can be done in terms of building and deploying. See the Angular Documentation for more details.
*New* No backend was designed at the start of the project as it used to be an optional requirement
Requirements: Python 3.6 or higher. Python 2.7
Before start: As this code is included by using submodules, it requires to be pulled via command git submodule update --init --recursive. The code shall be available in the folder Code-Institute-Data-Centric-Backend
To setup the backend first of all a MONGO_URI string must be provided, either as a Environment Variable (recommended) or by updating the line app.config["MONGO_URI"] = os.environ.get("MONGO_URI") with the required string. A database named data_driven must be present to work.
Then navigate to the folder and execute python app.py
- The CORS implementation provided by the backend was suggested by Zhangqy in this Stackoverflow post
- To implement the testing on the backend I followed this tutorial by kenya-tech
- The timer implementation with observables was done following a tutorial by Wojciech Trawiński in his Medium blog and adapted to the current needs of the application.