https://github.com/devhabeeblateef/expense-tracker
A simple, user-friendly budget management application that allows users to track income and expenses. This project is built to practice using the Context API for state management in React and is a perfect starting point for beginners learning global state management.
https://github.com/devhabeeblateef/expense-tracker
mern-project mern-stack react reactjs
Last synced: 24 days ago
JSON representation
A simple, user-friendly budget management application that allows users to track income and expenses. This project is built to practice using the Context API for state management in React and is a perfect starting point for beginners learning global state management.
- Host: GitHub
- URL: https://github.com/devhabeeblateef/expense-tracker
- Owner: devhabeeblateef
- License: mit
- Created: 2024-10-29T08:58:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T22:39:49.000Z (over 1 year ago)
- Last Synced: 2025-04-07T17:43:32.550Z (about 1 year ago)
- Topics: mern-project, mern-stack, react, reactjs
- Language: JavaScript
- Homepage: https://expense-tracker-gilt-omega.vercel.app
- Size: 179 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Budget Expense App
Live Link: https://expense-tracker-gilt-omega.vercel.app/
A simple, user-friendly budget management application that allows users to track income and expenses. This project is built to practice using the Context API for state management in React and is a perfect starting point for beginners learning global state management.
## Features
- **Add Transaction**: Log income and expense transactions.
- **Track Balance**: View your current balance, total income, and total expenses.
- **Global State Management**: State is managed across components using Context API and `useReducer`.
## Technologies
- **Frontend**:
- React
- Context API for global state management
- CSS for basic styling
## Code Structure
- **`App.js`**: Main component that wraps components with the `GlobalProvider` to access global state.
- **Components**:
- `Header`: Displays the app title.
- `Balance`: Shows the current balance.
- `IncomeExpenses`: Displays income and expense totals.
- `TransactionList`: Lists all transactions.
- `AddTransaction`: Form to add new transactions.
- **Context and Reducer**:
- `GlobalState`: Contains the global context, provider, and reducer logic for managing state changes.
## Planned Upgrades
This app will be expanded into a full-stack application using the **MERN stack**:
1. **MongoDB**: Database to store user transactions.
2. **Express & Node.js**: Backend to handle RESTful API requests.
3. **React**: Frontend will remain in React but will connect to the backend for persistent data storage.
4. **Authentication**: Add user authentication for personal budget tracking.
## Installation
1. **Clone the repository**:
```bash
git clone https://github.com/your-username/budget-expense-app.git
cd budget-expense-app
```
2. **Install dependencies**:
```bash
npm install
```
3. **Run the app**:
```bash
npm start
```
Visit `http://localhost:3000` to view the app in the browser.
---
This project is an ideal practice app for understanding React Context API and is well-suited for upgrading to a full-stack MERN application.