Signwell - Document Signing Platform

A monolithic full-stack Node.js application with React 18+ TypeScript (.tsx) frontend using Vite and Express.js backend, providing document signature, create document using timyced professionally. Built for speed with TypeScript to protect source code and production-ready deployment.

**Note**: This project uses React `.tsx` scripts to prevent source code visibility in the browser. All files should be served from the `app.js` entry point with the site running in production mode on port 4041.


## 🎯 Overview
Roles
Superadmin  
Full control: can create documents, invite admins, and oversee all invitations while even admin might signed such document after the invited signed it or signed it before sending the request accordlingly.

Admin  
Logged in, can prepare documents and send invitations for signatures.

Inviter  
External user (not logged in). Receives invitation link/email to review and sign agreements/contracts.

📂 Document Creation Options
Upload & Edit Existing

Upload Word/PDF.

Mark specific fields (signature, date, initials) as editable.

Preserve original formatting and structure.

Create with Rich Text Editor

Use TinyMCE or similar editor.

Add headers, footers, images, and styled text.

Save as a formal document ready for signature.

📧 Invitation Flow
Admin/Superadmin sends invite → Inviter receives email with secure link.

Inviter reviews document → Can only view and sign designated fields and download it if allow after signined or waited for the sender to send it.

Signature captured → Document is finalized and stored in system or inviter will print name and generate different styling to select one.


## 🎯 Architecture

### Project Type
**Monolithic Full-Stack Node.js Application** - A single Node.js process serving both backend API and frontend static files with unified database operations on a single port (4041).

### Tech Stack
- **Frontend**: React 18+ with TypeScript (.tsx), Vite, Bootstrap 5
- **Backend**: Express.js, Node.js 22.15
- **Database**: SQLite 3
- **Email**: Nodemailer with SMTP
- **Port**: 4041
- **Build Tool**: Vite (optimized production builds)
- **CSS Framework**: Bootstrap 5 (responsive for all devices)

### Programming Languages
- **React** - Frontend UI framework
- **TypeScript** - Type safety for frontend code
- **JSX/TSX** - React component syntax
- **JavaScript** - Backend logic
- **SQL** - Database queries (SQLite)

### Project Structure



```
provided the structure here with a single node module in the root

🚀 Getting Started

the root page will then have the site overview where anyone might request to sales@makeitservices.org to have a membership for his company to have invite their signers to signed document.

one a sign in button at the top nav and home page and contact page with he membership options

### Dashboards
- **Super Admin Dashboard**: Full platform management, all Document management, admin control, membership revenue reports, payment management, need login
- **Admin Dashboard**: own Document management, membership tracking, signature requests to his inviter, need login
- **Signer Experience**: Secure access via tokenized link, signature placement, optional download, not need to login, simply using the link to access the document


### Authentication
- JWT-based authentication for admins
- Super Admin & Admin roles
- Secure tokenized links for signers (no login required)


### Document Management
- Create/edit with TinyMCE editor
- Insert signature fields and text placeholders
- Control download permissions
- Track signature status

### Security
- JWT authentication with expiration
- Tokenized links for signers
- Password hashing with bcryptjs
- CORS protection
- Document immutability verification
```


### Prerequisites
- Node.js 22.15

   
   Edit `.env` and add your configuration:
   ```
   PORT=4041
   NODE_ENV=production
   SMTP_HOST=smtp.gmail.com
   SMTP_PORT=587
   SMTP_USER=your-email@gmail.com
   SMTP_PASSWORD=your-app-password
   ADMIN_EMAIL=admin@fastlingual.com
   SUPPORT_EMAIL=support@fastlingual.com
   ```

4. **Build and run**
   ```bash
   npm run build
   ```

5. **Access the application**
   - Open `http://localhost:4041` in your browser

## 📚 Database Tables

### Core Tables
CREATE TABLE "documents" (
	"id"	INTEGER,
	"title"	TEXT NOT NULL,
	"description"	TEXT,
	"content"	TEXT NOT NULL,
	"createdBy"	INTEGER NOT NULL,
	"allowDownload"	INTEGER DEFAULT 1,
	"fileFormat"	TEXT DEFAULT 'pdf',
	"status"	TEXT DEFAULT 'draft',
	"createdAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	"updatedAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("createdBy") REFERENCES "users"("id")
);

