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.