Expense Tracker App: Overview

Deployment

This app is being deployed using Netlify
Link to app: https://expense-tracker-react-ts-app.netlify.app

Motivation Behind Project

As a university student it is very important to be able to keep track of where I am spending my money. Many of the expense tracking websites and apps either lack functionality or in design.
I decided to create an expense tracking app that has both the functionality and the design.
This project was also a great chance for me to learn the Mantine UI library.

Resources and Technologies used

Technologies: ReactJS, React Router, React Icons, TypeScript, Mantine UI, HTML canvas API, Local Storage, and ViteJS.
React Docs Beta: https://beta.reactjs.org/
React Router Docs: https://reactrouter.com/en/main
React Icons Website: https://react-icons.github.io/react-icons
Mantine UI Docs: https://mantine.dev/pages/getting-started/
Canvas API Docs: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Quick Description of app

• This app includes the common expense tracking features such as a total budget and expenses counter as well as transaction history.
• The user is able to reset both budget and expenses amount as well as delete a transaction. After a transaction is deleted the effect it had on the budget / expenses is undone.
• Clicking on a transaction reveals more information about it as well as giving the user the ability to delete the transaction.
• The app also includes the ability to categorize expenses. The user can pick out of 3 pre-existing categories or create their own.
• The user is also able to view their Budget and Expenses in a pie chart to easily visualize their financial state.
• The user is also able to select either a dark or light theme for their app.
• All user's data is stored in their browser's local storage.

What I Learned

• I advanced my knowledge of types and type safety in TypeScript and became more familair with the langauge.
• I learned more about React hooks, mainly the useContext hook and how it can be very useful when state is passed down multiple components.
• I learned how to use Mantine UI library and the components and hooks it provides.
• I learned about HMLT canvas API and how to use it to draw a simple pie chart.
• I learned how to use some external React libraries such as react router and react icons.
• I learned how to use ViteJS to create a React project that uses TypeScript as an alternative to using create-react-app and manually integrating TypeScript.
• I became more familar with inline CSS styling in React componenets.
• I became more familair with JavaScript and its built in methods for arrays such as forEach, map, filter and reduce.

Steps going forward

• I plan to learn how to use Redux for state management.
• I plan to experience with other UI libraries such as Material UI and Chakara UI.
• I plan to make this app mobile responsive throught CSS media queries or using TailwindCSS
• I plan to learn how to add a backend to the expense tracker app and use a database (most likely MongoDB) to store the data instead of local storage.