Overview | Features | Stack | Wiki | Styling
Overview
SignDocs allows users to digitally sign documents, send those documents to others for signature, and track who has not yet signed. A user can create a digital representation of their signature by either using a selection of fonts or by using a trackpad/mouse. To prepare a document for signatures, users can upload a PDF or Word document and then drag and drop different types of fields onto the document for their signatories to fill out. They can then route the document directly to their signatories' email and track completion.
Features
Signature development
Choose your style
A signature is an expression of one's personality, and demands more than choosing a dry sans-serif font to make their mark. SignDocs gives users a more diverse collection of typefaces to choose from to add a personal touch.
Write your own autograph
Alternatively, users can draw their signature directly by using a mouse or trackpad.
Document preparation
After uploading a document and adding signatories, users can drag-and-drop content fields onto the document which will later be filled with signatories' personal information. This can be their signature or text, such as the current date or their name. The content fields are assigned to specific users, so only they can fill out that information. Once they've reviewed the document, signatories can simply click the Sign button and apply their signature, and the document owner will be notified.
Stack used
Backend
- Ruby on Rails (5.2.3)
- PostgreSQL DB
- AWS S3 (document and image storage)
Frontend
- React with Redux for local state management
Select libraries used
- react-pdf for displaying PDF files
- react-dnd for drag-and-drop functionality
- react-select for beautiful and functional select inputs
- AWS KMS SDK to create public keys
- react-svgmt for loading remote SVGs
- react-signature-canvas to allow custom signatures
- zxcvbn for password-strength feedback
Styling
A little elevation
Users want to immediately know what surfaces they can interact with. A small elevation change makes all the difference. Inspired by Material Design.
Lower contrast, more whitespace
Black text on a white background can be too harsh. SignDocs takes inspiration from this NSFW website and sets the background color to an off-white, and main text to a very dark blue. Hover states are demure, enough to show a reaction without shocking.