https://github.com/pikuzamarie/investment-calculator
Calculate investment results over a gived period | React, Vite, CSS
https://github.com/pikuzamarie/investment-calculator
derived-data investment-calculator react-hooks reactjs
Last synced: about 2 months ago
JSON representation
Calculate investment results over a gived period | React, Vite, CSS
- Host: GitHub
- URL: https://github.com/pikuzamarie/investment-calculator
- Owner: PikuzaMarie
- Created: 2025-01-22T15:24:16.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-22T15:40:05.000Z (4 months ago)
- Last Synced: 2025-01-30T20:44:55.783Z (4 months ago)
- Topics: derived-data, investment-calculator, react-hooks, reactjs
- Language: JavaScript
- Homepage: https://investment-calculator-by-marie.netlify.app/
- Size: 804 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Investment Calculator
Plan your investment route with this app!
## Game UI
## How to run the project locally
### 0. Prerequisities:
- If you don't have `Node.js` on your PC, install it [here](https://nodejs.org/en/download) (use version **20.18.0** or above)
- Verify `node` version
```bash
node -v // Should print "v20.18.0" or above.
```
- Verify `npm` version
```bash
npm -v // Should print "10.9.0" or above.
```
### 1. Clone the repository:
```bash
git clone https://github.com/PikuzaMarie/investment-calculator.git
```
### 2. Go to the directory:
```bash
cd investment-calculator
```
### 3. Install dependencies:
```bash
npm install
```
### 4. Start the project
It will automatically run in your default browser at http://localhost:3000/
```bash
npm run dev
```
## Features
- [x] Implement features adhering to technical task to [task](/docs/taskDescription/task.md)
- [x] Derive neccessary data from single state `userInputData`
- [x] Calculate investment result with [utility function](src/common/utils/calculateInvestmentResults/calculateInvestmentResults.js)
- [x] Display [ResultTable](src/components/ResultTable/ResultTable.jsx) if `duration` value is valid or [InfoMessage](src/components/InfoMessage/InfoMessage.jsx) otherwise
- [x] Customize settings via [inputsConfig](src/common/constants/inputsConfig/inputs-config.js) and [resultTableConfig](src/common/constants/resultTableConfig/result-table-config.js)
## Extra
- [x] Clean code with the use of `ESLint`, `Prettier` & `lint-staged`
- [x] Deploy on Netlify to [calculate your investment](https://investment-calculator-by-marie.netlify.app/)
## Contribution
This project was developed using materials from the`'React - The Complete Guide 2025'` instructed by `Maximilian Schwarzmüller` at `Academind`: [link to github repo](https://github.com/academind/react-complete-guide-course-resources/blob/main/attachments/05%20Essentials%20Practice)