Expense Tracker — Marketing Mojito Intern Assignment

A React + Vite expense tracking app with live currency conversion via Frankfurter.app. Live Demo: https://expense-tracker-drab-gamma-90.vercel.app/

Project Structure

expense-tracker/
├── index.html
├── package.json
├── vite.config.js
├── SUBMISSION_NOTE.md
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── components/
        ├── ExpenseForm.jsx
        ├── ExpenseList.jsx
        ├── SummaryPanel.jsx
        └── CurrencyConverter.jsx

Getting Started

Prerequisites

• Node.js 18+ installed

Install & Run Locally

# 1. Install dependencies
npm install

# 2. Start dev server
npm run dev

# 3. Open http://localhost:5173

Build for Production

npm run build
# Output goes to /dist

Deployment to Vercel (Recommended)

1. Push this project to a GitHub repository.
2. Go to vercel.com and click Add New Project.
3. Import your GitHub repo.
4. Vercel auto-detects Vite — leave all settings as default.
5. Click Deploy. Your live URL will be ready in ~1 minute.

Deployment to Netlify

1. Push to GitHub.
2. Go to netlify.com → Add new site → Import from Git.
3. Set build command: npm run build
4. Set publish directory: dist
5. Click Deploy site.

Features

• Add expenses with name, amount (USD), and category
• Delete any expense entry
• Running total that updates live
• Category breakdown with proportional bars
• Live currency conversion (EUR, GBP, INR, JPY, CAD, AUD) via Frankfurter.app
• Graceful loading and error states for the currency API
• Fully responsive: 1600px desktop and 414px mobile

Tech Stack

• React 18 with Vite
• Plain CSS (no UI library)
• Frankfurter.app for exchange rates
• React hooks only: useState, useEffect