Show HN: Create unlimited one-off Invoices (Built with AngularJS) | Hacker News Reader

Show HN: Create unlimited one-off Invoices (Built with AngularJS)

metaware.github.io

56 pointsjasdeepsingh40 comments

Very cool. Sometimes I receive invoices in the mail that give me the option to pay online. However most of the sites require a sign up and account. The smarter sites have a widget that allows you to type in your unique invoice id and pay without signing up.

This has always seemed like a possible opportunity for a SaaS product in my opinion. Essentially you'd let the site generate the invoices using your code. Give them a snippet to put on their site and handle the payment processing. Maybe give them a dashboard to see all their data.

Embeddable Invoices.

A handful of suggestions

- consider putting initial focus on the item description field and possibly using a textarea over input

- in alternating rows with white background it's difficult to determine what can be updated

- as this is desktop targeted, I'd consider throwing a hover style over the fields which are in fact editable

- rather than trying to rework styling of form elements, use the hover effect as described above and the ng-if (or ng-show/ng-hide) to toggle between the input field and text based element

- print mode you can still edit, as noted in another comment there really shouldn't be a print mode, you should have a print stylesheet to hide what you don't want on there and format everything else appropriately

- consider localStorage for the most recent invoices created, also helps with the "oh shit, I just navigated off the page with 100 line items"

Overall good first effort, keep at it!

these are really good feedback notes, I'll add these in into our roadmap. We were actually planning to do simple Firebase based backend integration so that people can actually save their invoices and just send out links etc.

This would be a really good idea. I've been using http://invoicemachine.com/ for a few years and I like how you can save the invoices and automatically email them out on a schedule (my client had monthly maintenance work). They let you export it in different formats like a PDF which is helpful too.

This is neat! for now, our goal was to just get something very simple out the door.. Create invoices, Print/Save as PDF and manage them offline..

Feedback that we've got so far has been amazing! Thanks y'all!

suggestion: instead of enabling/disabling print mode, just use an additional media=print stylesheet.

I think the print mode button is valuable. It provides an affordance that shows you you can turn of the GitHub notice and footer, and use this for actual invoices. Lots of people don't know about print-only style sheets, and how many people are going to print-preview the page as opposed to click a button out of curiosity?

I'd still keep a print button; not a enable/disable, but at least a button that triggers `window.print()`. "Print" buttons may seem useless, but they do serve as a simple bit of advertisement that "Yes, this page is print-friendly!"

In the app,

Turn on Print Mode > Print

Does exactly that :)

Came here to say the same thing :-)

good point :) will add that to our roadmap.

thanks for the suggestion.

This is actually simple yet well executed - great work.

Glad to see the 'Made with Love in Toronto' footer too. Would love to connect about a project perhaps? https://news.ycombinator.com/item?id=6218412

Cheers

sure, email me at manpreet@metawarelabs.com

Hey! Here's something very similar I've built with Angular too https://github.com/vahek/InvoicingJs

I recommend making use of localstorage, so the company info doesn't have to be entered every time.

Nicely done! The idea of using localstorage has been mentioned a couple times, For a couple fields localstorage does make sense. We were aiming more of a Firebase like backend support so that one is able to send out just links to invoices.

HN community has definitely given us a few ideas and we look forward to implement a couple of those.

localStorage on its way..will be pushed shortly.. +1

Thanks for the suggestions

Neat. In working with Angular it has definitely seemed that it is particularly well suited to building single-purpose form-based apps (because building really simple things in Angular is shockingly easy). I've had a few ideas like this one. Maybe this will motivate me :)

Would like to say this was my own idea, but I stole it from another HNer in one of the thousands of "what should I build?" threads. Do a search for Excel or Google Doc templates and find one that is popular. Build it into a single-purpose app like this. Great for building a little portfolio, making yourself known, and generally making the web a better place.

And, like you said, it's shockingly easy :)

based on our working experience with Angular so far, it is well suited for both large and small applications. We are actually working on one project in Angular right now which is much more ambitious and frontend heavy than what this link is currently capable to show..

Indeed it is, and glad we were able to encourage and make a difference.

Ok, so we have local storage and highlighting ready...! Thanks for the suggestions guys. Appreciate it..

What about a way to specify the currency symbol and locale for date / number formats?

That is a part of the roadmap. To allow multiple currency use.

Small suggestion: constrain the height of the logo, not just the width.

Invoices need due dates, too.

Omg. This is exactly what I need for my dad's company..

Glad we were able to help.

Looks pretty good Jasdeep. Keep up the good work.

Great Work man! Keep up the good work! (y)

thanks man! appreciate the feedback..

thank you! :)

Needed something like this. Perfect.

glad this could help :)

amazing!

any tips on how I could quickly hack it to save pdf / email pdf?

Your browser already does that.

Awesome stuff!

Thanks!

thanks much!

invoice_sub_total is defined twice.

sounds like a git merge issue :) thanks for pointing this out! :)

Reply on news.ycombinator.com