Skip to content
Submitted about 4 years ago

Invoice App using Svelte and Firebase with custom datepicker

Rafal•1,395
@grizhlieCodes
A solution to the Invoice app challenge
Preview (opens in new tab)Code (opens in new tab)

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: test@user.com 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@email.com', 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

Code

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey @grizhlieCodes, looks great! Really like the smooth transitions. I'm not able to create a new user because when I click sign out, I only get a brief glimpse of the sign up page and reloads right away. I also can't click on the svgs inside Input Date and Payment Terms. The buttons Save as Draft and Save and Send that appear at the bottom of the create modal looks a little squished on mobile. Real good job though!

  • Simon Davis•505
    @Skidragon

    It looks and animates pretty awesome! The only suggestions I have is the confirm deletion modal could be exited out of when pressing esc and just being more keyboard accessible. Also the fields for creating an invoice could have more validation like the email and having an autocomplete fields for the state and city but MVP wise it's pretty solid. Keep up the good work and grit! I might look at the code base more tomorrow when I have more time. Also I'm doing the audiophile guru one to challenge myself too.

Join 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