Git Product home page Git Product logo

expense-tracker's Introduction

Node.js CI CodeQL

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.

expense-tracker's People

Contributors

dependabot[bot] avatar syipmong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

expense-tracker's Issues

Responsive Design

  • Create a responsive design for both small and larger screens
  • Refactor code for better maintainability
  • Test the application on various devices

Create Components:

  • Navbar
  • ExpenseList
  • ExpenseForm
  • Filters
  • Authentication
  • Categories
  • Charts
  • Settings
  • Dashboard

Enhancements

  • Add animations or transitions for a smoother user experience.
  • Implement data persistence using a backend or local storage.
  • Allow users to set budget goals and receive alerts.
  • Provide insights and suggestions based on spending patterns.

Style Components:

  • Apply color variables to maintain consistency.
  • Design a clean and user-friendly Navbar.
  • Style the ExpenseList to display transactions.
  • Design and style the ExpenseForm for adding new expenses.
  • Create visually appealing Charts for expense analysis.
  • Implement a responsive design for various screen sizes.

Dashboard

  • Design an informative and visually pleasing dashboard.
  • Display an overview of total expenses, monthly expenses, and expense trends.
  • Show breakdowns of expense categories and top categories.
  • Present recent transactions and budget progress.

Functionality

  • Enable users to add, edit, and delete expenses.
  • Implement a filtering mechanism for expenses.
  • Integrate authentication for user login.
  • Provide category-wise expense tracking.
  • Generate charts for expense visualization.
  • Allow users to customize app settings.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.