✨ Frontend Mentor - Invoice App ✨

This is a solution to the Invoice app challenge on Frontend Mentor.

Table of contents

• Overview

• The challenge

• Links

• Built with

• Useful resources

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

Links

• Live Site URL @ Vercel

Built with

• Semantic HTML5 markup

• CSS ( Flexbox and Grid )

• TypeScript

• React.js

• React.js Router v6

• Emotion CSS

• Formik

• framer-motion

• Vite

• LocalStorage API

Useful resources

• A Formik POC live at Vercel - The form in this application is kind of complex, it must allow the user to add / remove groups of fields without losing the ability to validate them. I decided to use Formik and created this POC in order to learn how to use it properly. After adding a few features I had the knowledge needed to tackle bigger forms. This is the repo: cristianelias/formik-poc

Author

• Cristian Elias