Expense Tracker

Overview

Expense Tracker is a responsive React-based web app that allows users to add, view, delete, categorize, and analyze their expenses. It includes live total calculations, category-based breakdowns, localStorage persistence, and real-time currency conversion using the Frankfurter API. The app was built with React, Vite, JavaScript, and custom CSS. :contentReference[oaicite:0]{index=0}

Challenge

The main challenge was building a clean frontend app that handled more than just basic form input. The app needed shared state across multiple components, persistent data after refresh, category summaries, API-based currency conversion, loading/error handling, and a responsive layout without relying on external UI libraries. :contentReference[oaicite:1]{index=1}

Solution

I built the app using a component-based React structure with reusable pieces like an expense form, expense list, summary panel, and currency converter. State is managed with React hooks, while localStorage keeps expenses saved between sessions. Currency conversion logic is separated into a custom hook, making the API integration cleaner and easier to maintain. :contentReference[oaicite:2]{index=2}

Outcome

The result is a deployed expense tracking app that demonstrates practical frontend development skills: React state management, reusable components, API integration, local data persistence, input validation, responsive design, and deployment on Vercel. It is a solid early full-stack/frontend portfolio project because it shows real user interaction and data flow instead of just static UI. :contentReference[oaicite:3]{index=3}

Highlights

• Built with React, Vite, JavaScript, and custom CSS.
• Added expense creation, viewing, deletion, and category-based breakdowns.
• Implemented live total calculation using React state and memoized calculations.
• Integrated real-time currency conversion with the Frankfurter API.
• Persisted user expenses using localStorage.
• Added loading states, input validation, and error handling.
• Designed a responsive layout for desktop and mobile screens.
• Deployed live on Vercel.