Frontend Mentor - Invoice app solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

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 (localStorage could be used for this if you're not building out a full-stack app)

Screenshot

Links

• 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/

My process

Built with

• Vue JS (Options API) + Vite
• Next JS
• Prisma
• Vee-validate
• Yup
• Tailwind CSS
• Radix UI
• Vercel
• Cody AI

What I learned

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!

Author

• Frontend Mentor - @kentntwari