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

Screenshot

Links

• Solution URL: Click Here
• Live Site URL: Click Here
• Github Link: click Here

My process

Built with

• React - JS library
• Redux - State management Libraray
• Redux Js/toolkit - ToolSet for efficent Redux Development
• React Router(v5) - React Library for routing
• Chakra Ui - React Library for UI
• Flexbox
• Grid

What I learned

In this project, I learned how to use redux and manage state in efficent way. I also get my hands dirty on react router dom.

Useful resources

• MDN Docs - This helped me for refreshing my javascript knowledge
• React Docs - React docs helped me alot when I need to get any info about hooks

Author

• Website - I don't have website currently :(
• Frontend Mentor - @amritpant
• Twitter - @1_amritpant