CREATE TABLE "membership" (
	"id"	INTEGER,
	"userId"	INTEGER NOT NULL UNIQUE,
	"planType"	TEXT DEFAULT 'basic',
	"status"	TEXT DEFAULT 'active',
	"startDate"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	"endDate"	DATETIME,
	"autoRenew"	INTEGER DEFAULT 1,
	"price"	REAL,
	"currency"	TEXT DEFAULT 'USD',
	"paymentMethod"	TEXT,
	"stripeCustomerId"	TEXT,
	"stripeSubscriptionId"	TEXT,
	"createdAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	"updatedAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("userId") REFERENCES "users"("id")
);


CREATE TABLE "signatureFields" (
	"id"	INTEGER,
	"documentId"	INTEGER NOT NULL,
	"fieldId"	TEXT NOT NULL,
	"type"	TEXT NOT NULL,
	"coordinateX"	REAL,
	"coordinateY"	REAL,
	"page"	INTEGER,
	"width"	REAL,
	"height"	REAL,
	"required"	INTEGER DEFAULT 1,
	"assignedTo"	TEXT,
	"createdAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("documentId") REFERENCES "documents"("id")
);

CREATE TABLE "signatures" (
	"id"	INTEGER,
	"documentId"	INTEGER NOT NULL,
	"signerEmail"	TEXT NOT NULL,
	"signerName"	TEXT,
	"signatureImage"	TEXT NOT NULL,
	"fieldId"	TEXT,
	"ipAddress"	TEXT,
	"userAgent"	TEXT,
	"signedAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	"documentHash"	TEXT,
	"isInitial"	INTEGER DEFAULT 0,
	"createdAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	"updatedAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("documentId") REFERENCES "documents"("id")
);

CREATE TABLE "signers" (
	"id"	INTEGER,
	"documentId"	INTEGER NOT NULL,
	"email"	TEXT NOT NULL,
	"name"	TEXT,
	"status"	TEXT DEFAULT 'pending',
	"signerToken"	TEXT,
	"signedDate"	DATETIME,
	"createdAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("documentId") REFERENCES "documents"("id")
);


CREATE TABLE "users" (
	"id"	INTEGER,
	"email"	TEXT NOT NULL UNIQUE,
	"password"	TEXT NOT NULL,
	"firstName"	TEXT NOT NULL,
	"lastName"	TEXT NOT NULL,
	"role"	TEXT DEFAULT 'admin',
	"membershipStatus"	TEXT DEFAULT 'inactive',
	"membershipStartDate"	DATETIME,
	"membershipEndDate"	DATETIME,
	"company"	TEXT,
	"profileImage"	TEXT,
	"createdAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	"updatedAt"	DATETIME DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY("id" AUTOINCREMENT)
);


### Navigation Menu Items



### super-Admin & Management dashboard
super admin is the system owner, while admin is the buyer using membership payment. 
- **all action_logs** - Comprehensive action logging with descriptions
- **access_permissions** - Permission management system
- **user_permissions** - User permission assignments with approval workflow
- **site_visits** - Visitor tracking and analytics
-  create document using timyce editor
- invited signers to signed the edited document
- invited admin to have access to the dashboard
- view signed document signed by signers
- exported document 
- edit admins
- edit membership
- edit his profile

### Admin dashboard
- **his own action_logs** - Comprehensive action logging with descriptions
-  create his own document using timyce editor
- invited signers to signed  his own edited document
- view  his own signed document signed by signers
- exported document or download it
- edit his profile

### signer dashbord
note , signer will not need to login to the portal , only the signed will have a request invitation link from the admin or super-admin to signed the correct place of the document that indicated and then if the admin or supper admin was allow , to download this document.




### Email System
- HTML email templates with professional branding
- login notifications // to the person login
- document signed notifications // to the admin that was invited the person
- Admin registration notifications //to super-admin / general@makeitservices.org
- User welcome emails //to the personal registered email 
- Password reset emails //to the personal registered email 
- signed document emailed //to the personal registered email 
- Support for BCC recipients //to super-admin / general@makeitservices.org

### Analytics
- Site visitor tracking
  - IP address and geolocation (country, city, region)
  - Device type and brand detection
  - Browser and OS information
  - Session tracking
  - Returning visitor detection
- Visitor statistics dashboard
- Analytics dashboard with charts
- CSV export for reports

### Design & UX
- Responsive Bootstrap 5 design
- Mobile-friendly on all devices
- Dark mode support
- Smooth animations and transitions
- Modern card-based layouts
- Hover effects and badges
- Professional branding consistency with logo
- Improved services design with shadows and effects




