A modern and minimal finance tracking web app built using React + Tailwind CSS.
Track your income, expenses, and manage transactions with a clean, smooth, and responsive UI.
🔗 https://transact-your-transactions.netlify.app
- ➕ Add new transactions (Income / Expense)
- 🗑️ Delete transactions instantly
- 🔍 Real-time search functionality
- 🎯 Category-based filtering (Food, Shopping, Housing, etc.)
- 💰 Auto-calculated balance, income, and expenses
- 💾 Persistent data using localStorage
- 🎨 Modern UI with smooth animations & micro-interactions
- ⚡ Fast and fully responsive design
- ⚛️ React (Vite)
- 🎨 Tailwind CSS
- 🧠 Context API (Global State Management)
- 🎯 Lucide React Icons
- 💾 Browser localStorage (Data Persistence)
src/
│── components/
│ ├── Navbar.jsx
│ ├── Balance.jsx
│ ├── AllTransactions.jsx
│ ├── NewTransaction.jsx
│
│── contexts/
│ └── TransactionContext.jsx
│
│── App.jsx
│── main.jsx
git clone https://github.com/dhruvaparnathi/transact.git
cd transact
npm install
npm run dev
npm run build
Transactions are automatically saved and synced using localStorage, ensuring data persists even after page refresh.
Global state management is handled efficiently using React Context, avoiding prop drilling and keeping components clean.
State updates use functional updates to prevent stale data issues and ensure consistency.
- Smooth hover & scale interactions
- Clean and minimal card-based layout
- Smart transaction highlighting (income vs expense)
- Consistent spacing and typography
- Subtle animations for better UX
- 📊 Charts & analytics dashboard
- 🌙 Dark mode support
- ☁️ Backend integration (Firebase / Node.js)
- 🔔 Smart notifications & alerts
- 📱 Mobile app version (React Native)
Dhruv Aparnathi
- GitHub: https://github.com/dhruvaparnathi
- LinkedIn: https://www.linkedin.com/in/dhruv-aparnathi-506b58306/
If you like this project, consider giving it a ⭐ on GitHub!