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
- Bonus: Keep track of any changes, even after refreshing the browser (
localStoragecould be used for this if you're not building out a full-stack app)
- Solution URL: https://www.frontendmentor.io/solutions/invoice-app-with-vue-js-next-js-fniBh83p_Y
- Live Site URL: https://vue-invoice-app-82q3.vercel.app/
- Vue JS (Options API) + Vite
- Next JS
- Prisma
- Vee-validate
- Yup
- Tailwind CSS
- Radix UI
- Vercel
- Cody AI
I used this project to learn more about Vue JS as someone with a React background. It was very insightful and fun. I used the Options API particulary because that's what I use currently at my day Job. More than anything, it really helped me understand the hype around the composition API; for composability, the composition API really shines through. I'm pretty sure I'll be using the composition API going forward.
By default, I use Next js for new projects and for the past year or so, I've been exploring things I can possibly do with it; one of those things is to use it as backend. I follow Theo on youtube and I remember him saying this same exact thing and I wanted to test it out. Considering the relative small scope of this project, Next js turned out to be fantastic to use as backend. Essentially, I used it to build my API endpoints.
I used Prisma as my ORM for database querying; I really like their new AI chat assistant because it helped a ton with several questions I had regarding various query operations and their intricacies.
This project also enabled me to see how flawed the application code can be when written purely with Javascript. I had to debug and refactor quite a bit of code because Javascript couldn't catch errors on the fly. I will be using Typescript for sure to build my future projects.
Cody AI proved to be a wonderful AI companion. For quick look ups and hints, it helped me avoid spending hours searching the internet for a suitable answer. I used the Pro version which is free until February 14th,2024 and it's just great. The power of AI in web development is undeniable!
- Frontend Mentor - @kentntwari