yasssuz / invoice-app

App where you can create, delete, and edit your invoices. Don't have your invoice ready? No problem! You can create a draft and edit it later! Too many invoices? Filter them! Maybe the status of your invoice changed? Change it! Everything will be saved on your local storage so everything is crazy fast :) You can even switch between light/dark mode if you would like to.

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
  • Continued development
• 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: I will add the solution here when i post it on front end mentor :)
• Live Site URL: https://invoice-app-nine.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox
• CSS Grid
• React.js
• React-router-dom
• Styled Components
• Framer Motion
• Typescript
• React-hook-forms
• Yup
• Dayjs

What I learned

OMG... Crasiest project i have ever built! Extremely difficult, a lot of math, changing and replacing things, hell yeah. Overall, I really developed my "developer mindset" with this challenge.

Continued development

First time using framer motion, it's really simple and funny to use, but i think that i will use this tool rarely, specially because i can do the same thing with typescript + styled-components. Second time using react-hook-forms, i tried it some time ago in a very small form with very little validation and stuff, but after using it in a bigger project like this, i just feel in love with this tool XD. First time using Dayjs, i always used date-fns, but i saw that dayjs had a smaller package and it seemed to be easier... i wasn't wrong tho!

Author

• Website - SOON!
• Frontend Mentor - @Galielo-Appe