DEV Community

Damien Cosset
Damien Cosset

Posted on

Launch story: 1st month

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 :)

Top comments (16)

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

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

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

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

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

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

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

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