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.

• Frontend Mentor - Invoice app solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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)

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Redux Toolkit - Redux, React-Redux Immer, Nanoid to make Redux easier to write
• Redux Persist
• Styled Components - For styles
• Polished - Toolset for writing js styles
• Storybook - For Documentation
• React Hook Form - for hook based form
• Yup - for form validation
• MongdoDB Atlas - for database
• Axios - for api calls
• Moxios - for test api calls
• Swagger - for documenting api
• Jest - testing react
• React Test Renderer - test render
• React Testing Library - test react
• Framer Motion - react animation
• React Loading Skeleton - react loading skeleton

• Design Systems with React & Storybook by Emma Bostian - This helped me working with styled components, design systems and storybook.

• Design for Developers by Sarah Drasner - This helped me understand basics of design theory.

• Introduction to Next.js by Scott Moss - This helped me with using paths and rest api with Next.js.

• Production-Grade Next.js by Scott Moss - This helped me how to work with next.js in a professional manner.

• Introduction to Serverless Functions by Jason Lengstorf - This helped me understand serverless functions.

• Building Modern Applications with Next.js and MongoDB by Ado Kukic - This is an amazing article which helped me set up next.js with Mongodb Atlas.

• Website - David Chan Ho
• Frontend Mentor - @davidchanho

To all everyone in the Frontend Mentor Slack!