https://github.com/yasssuz/invoice-app
App where you can create, delete, and edit your invoices. Don't have your invoice ready? No problem! You can create a draft and edit it later! Too many invoices? Filter them! Maybe the status of your invoice changed? Change it! Everything will be saved on your local storage so everything is crazy fast :) You can even switch between light/dark mode if you would like to.
https://github.com/yasssuz/invoice-app
dayjs framer-motion frontend-mentor localstorage react react-hook-form react-router-dom styled-components typescript yup
Last synced: 10 months ago
JSON representation
App where you can create, delete, and edit your invoices. Don't have your invoice ready? No problem! You can create a draft and edit it later! Too many invoices? Filter them! Maybe the status of your invoice changed? Change it! Everything will be saved on your local storage so everything is crazy fast :) You can even switch between light/dark mode if you would like to.
- Host: GitHub
- URL: https://github.com/yasssuz/invoice-app
- Owner: yasssuz
- Created: 2021-05-02T22:31:46.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-09T22:19:59.000Z (almost 5 years ago)
- Last Synced: 2025-07-05T05:35:38.788Z (11 months ago)
- Topics: dayjs, framer-motion, frontend-mentor, localstorage, react, react-hook-form, react-router-dom, styled-components, typescript, yup
- Language: TypeScript
- Homepage: https://invoice-app-nine.vercel.app/
- Size: 1.81 MB
- Stars: 28
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Invoice app solution
This is a solution to the [Invoice app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/invoice-app-i7KaLTQjl). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#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: I will add the solution here when i post it on front end mentor :)
- Live Site URL: [https://invoice-app-nine.vercel.app/](https://invoice-app-nine.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- CSS Flexbox
- CSS Grid
- React.js
- React-router-dom
- Styled Components
- Framer Motion
- Typescript
- React-hook-forms
- Yup
- Dayjs
### What I learned
OMG... Crasiest project i have ever built! Extremely difficult, a lot of math, changing and replacing things, hell yeah. Overall, I really developed my "developer mindset" with this challenge.
### Continued development
First time using framer motion, it's really simple and funny to use, but i think that i will use this tool rarely, specially because i can do the same thing with typescript + styled-components. Second time using react-hook-forms, i tried it some time ago in a very small form with very little validation and stuff, but after using it in a bigger project like this, i just feel in love with this tool XD. First time using Dayjs, i always used date-fns, but i saw that dayjs had a smaller package and it seemed to be easier... i wasn't wrong tho!
## Author
- Website - SOON!
- Frontend Mentor - [@Galielo-Appe](https://www.frontendmentor.io/profile/Galielo-App)