**Core Fields:**
- **id** - Unique identifier
- **page_slug** - Unique URL slug 
- **page_title** - SEO page title
- **is_active** - Active/inactive status for the page

**Hero Section:**
- **hero_title** - Main headline for hero section
- **hero_subtitle** - Secondary text for hero section
- **hero_description** - Detailed hero section description
- **hero_image_url** - URL to hero background/feature image
- **hero_button_text** - Call-to-action button text
- **hero_button_url** - Call-to-action button link URL

**Content Sections:**
- **main_content** - Primary page body content
- **section_one_title** - Title for first content section
- **section_one_content** - Content for first content section
- **section_two_title** - Title for second content section
- **section_two_content** - Content for second content section

**SEO & Metadata:**
- **meta_description** - Meta description for search engines
- **meta_keywords** - Comma-separated keywords for SEO

**Audit Trail:**
- **created_by** - User ID who created the content
- **updated_by** - User ID who last updated the content
- **created_at** - Creation timestamp
- **updated_at** - Last update timestamp

### Default Site Content
- Bootstrap 5 responsive design optimized for all devices (mobile, tablet, desktop)
- Dark mode support
- Smooth animations and transitions
- Modern card-based layouts
- Professional hover effects and badges
- Responsive navigation bar with user profile dropdown
- Featured courses carousel
- Modern login/register modals
- Notifications and news banner
- Professional branding consistency with site logo
- Improved services design with shadows and visual enhancements
- "Courses" button and form for easy access
- Accessibility optimizations


### Required Core Packages
```bash
npm install multer
npm install nodemailer
npm install bootstrap
npm install sqlite3
npm install express
npm install cors
npm install dotenv
npm install uuid
npm install geoip-lite
npm install user-agent
npm install bcryptjs jsonwebtoken
npx vite build
```

### Dev Dependencies
```bash
npm install -D vite
npm install -D @vitejs/plugin-react
npm install -D react
npm install -D react-dom
npm install -D typescript
npm install -D terser
```

### Essential Packages
- **express** - Web framework
- **sqlite3** - Database driver
- **nodemailer** - Email service
- **multer** - File upload handling
- **dotenv** - Environment variables
- **cors** - Cross-origin resource sharing
- **uuid** - Unique identifiers
- **geoip-lite** - IP geolocation for visitor tracking
- **user-agent** - User agent parsing for device detection

### Dev Dependencies
- **vite** - Build tool and dev server
- **@vitejs/plugin-react** - React support for Vite
- **react** - UI library
- **react-dom** - React DOM rendering
- **typescript** - Type safety
- **terser** - JavaScript minification
**Version**: 1.0.0

==================

let re-crete the document structure to make it easier.

## create a document .

when created a document , there will be have such default field like the followings

1. [ADDRESS FIELD]
2. [INITIALS FIELD]
3. [DATE FIELD]
4. [CHECKBOX FIELD]
5. [SIGNATURE FIELD]
6. [NAME FIELD]
7. [Initial FIELD]

8. [Requestor ADDRESS FIELD]
9. [Requestor INITIALS FIELD]
10. [Requestor DATE FIELD]
11. [Requestor CHECKBOX FIELD]
12. [Requestor SIGNATURE FIELD]
13. [Requestor NAME FIELD]
14. [Requestor Initial FIELD]


the admin who created the document will simple check which one in the dropdown that the document will be required to the signers and requestors

note: the first 7 fields will be visible to signers , as the other 8 to 14 will be required to the admin to signed it. 

when signer is signed only his part should be visible to him.

# how field should be show.

in the same text these field should be onclick to show a popup to type the text accordingly of to write the name and choose a signature style. upon save to replaced it automatically in the live document that the signed is signed. 

## Features
the admin will indicated when created the document the followings
1- if signer should allow to download this document after signed when invited it //this should be save in the share_token table.
2- how many users should be able to signed this documents // this might save in the document table
3-the document content will then made using tinyce editor and should be able to add image also and professionally edit and next line and punctuations.
4- even if the signer done in signing his part, if that document has the requestor sign field , a button might appears to show req-sign now just for the requestor to ad his signatures 
5- the admin should be to download the orginal document in word, pdf, txt format. 
6- the admin should be to download the final signed document in word, pdf, txt format after anyone done in signing.
7- in the signer page , maybe the user might have a next button to show where to signed placed required .

if you have any issue please ask me i will help you know what to do