DEV Community

loading...

Launch story: 1st month

damcosset profile image Damien Cosset „ÉĽ2 min read

Introduction

My application InvoiceMaker has officially been up for a month now. It is time to reflect on what I managed to do in the pas couple of weeks.

Features

Accounts

The main thing that I worked on is the accounts functionality. To handle the accounts creations and the login functionality, I chose to use passport.js and JSON Web Token. I use the local storage to keep track of the token send back from the server, coupled with an Express middleware, to verify the identity of the users.

Define your organisation's informations

So far, the only thing you can do when you have an account is to save your organisation's informations in a database. So, you don't have to re-enter your details everytime you need to create an invoice. Chances are these informations won't change too much over time, so having the possibility to save them felt natural.

About page

I added an about page, because I suppose I'll need one at some point :D I just added a few questions some people may have, and their answers. Not quite sure where I want to go with this page yet.

Bug fixes

  • Finally managed to make the production build for React work in production. Couldn't quite figure out why it didn't work.
  • Solved a font rendering problem on the generated PDF. I believe it was because I used a font that was not supported on Linux (Helvetica Neue), so the generated PDF falled back to a different font.

Conclusion

I didn't manage to set aside too much time to work on the project unfortunately. The next steps will be:

  • Having the possibility to add a logo on the invoice.
  • Start thinking about Stripe integration

Happy Coding :)

Discussion (16)

pic
Editor guide
Collapse
flrnd profile image
Florian Rand

I've played with a few PDF libraries and font rendering in general could be a lot better.

There is not such thing as not supported font, maybe you used other format than ttf or otf, in any case probably your problem in rendering it's the library's fault, not the font (trying to keep the answer short, I don't want to bore you with typography and fonts ūüėÖ).

Collapse
damcosset profile image
Damien Cosset Author

I have a huge gap in my knowledge when it comes to that kind of things :/

I thought, and apparently I'm wrong, that because I used a Linux server, the font I was using needed to be supported by all OS to make sure the rendering would not differ.

Now, I'm only referencing fonts from the CSS, with a good old font-family property.

I don't know if I'm clear, nor if my approach is right (it's probably not). But don't be afraid to bore me, I would love to learn more :D

Collapse
flrnd profile image
Florian Rand • Edited

Your approach is perfectly fine. I wanted to relieve you about the rendering bug, it's not your fault.

Helvetica is probably one of the most widely used font families (Arial is Microsoft helvetica version, but that's another story).

You're doing great taking into consideration the limitations here.

You've discovered that working with fonts is harder than you thought and that's okey!

Thread Thread
damcosset profile image
Damien Cosset Author

That's reassuring. I guess I'll postpone thinking about this when I would need to add support for different fonts

Thread Thread
flrnd profile image
Florian Rand

This post from Coding Horror may be of help.

Collapse
drozerah profile image
Drozerah

Bonjour Damien,

Pour information l'url principale retourne une page blanche sous FireFox...

Alt text of image

Collapse
damcosset profile image
Damien Cosset Author

Oops, je regarde ça et je corrige. Merci !

Collapse
drozerah profile image
Drozerah • Edited

Murphy => "Tout ce qui est susceptible d'aller mal, ira mal" - l'effet demo a priori ;) Euuuuh et pour le climat et la biodiversité on fait quoi ?

Collapse
damcosset profile image
Damien Cosset Author

Problème résolu! :)

Collapse
drozerah profile image
Drozerah • Edited

Ok ! D'autre part concernant le rendu de la page principale o√Ļ figurent les formulaires ceci :

  • la largeur de la page d√©passe celle du viewport, il en r√©sulte la pr√©sence d'une barre de scroll horizontale. Par cons√©quent la navigabilit√© se trouve compliqu√©e/instable sans que cela soit justifi√© - Cela refl√®te √† mon sens √©galement, au stade actuel du projet, que celui-ci devrait √™tre trait√© sous l'angle de l'affichage adaptatif (responsive)

  • dans le m√™me ordre d'id√©e et par souci de coh√©rence avec l'argumentaire de professionnalisme que tu mets en avant pour pr√©senter l'application (coh√©rence fond/forme), il me parait que tous les √©l√©ments de classe 'jss2' devrait adopter des r√®gles de margin √©quivalentes car il existe des d√©calages de ce point de vue entre les √©l√©ments...

  • de mani√®re g√©n√©rale et sans approfondissement de ma part du point de vue de la logique de saisie des formulaires par rapport au rendu final du pdf, il me semble qu'une application de ce type devrait offrir une pr√©sentation plus s√©quentielle, peut-√™tre donc un ordonnancement des formulaires les uns en dessous des autres afin que l'utilisateur ne se sente pas perdu face √† un ensemble assez copieux...

  • toujours sur les formulaires, un retour visuel qui indiquerait qu'un bloc est compl√©t√© faciliterait le rep√©rage pour l'utilisateur

  • s'agissant de la r√©initialisation, il pourrait exister une r√©initialisation totale de l'ensemble des blocs de champs, et je pense que pour chaque bouton de chaque bloc de saisie multiple il pourrait exister une int√©gration plus discr√®te sous forme d'icone qui appara√ģtrait au survol d'un bloc pourquoi pas, ceci en sorte de ne pas m√™ler trop l'outillage de gestion de saisie avec la pr√©sentation g√©n√©rale de l'application qui devrait √™tre au plus proche de celle du pdf...

  • enfin, en mode preview, au moins pour un breakpoint CSS desktop, celui-ci pourrait s'approcher au plus pr√®s du format A4 en terme de proportion. D'ailleurs pourquoi pas pr√©senter la preview dans une fen√™tre modale √©galement et depuis la page de saisie m√™me...

  • il y √† maintenant quelques ann√©es j'avais fait le d√©veloppement et l'int√©gration d'un syst√®me de facturation pdf pour un CMS, je me souviens qu'il fallait que le syst√®me soit en mesure de produire un duplicata avec mention "duplicata" pour toute facture √©mise. Il faudrait donc voir du point de vue r√©glementaire si un facturant serait dans l'obligation d'√™tre en mesure de fournir un duplicata au factur√© en cas de besoin administratif ou autre droit commercial... D'autre part l'√©metteur de la facture gardait √©galement une copie papier et pdf pour classement, cot√© facturant il peut √©galement n√©cessiter la pr√©sence de m√©tadonn√©es qui n'apparaissent pas cot√© factur√©... Bref dans tous les cas il faut s'assurer d'un certain nombre de points et peut √™tre faire un tour √† la chambre de commerce pour avoir les infos courantes sur ces questions...

Sinon félicitation à toi pour le suivi d'évolution de ton travail, nous savons tous le temps et l'investissement personnel que cela représente ;)

Thread Thread
damcosset profile image
Damien Cosset Author

Wow! Merci beaucoup d'avoir pris le temps d'√©crire un commentaire aussi constructif et complet ! Je n'avais pas r√©ellement pioch√© sur l'UI mais ce sont vraiment des remarques tr√®s int√©ressantes. √áa donne √† r√©fl√©chir ūüėģ

Merci beaucoup ūüôŹ

Thread Thread
drozerah profile image
Drozerah • Edited

Je t'en prie c'est tout naturel ;)

