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-using-react-js-and-styled-components-Oj5-YSNaX
• Live Site URL: https://invoice-app-react.netlify.app/

My process

At the beginning of the project, first I outlined all the components of the app and then created static version of the app in reactjs. After static version, moved on to global and local state of the app and components. For state management I am using react context API and reducer. I followed mobile-first approach to style the app, faced difficulty while trying to reorder items in invoice card for desktop view but sorted out with use of grid-template-area property in CSS. To keep track of changes done by user I am using localStorage.

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first approach
• React - JS library
• Styled Components - For styles
• Formik - Form
• Yup - Form validation
• Headless UI - Accessible components
• React Router - Routing
• React Date picker - Form date picker

What I learned

• Got to practice react contextAPI and reducer for state management.
• Learned more about Formik and Yup for validation.
• Learned how to add/remove form fields dynamically.
• Applied grid-template-areas property while using CSS grid.
• Learned how to implement light/dark mode through styled-components.

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

Author

• Frontend Mentor - @agrajy10