Budgetr is an expense tracker for the modern age. Track your spending by category, and by currency, in one convenient and easy-to-use application.
The production website is deployed here.
- To add an expense, go to the Add Expense screen, input the data and submit the form. The expense will be added to the list of expenses on the Dashboard.
- To view the details of an expense, click on the expense item in the list on the Dashboard.
- You can view graphs of your expenses by category and by month on the Dashboard.
- React
- Vite
- Tailwind CSS
- Node
- Vitest
- React Testing Library
- Graph.js
- Faker.js
- React Router
- React Icons
- React Hot Toast
- Currency.js
- localForage
- Day.js
Exchange rates are provided by ExchangeRate-API.
The team that built Budgetr is:
Item | Evidence |
---|---|
Satisfies the following code requirements: Application uses React. Application uses Node. Application uses at least two libraries, packages, or technologies that we haven't discussed. Application has GET route(s) for retrieving data. |
Application uses React. Application uses Node. Application uses Tailwind CSS, Currency.js, localForage, Day.js, Faker.js, React Hot Toast, and Graph.js. Application has a GET route for retrieving currency exchange rate data. Application is interactive (accepts and responds to user input). |
Item | Evidence |
---|---|
Application should be a unique and novel idea. Your group should clearly and concisely articulate your project idea. |
The single page brief articulates the core concept of the project and is available read-only here |
Item | Evidence |
---|---|
Application deployed at live URL using Netlify and loads with no errors. | Live application deployed at: https://financeflow-budgetr.netlify.app/ No visual defects No console errors |
Application GitHub URL submitted. | URL submitted |
Item | Evidence |
---|---|
Repository has a unique name. | Unique name used |
Repository follows best practices for file structure and naming conventions. | Standard file naming conventions used |
Repository follows best practices for class/id naming conventions, indentation, quality comments, etc. | All multi-word variables in JavaScript use camelCase Indentation within code follows best practice Comments have been included within the files to describe behaviour and/or intent of the code. |
Repository contains multiple descriptive commit messages. | Multiple commits included demonstrating incremental build of final submission. Each has a clear description of changes made. |
Repository contains quality README file with description, screenshot, and link to deployed application. | This README document. |
Item | Evidence |
---|---|
Application user experience is intuitive and easy to navigate. | Application user interface matches the wireframe from the original design and uses intuitive elements e.g. click on a transaction/expense item to view the detail. |
Application user interface style is clean and polished. | As above |
Application is responsive. | Application uses Tailwind CSS to display content in a responsive way using standard breakpoints. |
Released under the MIT license. Full details in LICENSE.