Skip to content

Latest commit

 

History

History
executable file
·
62 lines (44 loc) · 1.82 KB

README.md

File metadata and controls

executable file
·
62 lines (44 loc) · 1.82 KB

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
  • SASS
  • Flexbox
  • CSS Grid
  • Transition Group
  • mongoDB
  • React - JS library
  • Context
  • Yup
  • useForm hook

What I learned

This project was a great opportunity to sharpen my React and CSS knowledge. I was able to try out tools such as SASS, Transition Group, useForm hook and Yup.

Author