Star History

Expense Tracker

This is an open source project for tracking expenses.

Live Test Website

Visit the live test website here.

Contributing

We welcome contributions to this project! Here are some ways you can get involved:

• Report bugs or suggest improvements: If you find a bug or have an idea for how to improve the project, please create an issue on GitHub.
• Fix bugs: We are always looking for help fixing bugs. If you see an issue you can fix, please fork the repository, make your changes, and submit a pull request.
• Add new features: We are also open to new features. If you have an idea for a new feature, please create an issue on GitHub and discuss it with the team.

Getting Started

To get started contributing to this project, you will need to clone the repository and install the dependencies.

git clone https://github.com/Syipmong/expense-tracker
cd expense-tracker
yarn install

Use code with caution. Learn more.

Once you have installed the dependencies, you can start making changes to the code.

Submitting Pull Requests

Once you have made your changes, please commit them to your local repository and submit a pull request.

Here are some guidelines for submitting pull requests:

• Make sure your changes are well-formatted and documented.
• Test your changes thoroughly before submitting your pull request.
• Squash your commits into a single commit before submitting your pull request.
• Include a clear and concise description of your changes in the pull request description.

We will review your pull request and provide feedback as soon as possible.

Component Descriptions

Authentication.js

• This component handles user authentication.
• It includes a login form and a signup form.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Categories.js

• This component allows users to manage expense categories.
• It includes a form to add new categories and a list to display existing categories.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Charts.js

• This component displays expense charts using the Chart.js library.
• It includes a pie chart and a bar chart.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Dashboard.js

• This component serves as the main dashboard for the application.
• It includes the navigation bar, expense list, and expense charts.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

ExpenseForm.js

• This component allows users to add new expenses.
• It includes a form to add new expenses and a list to display existing expenses.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

ExpenseList.js

• This component displays a list of expenses.
• It includes a search bar and a filter bar.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Filters.js

• This component allows users to filter expenses.
• It includes a form to add new filters and a list to display existing filters.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Navbar.js

• This component serves as the navigation bar for the application.
• It includes a logo, a search bar, and a filter bar.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Settings.js

• This component allows users to change their settings.
• It includes a form to change settings and a list to display existing settings.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Transactions.js

• This component allows users to add new transactions.
• It includes a form to add new transactions and a list to display existing transactions.
• It uses React hooks to manage state and side effects.
• It utilizes the Context API for state management.

Project Structure

A tree-like visual structure of the app components

Note

Not Necessarily like in the tree structure

src/
├── components/
│   ├── Authentication.js
│   ├── Categories.js
│   ├── Charts.js
│   ├── Dashboard.js
│   ├── ExpenseForm.js
│   ├── ExpenseList.js
│   ├── Filters.js
│   ├── Navbar.js
│   └── Settings.js
├── App.js
└── index.js

License

This project is licensed under the MIT License.