A clean and intuitive expense tracking web application built with React and Vite, deployed on GitHub Pages.
🔗 Live Demo: kanan010506.github.io/expense-tracker
Expense Tracker is a lightweight single-page application that helps you keep track of your income and expenses. It provides a simple and fast interface to add, view, and manage transactions so you always know where your money is going.
- Add income and expense transactions
- View current balance at a glance
- Track transaction history
- Delete individual transactions
- Responsive design that works on desktop and mobile
- Fast, client-side only — no backend required
| Technology | Purpose |
|---|---|
| React 19 | UI library |
| Vite 7 | Build tool & dev server |
| gh-pages | Deployment to GitHub Pages |
| JavaScript (ES Modules) | Application logic |
| CSS | Styling |
Make sure you have the following installed:
- Node.js (v18 or higher recommended)
- npm (comes with Node.js)
- Clone the repository
git clone https://github.com/kanan010506/expense-tracker.git
cd expense-tracker- Install dependencies
npm install- Start the development server
npm run dev- Open your browser and navigate to
http://localhost:5173
| Script | Description |
|---|---|
npm run dev |
Start the local development server |
npm run build |
Build the app for production into the dist/ folder |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint to check for code issues |
npm run deploy |
Build and deploy the app to GitHub Pages |
expense-tracker/
├── public/ # Static assets
├── src/ # Application source code
│ ├── components/ # React components
│ ├── App.jsx # Root application component
│ └── main.jsx # Application entry point
├── index.html # HTML entry point
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
└── package.json # Project metadata and dependencies
This project is configured for deployment to GitHub Pages using the gh-pages package.
To deploy:
npm run deployThis will automatically build the project and push the dist/ folder to the gh-pages branch of the repository.
The homepage field in package.json is already set to:
https://kanan010506.github.io/expense-tracker/
Made with ❤️ by kanan010506