Coding Journal

Jordan Vidrine

Daily Coding Journal

A Self-taught coder from the Cajun Prairie in rural Louisiana, currently working as a designer for Discourse.

I am always trying to better myself, and do so through learning new skills, trying out new routines, traveling, and pouring energy into hobbies. Since 2014, I have been recording, editing, and producing my own music under the name Skies Speak.

December 12th - What I've Been Up to

Over the past month I started working on another personal project putting together EVERYTHING I have learned this year. The app is a Client Contract management system to help my wife manage contracts for clients she works with. I also started participating in the Advent of Code 2019 challenge and that has been… challenging!

As far as size, it is a relatively small app, but it makes use of a custom API created with NodeJS and Express, mongoose and MongoDB for storage of Client and Contract information, the Authy API for authorization and Identification for client signatures, as well as a PDF converter for the client or user to download a PDF version of the electronically signed documents. I created the whole app using ReactJS as well using google’s Material UI.

Contract Creation

In this section of the site, a user would be presented with the contract creation section. This form was built with React and Google Material UI.

Client Version

After the contract has been created and saved by the user, and ID is generated. When the client uses that ID in the address bar at it will take them to their rendered client to be digitally signed.

Completing the Signature

Upon visiting, the client can enter their phone number, which on the back end, signs the client up with Authy. They are then prompted to be sent a verification code, and after entering the code, can then sign the contract. Once that happens, the document is stored to the database as signed, with a time stamp of the contract, as well as the information sent to the back end from the Authy API to verify Identity. After that, the contract will render as signed.

Further Details

After these aspects are done, the user can view all of their current contracts on a dashboard. Each contract would be rendered as a card that the user could click on to view the signed document and generate a PDF of it for documentation.

Back to blog...