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

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

Overview

Intro

Hi, there!

Thank you for checking out my solution to the invoice app challenge from Frontend Mentor.

Feel free to look around and explore!

share comments here Linkedin Post

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: Git Repo Link
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Styled Components - For styles
• Typescript- Typescript Documentation
• Redux Toolkit- Redux Library
• Firebase- Firebase Firestore Database
• Formik- Formik Form management Library
• Framer Motion - Framer Motion Animation Library

What I learned

This is my first time, using Typescript and most of the libraries I used on this Project, like formik, Firebase, Redux. So it was a challenging journey, with the way I scalled the app.

Continued development

• There will be another version of this app. Where I will be developing the backend myself with NodeJs and Express Js, Because Firestore might shut down because I'm using a free plan.
• Implement features like Authentication and Authorization.

Author

• Website - Portfolio Website
• Frontend Mentor - @iadefidipe
• Twitter - @iadecodes

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.

Frontend Mentor