Collaborative Document Signing Manager

See Live Version »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
   • User Stories
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
   • API Consumption

About The Project

This is a frontend application built with React.js that consumes the endpoints listed at https://dev-api.gettonote.com/api/docs.

It takes care of:

• User Authentication
• Document Upload of PDF files
• Dispaying PDF Documents
• Managing Document Signer Participation

Hence, requirements 1, 2, 3 and 5 were met.

Built With

• 
• 
• 
• 

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

You need to have npm installed on your computer in order to be able to install and run the project.

• npm

  npm install npm@latest -g

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. Clone the repo

   git clone https://github.com/Chizaram-Igolo/to-note.git

2. Install NPM packages

   npm install

3. Run the Project

   npm run dev

4. Navigate to http://127.0.0.1:5173/ (or the exposed port) on your favourite browser

Usage

The following shows the functionality of the application with respect to the endpoints provided.

API Consumption

// ./src/utils/constants.ts
export const API_URL = "https://dev-api.gettonote.com/api/v1/";

1. User Authentication

i. Logging in

POST https://dev-api.gettonote.com/api/v1/user/login

Component	API Call
./src/pages/Authentication/SignIn.tsx Login Screen	// ./src/utils/types.ts export type LoginValuesPrepared = { email: string, password: string, entry_point: string, }; // ./src/utils/api.ts export function login(data: LoginValuesPrepared) { return axios({ method: "post", url: `${API_URL}user/login`, headers, data, }); }

ii. Registering User

POST https://dev-api.gettonote.com/api/v1/user/register

Component	API Call
./src/pages/Authentication/SignUp.tsx Register Screen	// ./src/utils/types.ts export type RegisterValuesPrepared = { first_name: string, last_name: string, role: string, email: string, password: string, }; // ./src/utils/api.ts export function register(data: RegisterValuesPrepared) { return axios({ method: "post", url: `${API_URL}user/register`, headers, data, }); }

iii. Profile Details

GET https://dev-api.gettonote.com/api/v1/user/profile

Component

API Call

Name: John Doe Email: user@tonote.com Name: Woman Woman Email: wonderwoman@yahoo.com Name: Bill Gates Email: bill@tonote.com ./src/pages/Authentication/SignIn.tsx Register Screen

// ./src/utils/types.ts export type UserType = { access_locker_documents: boolean; address?: string | null; avatar?: string | null; bvn?: number | string | null; city?: string | null; country?: string | null; created_at: string | null; dob?: string | null; drivers_license_no: string | null; email: string; first_name: string; gender?: string; id: string; identity_number?: string | null; identity_type?: string | null; image: string; initials: string; ip_address: string; is_complete?: boolean | null; is_online: boolean; last_name: string; national_verification: boolean; nin?: string | number | null; permissions: string[]; phone?: string | null; role: string[]; state?: string | null; system_verification: boolean; updated_at: string; }; export function getProfile(token: Token) { return axios({ method: "get", url: `${API_URL}user/profile`, headers, params: token, });

2. Document Upload

POST https://dev-api.gettonote.com/api/v1/document-upload-convert

Component

API Call

Before upload After upload File too large ./src/pages/Dashboard/UploadDocument.tsx Upload Document Screen

// ./src/utils/types.ts export type FileData = { title: string, files: string[] | ArrayBuffer[], }; export type Token = { token?: string, token_type?: string, }; // Snippet that prepares the PDF content as a base64 string. // ./src/pages/Dashboard/UploadDocument. type FileChangeEventType = React.FormEvent<HTMLInputElement>; function handleFileChange (event: FileChangeEventType) { ... // FileReader function for read the file. let fileReader = new FileReader(); // Onload of file read the file content fileReader.onload = function (fileLoadedEvent) { const base64str = fileLoadedEvent.target.result; }; // Convert PDF data to base64 fileReader.readAsDataURL(file); ... } // ./src/utils/api.ts export function uploadDocument(data: FileData, token: Token) { return axios({ method: "post", url: `${API_URL}document-upload-convert`, headers: { Accept: "application/json", "Content-Type": "multipart/form-data", Authorization: `Bearer ${token.token}`, }, data, }); }

3. Displaying Document

i. Documents List

POST https://dev-api.gettonote.com/api/v1/documents

Component	API Call
./src/pages/Dashboard/DocumentsList.tsx Documents List Screen	// ./src/utils/types.ts export type Token = { token?: string, token_type?: string, }; // ./src/utils/api.ts export function getDocuments(token: Token) { return axios({ method: "get", url: `${API_URL}documents`, headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", Authorization: `Bearer ${token.token}`, }, }); }

ii. View Document

GET https://dev-api.gettonote.com/api/v1/documents/{document_id}

Component	API Call
./src/pages/Dashboard/DocumentsList.tsx Documents List Screen	// ./src/utils/types.ts export type Token = { token?: string, token_type?: string, }; // ./src/utils/api.ts export function getDocument(document_id: string, token: Token) { return axios({ method: "get", url: `${API_URL}documents/${document_id}`, headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", Authorization: `Bearer ${token.token}`, }, }); }

5. Document Participants

i. Add Self as Participant

GET https://dev-api.gettonote.com/api/v1/document-participant-add-self/{document_id}
POST https://dev-api.gettonote.com/api/v1/document-participants
POST https://dev-api.gettonote.com/api/v1/document-participants-send-email

Component

API Call

Retrieve Participants Display and Fill Form to Send Email Invite Email Invite Successfully Sent Participants List Updated (after page refresh) ./src/pages/Dashboard/ViewDocument.tsx ViewDocument Screen

// ./src/utils/types.ts export type Participant = { document_id: string, first_name: string, last_name: string, phone: string, email: string, role: string, }; export type EmailInviteData = { message: string, files: string[] | ArrayBuffer[], participants: Participant[], }; // ./src/utils/api.ts export function addSelfAsParticipant(document_id: string, token: Token) { return axios({ method: "get", url: `${API_URL}document-participant-add-self/${document_id}`, headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", Authorization: `Bearer ${token.token}`, }, }); } // This endpoint at // POST https://dev-api.gettonote.com/api/v1/document-participants // seems to not be working // Participants data were retrieved from the `document` object // `documentUploads` array where available. export function sendParticipantEmailInvitation( data: EmailInviteData, token: Token ) { return axios({ method: "post", url: `${API_URL}document-participants-send-email`, headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", Authorization: `Bearer ${token.token}`, }, data, }); }