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.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Tailwind CSS - Tailwind css
- React Hook Form - React Hook Form
- Shadcn - Shadcn UI
- Prisma - Prisma ORM
- MySQL - MySQL Database
I further improved my knowledge of React, Next.js and Tailwind CSS and I also learned how to use Prisma ORM with MySQL Database.
After this project I recon I need to improve my knowledge and productivity with CSS which is the area where I am having some trouble
- Frontend Mentor - @joaopmendes
Thank you Frontend Mentor for this challenge and for the amazing platform you have created to help us improve our skills.