An intuitive expense tracker for easily managing your financial accounts.
Users should be able to:
- Add or remove individual income or expense items containing a name followed by a value. Both adding and removing items will trigger smooth animations for all items in the list and also the calculated numbers.
- See the total of incomes and expenses, the balance, and the percentage of all expenses relative to the balance; all with animated numbers.
- Have all data saved to localstorage and displayed on page load using smooth animations.
- Semantic HTML
- Tailwind CSS - Styling
- Vue.js - JavaScript framework
- How to set up a Vue.js 3 and Tailwind CSS project using Vite.
- How to use the basics of Vue.js, using Pinia for state management.
- How to use the Composition API in Vue.js and the VueUse library.
1. First, you need to clone the project:
git clone https://github.com/ShayanTheNerd/budgetly.gitAlternatively, you can copy the source of the project directly to your local environment using Degit:
pnpm i -g degit
degit https://github.com/ShayanTheNerd/budgetly new-project-folder2. Then, install required packages:
pnpm i3. Finally, run the dev script to start the dev server and locally preview the project in development mode:
pnpm run devBefore deploying the project or creating a new pull request, run the following commands and make sure there are no errors:
pnpm run format
pnpm run buildAlso, to ensure that everything is as expected, you can run the preview command to locally preview the project in production mode:
pnpm run previewIf you want to develop this project, please stick to these rules:
- Follow the current architecture, coding paradigm, and project folder structure.
- Follow the current character case principals for ids, classes, variables, file and folder names, etc.
- Code based on the current libraries, frameworks, and packages included in the project.
- For styling, utilize Tailwind's features as much as possible, but also make sure to use BEM methodology for naming custom CSS classes.
- Add Git commit messages considering Conventional Commits.
Your contribution is always welcome, please follow these steps:
- Fork the project.
- Create your feature branch:
git checkout -b feature/branch-name. - Make sure to follow instructions in the style guide section.
- Stage all changes you made:
git add -A. - Commit all staged changes with a descriptive commit message:
git commit -m 'feat: add foo bar baz'. - Push everything to your feature branch:
git push origin feature/branch-name. - Create a new Pull Request.
This project is licensed under MIT license. You're free to use it, but a link to this page and mentioning the author's name is mandatory. Created by Shayan Zamani.