
Invoice App using Svelte and Firebase with custom datepicker
Design comparison
Solution retrospective
Hey all,
Took my time with this one. I think overall it took me 3 weeks with a lot of refactoring.
Key FEATURE (bug) 🤩: When you create a new account it will populate 3 default invoices into the app. For some reason random inline-styling is being added to them and changes their size to something ridiculously small. Just refresh and we're golden. No clue, sorry. Oh yeah, it doesn't always happen. So I can't replicate it on demand.
Feel free to login with: username: [email protected] password: 123456
Some things to points out:
- If you delete all invoices and refresh you will trigger an automatic function that adds the invoices (locally as well as to firebase). Only when there are none left and the app starts from scratch. Thought it useful for testing purposes.
- You can create a 'fake' user. Like '[email protected]', I just wanted the auth to work for testing purposes/simulation. Otherwise I would have probably added email-confirmation, but that was unnecessary for this.
- I tried to be as close to the original design as possible so I did end up creating a custom datepicker, styling the sidebar, etc. I think overall the result is quite pleasing.
- I did adjust how the Invoice Items look like in tablet/desktop mode as I didn't think the original design left enough space for larger numbers. I don't hate the final result 😅
- I found a 'fun' little solution for the price input field per input item. When you click (focus) into it, it turns into an input type='number' and it takes the core value from the invoice-object (100000). When you focus:out it turns back into a string and goes through a function that converts it via toLocaleString (100,000.00). Thought this was a nice touch 🤡
OVERALL... Great project for learning about data-flow, structure and general planning. I wish i spent more time planning everything as I did find multiple issues towards the end. But I'm super happy with this project, I think it's the biggest learning curve I've had (per project) from anything I've done so far.
Any thoughts, suggestions, etc welcome.
Cheerio
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord