Finance-App

Personal finance app solution

Table of contents

• The challenge
• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

The challenge

Users should be able to:

• See all of the personal finance app data at-a-glance on the overview page
• View all transactions on the transactions page with pagination for every ten transactions
• Search, sort, and filter transactions
• Create, read, update, delete (CRUD) budgets and saving pots
• View the latest three transactions for each budget category created
• View progress towards each pot
• Add money to and withdraw money from pots
• View recurring bills and the status of each for the current month
• Search and sort recurring bills
• Receive validation messages if required form fields aren't completed
• Navigate the whole app and perform all actions using only their keyboard
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: Save details to a database (build the project as a full-stack app)
• Bonus: Create an account and log in (add user authentication to the full-stack app)

Screenshot

Links

• Solution URL: Frontend repo
• Solution URL: Backend repo Node/Express
• Solution URL: Backend repo Python/Fastapi
• Live Site URL: Interactive Backend Lambda Function With Docker, Python/Fastapi
• Live Site URL: hosted on vercel.com

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Next.js - React framework
• AWS LAMBDA - backend host
• claudiajs - backend deployment library
• Prisma - Rugged but lightweight ORM
• postgresql - Battle tested database
• Neon - database serverless host
• Typescript - strong typed programming language
• Eslint
• Axios
• Oauth
• Nodemon
• Cron - node cron job package
• React-Loader-Spinner - load screens fallback
• SWR - Easy to use data fetcher with cache, state, error management
• Tailwind - Best CSS framework for me so far
• cors - node cross origin package
• Express -node package for REST API. Best for me so far.
• JWT - Json web token used for authorization to user specific data.
• bcryptjs - for Hashing and verifying user passwords.

What I learned

I used this practice project to solidify my grip on practices/concepts I needed to get familiar with(CI/CD and Oauth). I tried sequelize (ORM) which was great but I went for Prisma for its flavours cause it supports multiple langauages and database types. My main achievment with this project is many to many and one to many relations; solidifying my understanding of these is important and this project's data structure is a good practice example for that.

Continued development

Continous practice of devops

Useful resources

• Prisma - doc for Prisma orm. Made set up and useage super easy.
• stackoverflow - I use this to check if there are better ways to do whatever I'm doing.

Author

• Ifarontimi Akeem and All my names
• My github

Acknowledgments

Anthony - Helped with suggesting different approach to my architecture to prevent unecessary use of state management extras when the default APIs are enough given good structure. I refactored the entire app after his initial review of the code base.