This is a solution to the Personal finance app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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)
- Solution URL: https://github.com/CoderAlchemy24/personal-finance.git
- Live Site URL: https://marvelous-meerkat-da45a6.netlify.app/
- Next.js - React framework
- [TailwindCSS]
This fullstack app was the most complex project I've ever worked on. GitHub Copilot helped me a lot when I got stuck on the details. I've rarely used NextJS or Supabase, so I was dependent on Copilot for bug fixes. It was a pretty big project when it was finished.
I used GitHub Copilot, I asked for your help in designing the data tables and launching the code sections, as well as for bug fixes. Sometimes it overcomplicated it, and sometimes it used functions unknown to me, but in the end I managed to put together a working solution with its help.
- Website - CoderAlchemy24