Expense Tracker Track personal expenses with category-based organization, running totals, and spending summaries.

The tool uses React's useState and useMemo hooks to manage its state and compute derived values. When a user adds an expense, it creates a new object with the provided details and adds it to the expenses array using the spread operator. The id of each expense is generated using the Date.now() function, which returns the number of milliseconds since the Unix epoch. This unique identifier allows for efficient deletion of individual expenses from the array.

The category summaries are computed using the reduce method on the expenses array, where each expense's amount is added to a running total for its respective category. The percentages are then calculated by dividing each category's total by the grand total and multiplying by 100. This computation is memoized using useMemo to prevent unnecessary recalculations when the component re-renders.

When exporting data to CSV, the tool creates a Blob object containing the formatted expense data and uses the URL.createObjectURL method to generate a downloadable link. The file format follows the standard CSV structure, with each row representing an individual expense and columns for date, description, category, and amount. The fmt function is used to format amounts as floats with two decimal places using the toLocaleString method.

The color-coded system for categories uses a predefined object, CAT_COLORS, which maps each category to a specific CSS class. This allows for consistent styling of category labels throughout the interface. The tool also utilizes React's event handling mechanisms, such as onClick and onChange, to respond to user interactions like adding expenses, filtering by category, and exporting data.