https://github.com/aarthi1720/smart_expense_tracker
📊 A simple React app to track daily expenses. Add expenses, filter by category or date, and see spending visualized with easy charts. Built with React, Tailwind CSS, and localStorage — no backend needed.
https://github.com/aarthi1720/smart_expense_tracker
budget-app datepicker expense-tracker heroicons localstorage lottie-animation personal-finance piechart react-hooks react-toastify reactjs recharts responsive tailwindcss
Last synced: 3 months ago
JSON representation
📊 A simple React app to track daily expenses. Add expenses, filter by category or date, and see spending visualized with easy charts. Built with React, Tailwind CSS, and localStorage — no backend needed.
- Host: GitHub
- URL: https://github.com/aarthi1720/smart_expense_tracker
- Owner: Aarthi1720
- Created: 2025-07-06T18:10:26.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-06T18:32:13.000Z (3 months ago)
- Last Synced: 2025-07-06T19:38:04.658Z (3 months ago)
- Topics: budget-app, datepicker, expense-tracker, heroicons, localstorage, lottie-animation, personal-finance, piechart, react-hooks, react-toastify, reactjs, recharts, responsive, tailwindcss
- Language: JavaScript
- Homepage: https://smart-expense-tracker-nine.vercel.app
- Size: 438 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📊 Smart Expense Tracker
A simple, clean web application to **track income, expenses, balance, and spending categories** — built with **ReactJS** and **Tailwind CSS**. Visualize spending with **charts** and see where your money goes.
---
## ✨ Features
- ✏ Add & edit **incomes** and **expenses**
- 🧪 Filter expenses by **date, amount,** and **category**
- 📃 View **totals** and **category-wise** breakdown.
- 📈 Visual **Pie Chart** for Spending Breakdown
- 🗂 **Summary Cards**: Income, Expense, Balance
- 🧾 View All Transactions in One Place
- 🎨 Clean, responsive dashboard for desktop & mobile
- 📁 Data Saved in **Local Storage**
- 📆 **Datepicker** for customizable date input
- 🔔 Notify using **react-toastify** when added & deleted income and expense
---
## ⚙️ Tech Stack
- ⚛ ReactJS + Context API
- 🎨 Tailwind CSS
- 🔹 Heroicons
- 🧿 Recharts for charts
- 🌌 Lottie for Animations
---
## 📂 Project Structure
📦 SmartExpenseTracker
┣ 📂 src
┃ ┣ 📂 components
┃ ┃ ┣ Home.jsx
┃ ┃ ┣ SummaryCards.jsx
┃ ┃ ┣ ExpenseChart.jsx
┃ ┃ ┣ Transactions.jsx
┃ ┃ ┣ CategoryTotals.jsx
┃ ┃ ┣ AddIncomeForm.jsx
┃ ┃ ┣ IncomeList.jsx
┃ ┃ ┣ AddExpenseForm.jsx
┃ ┃ ┣ ExpenseList.jsx
┃ ┃ ┣ FilterPanel.jsx
┃ ┃ ┣ MobileViewHomePage.jsx
┃ ┣ App.jsx
┃ ┣ index.css
┃ ┣ main.jsx
---
## ❓ Why This Project?
✅ Demonstrates React state management, context usage, conditional rendering, and responsive design.
✅ Clean and clear component-based architecture.
✅ Perfect mini project to showcase skills on your resume or portfolio.
---
## 🤝 What I Learned
Built with React hooks, context for global state, and reusable components. Practiced clean UI design and responsive layouts.
---
## 📸 Preview
