The App • Business Requirements • Test Cases • The Development Process • Technologies • Context Data • How to run • License • Author
This app consists of a page where you can simulate saving towards a saving goal, for example "Buy a house". Choose the amount you want to save, the date you plan to reach that goal and see how much you need to save each month and for how many months, until you reach your goal.
- ✅ The user should only be able to enter number on the total amout input;
- ✅ The user should only be able to enter positive values on the total amout input;
- ✅ The user should see the total amount displayed formatted following the american pattern;
- ✅ The user should only be able to select future months on the date input;
- ✅ The user should see the next month when clicking on the right arrow of the date input;
- ✅ The user should se the previous month when clicking on the left arrow of the date input;
- ✅ The user should be able to select the next month, of the date input, when typing the Right arrow key on the keyboard;
- ✅ The user should be able to select the previous month, of the date input, when typing the Left arrow key on the keyboard.
| Test Case ID | Test Case Description | Test Steps | Test Data | Expected Results | Actual Results | Pass/Fail |
|---|---|---|---|---|---|---|
| #01 | The user should be able to see the correct monthly amount displayed depending on the total amount entered and the selected date. | 1. Enter totalAmount; 2. Select reachDate. |
currentDate = January 2022; totalAmout = 5,000; reachDate = June 2022; totalMonthlyDeposits = 5; |
monthlyAmout = 1,000; | monthlyAmout = 1,000; | Pass |
| #02 | The user should be able to see the correct monthly amount displayed depending on the total amount entered and the selected date. | 1. Enter totalAmount; 2. Select reachDate. |
currentDate = January 2022; totalAmout = 5,000; reachDate = February 2022; totalMonthlyDeposits = 1; |
monthlyAmout = 5,000; | monthlyAmout = 5,000; | Pass |
| #03 | The user should be able to see the correct monthly amount displayed depending on the total amount entered and the default date. | 1. Enter totalAmount. | currentDate = January 2022; | monthlyAmout = 5,000; | monthlyAmout = 5,000; | Pass |
| #04 | The user should be able to see the correct monthly amount displayed depending on the default total amount and the selected date. | 1. Select reachDate. | currentDate = January 2022; [default] totalAmout = 0; reachDate = March 2022; totalMonthlyDeposits = 2; |
monthlyAmout = 0; | monthlyAmout = 0; | Pass |
Before starting the development, I meticulously analyzed the business rules, rewriting them so that I could understand what needed to be delivered, and I took some time to think about the most important test cases in order to validate the use cases. I also tried to anticipate some technical decisions (not all, as some will always come up in the middle of the process).
For this application I chose to use the Context API instead of Redux. The reasons that led me to this decision were: The application has only one page, proving to be simple in terms of sharing state. The application would not require complex management of state data, basic information sharing would be enough. I would need to be able to perform the setup quickly (due to the short time to deliver) and this I knew the Context API would offer me.
An interesting convention that I adopted for this project was to keep the styles in separate files, and when importing use the letter “S”. The result is something like “<S.Component>”, which can help future code contributors to differentiate “styled components” from common components.
To perform operations between dates and for the masking of monetary values, I preferred to use libs, which helped to save me time.
Before start developing, I quickly created a TO-DO list so I could orient myself towards my progress. It also helped me prioritize the most important tasks, the ones that would add the most value to the end user. I used TDD (Test Driven Development) to implement code related to business rules. In addition to guaranteeing quality for my commits, this technique helps me to think simple and not get stuck looking for crazy solutions.
If I had more time to work on the application and imagining a scenario in which I could contribute to the evolution of this product together with a team, I believe I could work on some improvements.
To improve the User Experience I would definitely review all the flows with a Screen Reader and make the necessary changes to ensure the application is accessible. Also, I would suggest to my team that we put some dialog on the screen to allow users to tell how their experience using the application is going. The feedback would certainly help to improve the experience offered by the product.
In terms of maintainability, it would be important to create more atomic components that could serve different parts of the application, such as Button, Text and Alert. And also use variables for colors, facilitating future changes.
For a quality code I would propose to my team practices such as using a hook (with husky lib) that would execute the unit tests before a commit, and to increase the reliability of the team's deliveries, I would implement E2E tests using a tool called Cypress (which I already had the opportunity to use in a previous project) or even the Testing Library.
- React JS
- Jest
- React Testing Library
- Styled Components
- React Currency Input Field Component
- Moment.js
This project uses the React Context API. The three main components (TotalAmountInput, ReachDateInput and MonthlyAmountSection) interact to the data provided by the context as follows:
Clone the repository:
$ git clone https://github.com/Matheuslm10/savings-goal-planner.git
Enter the directory:
$ cd savings-goal-planner
Install the dependencies:
$ yarn install
Run the application:
$ yarn start
Now you can access http://localhost:3000 in your browser.
yarn lint
yarn format
yarn test
This repository is licensed by MIT LICENSE. For more detailed information, read the LICENSE file contained in that repository.
👋 Contact me!
