davurie / origin-angular

Finance Page Clone Angular

After watching the Demo video, I thought it would be fun to clone one of the pages that were shown. I chose the Goals tab because I like how it looks, and it sounded like a realistic challenge to accomplish in my free time. It took me around 10 hours to create, so there is a lot of rushed code!

I had to imagine a few things, such as the Completed Goals area, the New Account form, the New Goal form, and the Monthly Budget side-drawer.

If you have any tips, questions, or you would like me to build something on top of this, do let me know!

Hope you enjoy it as much as I did to create it!

How to use it!

Run ng serve and npm run json-server. Navigate to http://localhost:4200/.

Features

• Mobile Friendly;
• Drawers and User Feedback Alers;
• JSON Server for testing HTTP calls;
• Add new Accounts;
• Add new Goals;
• Mark Goals as completed;
• Calculates a bunch of things by itself such as:
  • Monthly Budget to invest;
  • Money assigned to goals;
  • Money left unassigned;
  • Goal progress;
  • ... and more!

Things I would do before giving this prototype the 'finished' stamp:

• Unit Testing
• e2e Testing
• Dark Mode
• Finish Goals CRUD
• Refactor the forms into Angular Reactive Forms, for better control and validation states.
• Give TailwindCSS a good cleanup

Screenshot