Full Stack Budgeting App

Back-End Repo
Link to Deployed Budget-App
Link to Deployed Budget-App Back-End

(1) Navigation/Nav Bar

• The Nav bar allows me to navigate to the Index and New pages

(2) Index Page

• I can see a list of income and expenditures with the date, the transaction name and the amount on the Index page.

• There is also an Account total visible that sums all the different expenditures and shows the user how much money they currently have.

(3) New Page

• I can click on a "New" button that takes me to the New page, with a form that lets me create a new transaction.

• Once a transaction is created, I am navigated back to the Index page

(4) Show Page

• I can see a single expenditure with more details and appropriate navigation links

(5) Edit page

• I can see a form that is pre-filled with an individual expenditure that allows me to update the expenditure. Once updated, I am taken back to the show page where I should be able to see the updated transaction, without needing to refresh the page.

• The edit form is accessible from the Show page.

(6) Delete functionality

• The expenditure can be deleted from the Show page

(7) Account Total

• The account total is visible on the Index page and in the Nav Bar.
• The account CSS changes depending on the amount. The account should show green (or similar color) if the amount is above $1000. There should be neutral/white color between $0 - $1000. And it should show a red (or similar color) if the bank account value falls below $0.

(8) UX/UI

• Forms are styled and properly labeled. The navigation is clear and easy to use, a color theme has been chosen and applied. At least one font has been chosen and applied. The app is responsive (readable/usable) across multiple screen sizes/widths.

(9) Deployed online

• I can visit the application via the internet

(10) Pending Transactions (Bonus Feature)

• In order to test out the Pending Transactions functionality, as a user, you will have to add a transaction that is dated at some point in the future.

Built With

• css
• express.js
• html
• javascript
• react