Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephenombuya/expensetrackerwebapp
An intuitive Expense Tracker application designed to help users manage their finances effectively by tracking income, categorizing expenses, and visualizing financial data.
https://github.com/stephenombuya/expensetrackerwebapp
reactjs shadn-ui typescript
Last synced: 21 days ago
JSON representation
An intuitive Expense Tracker application designed to help users manage their finances effectively by tracking income, categorizing expenses, and visualizing financial data.
- Host: GitHub
- URL: https://github.com/stephenombuya/expensetrackerwebapp
- Owner: stephenombuya
- License: mit
- Created: 2024-11-29T17:34:55.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2024-11-29T17:50:32.000Z (27 days ago)
- Last Synced: 2024-11-29T18:28:45.630Z (27 days ago)
- Topics: reactjs, shadn-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Expense Tracker**
An intuitive Expense Tracker application designed to help users manage their finances effectively by tracking income, categorizing expenses, and visualizing financial data.
## **Key Features**
- Income Tracking
- Add multiple income sources for better tracking.
- Record income details such as:
- **Amount**: Track the exact amount earned.
- **Date**: Keep a timeline of your earnings.
- View total income for quick reference.
## **Expense Management**
- Categorize Expenses:
- Use predefined categories or create custom ones to suit your needs.
- Add Expense Details:
- Record category, amount, and description for each expense.
- View all expenses in an interactive expense table:
- Detailed entries for better management and filtering.
## **Financial Analytics**
- Automatically calculate:
- Total Income
- Total Expenses
- Net Balance
- Gain insights with a Bar Chart:
- Visualize expenses grouped by category for better understanding and budgeting.
## **UI Components**
- Shadcn/ui: Provides consistent and modern design for all components.
- Responsive Layout: Works seamlessly across devices.
- Interactive Tables and Inputs:
- Easy-to-use components for viewing and adding entries.
- Dialog for Adding Categories:
- A user-friendly way to manage and expand expense categories.
## **Technologies Used**
1. Frontend Framework
- **React**: Component-based development for building the application interface.
2. UI Components
- **shadcn/ui**: Provides prebuilt, customizable components with a modern aesthetic.
3. Data Visualization
- **Recharts**: Utilized for creating intuitive and dynamic charts.
4. Styling
- **Tailwind CSS**: Utility-first CSS framework for responsive and scalable design.
## **Installation**
Follow these steps to run the Expense Tracker on your local machine:
1. Clone the Repository:
```
git clone https://github.com/stephenombuya/expensetrackerwebapp/tree/main
cd expense-tracker
```
2. Install Dependencies:
```
npm install
```
3. Run the Development Server:
```
npm start
```
4. Open in Browser: Navigate to http://localhost:3000.
## **Usage**
- **Add Income**: Navigate to the income section and add details like source, amount, and date.
- **Add Expenses**: Use the expense form to input detailed information about your spending.
- **Analyze Finances**: View your net balance and expenses visualized by category in the analytics section.
## **Contributing**
I welcome contributions to improve the Expense Tracker! Follow these steps to contribute:
1. Fork the repository.
2. Create a feature branch:
```
git checkout -b feature/your-feature-name
```
3. Commit your changes:
```
git commit -m "Add your message here"
```
4. Push the changes:
```
git push origin feature/your-feature-name
```
5. Open a pull request.
### **License**
This project is licensed under the MIT License.
### **Acknowledgments**
- Shadcn/ui for modern components.
- Recharts for intuitive data visualizations.
- Tailwind CSS for elegant styling.