Big Tech – Financial Health Tracker Tool

---

Overview

Welcome to the Financial Health Tracker Tool, a robust solution designed to track the financial well-being of companies. Crafted with react, typescript, vite, and styled-components, this tool integrates seamlessly with axios for API calls, chart.js and react-chartjs-2 for dynamic chart rendering, moment for precise date formatting, and react-datepicker for an intuitive date picker experience.

Links

• Live Site: Explore the live website.
• Client-side Github Repo: Dive into the client-side GitHub repository for this project.
• Server-side Github Repo: Discover the server-side GitHub repository for this project.

Home Page Preview

---

How to run

Follow these steps to run the project:

1. Clone the project (both client and server-side) from the GitHub repo.
2. Run yarn install to install all the dependencies.
3. Run yarn run dev to start the project.
4. To connect to the local backend server, modify the BASE_URL in the src/context/global.tsx file to http://localhost:5000/api/v1/.

My Process

Initiated to create a modern and scalable backend system with a beautiful user interface, this project showcases a visually appealing UI coupled with a robust server. While manual testing was not conducted, the implementation in TypeScript contributes to a more reliable codebase.

The user can monitor their business account’s status, add or remove transaction histories, and analyze the financial health status on the dashboard. Although the project meets the specified requirements, further enhancements could be made with additional features, automated testing, and improved scalability.

Future Improvements

Opportunities for improvement abound, and future enhancements could include:

• Implementation of automated testing
• Addition of more features to the dashboard
• Expansion of features in the transaction history page
• Introduction of user profile pages
• Implementation of user authentication, and more

Built With

• react, vite, typescript – Framework & Language
• axios – For API calls
• chart.js, react-chartjs-2 – For dynamic chart rendering
• moment – For precise date formatting
• react-datepicker – For an intuitive date picker
• styled-components – For styles

---

Features

Users can:

• Experience a beautiful, animated, and responsive landing page
• View dynamic data reflecting their financial health status
• Add or remove transaction histories by clicking on the income or expense tabs
• Visualize their financial health status through an interactive dashboard chart
• Access real-time information on current balance, minimum/maximum expenses, and income

---

For details about the backend of this project, please refer to the backend repository. Explore the future of financial tracking with the Financial Health Tracker Tool!