Je ne voudrais pas trop charger la barque mais il y a d'autres points √† aborder si tu voulais avoir une offre de service. Il faudrait produire sur le site les Conditions G√©n√©rales d'Utilisation CGU de ton service, quels sont les droits que tu t'accordes vis √† vis des utilisateurs mais aussi quels sont leurs droits quand ils acc√®dent au service... Egalement les Conditions G√©n√©rales de Vente quand ils souscrivent en acc√®s payant, on parle ici plus g√©n√©ralement des mentions l√©gales au sens large et qui, par d√©finitions, sont obligatoires... Ici par exemple l'offre de service du journal Le Monde ( Attention, je ne dis pas que la lecture de ce journal pourrait √™tre recommand√©e d'aucune mani√®re ou alors √† l‚Äôextr√™me limite pour en faire un objet d'analyse critique √† vocation de lib√©rer les jeunes g√©n√©rations de la pens√©e dominante et de son id√©ologie qui conduit l√† o√Ļ nous savons : CyberPunk post-mondialis√©... )

Ensuite viennent certaines considérations techniques et sécuritaires. En effet le secteur de l'économie numérique est un secteur dit sensible, il faut donc être en conformité avec les règles du commerce en ligne et la loi sur la confiance en l'économie numérique... Enfin et très rapidement, si tu détiens de fait des informations stratégiques sur les encaissements d'un contractant, il faut pouvoir offrir un certain niveau de sécurité mais aussi d'engagement par rapport à la continuité du service, pour une raison ou une autre, un contractant pourrait se retourner contre toi s'il se trouvait en difficulté pour accéder à ses données - lui occasionnant pour une raison ou une autre des frais particuliers... En ce domaine, les clients peuvent être très créatifs.... surtout quand ils ont payé pour un service...

Enfin, question sécurité/confidentialité, il serait peut être opportun de crypter les données en base, en sorte que pas même le top admin ne puisse avoir accès aux contenus des utilisateurs au même titre que les mots de passe par exemple...

√Čvidement si nous vivions dans un monde de gratuit√© ou l'utilisation de l'argent y serait abolit, alors nous perdrions moins de temps avec ce genre de consid√©rations, ce qui lib√©rerait d'autant le potentiel de cr√©ativit√© humaine qui se trouve actuellement conditionn√©, et l√† √ßa deviendrait tout √† coup et sans co√Ľt, alors vraiment CyberBisounours... ;)

One last note

Thread Thread
damcosset profile image
Damien Cosset Author

L'UI de cette application est tellement propre, simple et intuitive :)

Merci beaucoup pour toutes ces très bonnes infos :)

Collapse
bizzibody profile image
Ian bradbury

Have you considered adding a feedback page? Or feedback email address?

Collapse
damcosset profile image
Damien Cosset Author

I haven't. But this is an amazing idea. And this should actually be the top priority. Can't believe I didn't think of it before...
Thank you!

Collapse
petecapecod profile image
Peter Cruckshank

Cool I always find the production version of React to be so much smoother and faster. Glad you got it working