A React web application that allows users to create, manage, and track invoices. Features include responsive design, form validations, draft/pending/paid invoice status filtering, light and dark mode, yearly report and localStorage integration for data persistence.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Create, read, update, and delete invoices
- Receive form validations when trying to create/edit an invoice
- Save draft invoices, and mark pending invoices as paid
- Filter invoices by status (draft/pending/paid)
- Toggle light and dark mode
- React
- CSS Modules + PostCSS (custom media queries)
- React Hook Forms
- Zustand lightweight state management 🐻
- Nivo for pie and line chart
- Radix UI Primitives for headless accessible components (Select, Dialog, Popover, Checkbox)
rhf, nivo, zustand and radix-ui were new to me and I had so much fun playing around with them :3 Used CSS variables for light/dark mode and can't help but wonder how messy it would be maintaining so many variables for each mode in a big project.
There are so many things to make this project even better:
- Import/Export Invoices to/from a file.
- A full blown dashboard with weekly/monthly/yearly dataviz. (I just did yearly overview for now) + option to download the report
- Make nivo charts accessible? Expore how to even do that T^T
- Making this a fullstack app ✨
- So you think you can build a Dropdown - Stumbled across this and went with radix-ui lol
This is a solution to the Invoice app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.