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

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

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

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

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

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