Skip to content

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 mo…

Notifications You must be signed in to change notification settings

yasssuz/Invoice-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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

About

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 mo…

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published