Expensely

Project Overview

Expensely is a personal finance application that helps users track expenses, manage budgets, and review spending patterns. It is built with React and TypeScript and deployed on Vercel.

I built Expensely alongside AI agent tools so I could learn how to code with AI. The project was a place to practice new build tools, the Git CLI, and error testing. For more complex functions, I used the agent as a tutor: I asked it to explain the approach, then implemented the solution and checked the result in the app.

Live Demo

Key Needs

Key Features

• Inline Editing: Add, edit, and categorize expenses with custom categories
• Data Visualization: Interactive charts and graphs for spending analysis
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Local Storage: Data persistence using browser storage
• State Management: State management using React hooks and context API
• Performance Optimization: Optimized rendering and data handling for smooth user experience
• Accessibility: Ensured full keyboard navigation and screen reader compatibility

Building with AI

Expensely was a learning project as much as a product. I worked with AI agent tools through the whole build, using them to understand unfamiliar tooling and to talk through harder parts of the code.

• Build tools: Learning the project toolchain by setting it up, running builds, and seeing how each piece fits together
• Git CLI: Practicing commits, history, and change management from the command line
• Error testing: Reading failures, tracing the cause, and confirming the fix
• Tutor for complex functions: Using the agent to explain harder logic before writing it into the application

Technical Implementation

The application was built using modern web technologies and best practices:

• React 18: Latest React features with hooks and functional components
• TypeScript: Type-safe development for better code quality and maintainability
• CSS Modules: Scoped styling for component isolation
• Chart.js: Interactive data visualization for financial insights
• Vercel Deployment: Fast, reliable hosting with automatic deployments
• Responsive Design: Mobile-first approach with Tailwind CSS

Color Scheme