Big Tech – Financial Health Tracker Tool


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.

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


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!

About author


Kamrul Saad is a professional web developer with a passion for the MERN stack and WordPress. With over 2 years of experience, he crafts seamless digital experiences that blend creativity and functionality. Beyond coding, he explores the realms of digital marketing, seamlessly integrating strategies to enhance brand visibility.
Kamrul Saad
Related posts

Saad Photography - Capturing Moments, Creating Memories

Read more

Netflix-redesign - Redefining the Movie Streaming Experience

Read more

Shikkhar Alo - A Modern Learning Management System

Read more
Become a Trendsetter
Sign up for My Weekly Digest and get the best Technology trends tailored for you.

Leave a Reply

Your email address will not be published. Required fields are marked *