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)
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- React - JS library
- Vite - Frontend tool
- Redux - State management
- Highcharts - Create charts
- @floating-ui/dom - Position floating element
- react.
- react-dom.
- react-router-dom.
- react-redux.
- @reduxjs/toolkit.
- highcharts.
- highcharts-react-official.
- @floating-ui/dom
During this project, I learned the importance of state management in React applications, particularly using Redux for efficient data handling. I also gained a deeper understanding of how to implement responsive design using CSS Grid and Flexbox, ensuring a seamless user experience across different devices.
- Linkedin - Ahmed Elbohoty
- Frontend Mentor - Ahmed Elbohoty
https://www.loom.com/share/67d261e346c246bca9a4fddcdca0b7fb?sid=d89c892d-60bd-487e-b80e-dcd333e9ea39