A React-based tool designed to visualize the growth of investments through compound interest.
This tool automatically calculates and compounds interest, providing detailed reports that include both charts and tables. Users can easily track their estimated total growth over the years and watch how their interest adds up alongside the money they've invested. It's a simple way to see how your investments grow.
You can explore and play around with the calculator by accessing a live version available here.
Below is an example report based on an initial investment of $10,000.00, with monthly contributions of $100.00 and an annual interest rate of 6% over 25 years:
- Clone the repo:
git clone https://github.com/ryanbalieiro/react-compound-interest-calculator
- Go to the project's root folder and use npm to install all required components:
npm install
- Launch the project in developer mode:
npm run dev
- For a production build, go to
vite.config.jsand configure the base directory for your application. This setting establishes the primary path under which your website will be hosted.
export default defineConfig({
base: '/',
plugins: [react()],
})- Run the following command to compile the project into
dist:
npm run build
- If your deployment is targeted at GitHub Pages, ensure to run the following build command:
npm run ghdeploy
This command will build the project and make a copy of index.html named 404.html inside the dist folder, serving as a workaround to the problem discussed in detail at https://stackoverflow.com/questions/48521177/404-when-reloading-a-vue-website-published-to-github-pages.
This project was created by and is maintained by Ryan Balieiro. It was made possible using the following libraries and frameworks:
- React – A popular JavaScript library for building UIs.
- Vite – A frontend tool for building web applications
- React Router Dom – A library for routing and navigation in React applications.
- ChartJS – A JavaScript library for creating charts.
- FontAwesome – A library of icons for web projects.
- Bootstrap 5 – A responsive CSS framework.
Code released under the MIT license.