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.
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
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: Git Repo Link
- Live Site URL: Live site URL
- 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
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.
- 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.
- Website - Portfolio Website
- Frontend Mentor - @iadefidipe
- Twitter - @iadecodes
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.