✨ Signetly

A modern full-stack e-signature platform that enables users to upload PDF documents, invite signers, collect signatures, track document progress, maintain audit trails, and generate downloadable signed PDFs.

🌐 Live Demo

Frontend: https://signetly.vercel.app

The frontend requires a running Signetly backend. Set VITE_API_URL to that deployment's /api URL before building.

🎥 Demo Video

https://drive.google.com/file/d/1_etSmZYtuEhXMvWOdqZMzhgWJrSZKWnP/view?usp=drivesdk

---

🚀 Features

🔐 Authentication & Security

• User Registration & Login
• JWT Authentication
• Protected Routes
• Secure Password Hashing
• Document Ownership Validation

📄 Document Management

• Upload PDF Documents
• Dashboard-Based Document Tracking
• View Uploaded Documents
• Delete Documents
• Track Document Status

✍️ Digital Signatures

• Typed Signatures
• Drawn Signatures
• Drag-and-Drop Signature Placement
• Signature Position Persistence
• Edit Existing Signatures
• Delete Signatures

👥 Collaborative Signing

• Invite External Signers
• Secure Tokenized Signing Links
• Public Signing Workflow
• Signer Status Tracking
• Document Rejection Workflow
• Rejection Reason Tracking

📜 Audit Logging

Every important action is recorded:

• Document Uploads
• Signer Invitations
• Signature Placement
• Signature Updates
• Signature Deletion
• Document Signing
• Document Rejection
• Timestamp Tracking
• IP Address Tracking

📊 Status Lifecycle

Document Status

• Pending
• Partially Signed
• Signed
• Rejected

Signer Status

• Pending
• Signed

📥 PDF Generation

Powered by PDF-Lib:

• Embed Signatures
• Generate Signed PDFs
• Preserve Original Documents
• Export Downloadable Signed Versions

---

🏗️ System Architecture

Frontend (React + TypeScript)

        ↓

REST API (Node.js + Express)

        ↓

MongoDB Atlas

        ↓

PDF Processing Layer (PDF-Lib)

        ↓

Signed PDF Generation

---

🛠️ Tech Stack

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• React Router
• Axios
• React Hot Toast

Backend

• Node.js
• Express.js
• JWT Authentication
• Multer
• PDF-Lib

Database

• MongoDB Atlas
• Mongoose

Deployment

• Frontend: Vercel
• Backend: Railway
• Database: MongoDB Atlas

---

🚀 Local Setup

Signetly is split across two repositories:

• Frontend (this repository): React + Vite
• Backend: Keerti707/Signetly-backend

Prerequisites

• Node.js 20 or newer
• npm
• MongoDB (local or Atlas)

1. Start the backend

git clone https://github.com/Keerti707/Signetly-backend.git
cd Signetly-backend
npm install

Create Signetly-backend/.env:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=replace_with_a_long_random_secret
PORT=5000
FRONTEND_URL=http://localhost:5173
BACKEND_URL=http://localhost:5000

Then start the API:

npm run dev

Verify it at http://localhost:5000. The response should say that the Signetly backend is running.

2. Start the frontend

git clone https://github.com/Keerti707/Signetly.git
cd Signetly
npm install
cp .env.example .env.local
npm run dev

Open the local URL printed by Vite. The example configuration connects to http://localhost:5000/api.

Environment variables

Repository	Variable	Required	Description
Frontend	VITE_API_URL	Production	Public backend base URL, including /api
Backend	MONGO_URI	Yes	MongoDB connection string
Backend	JWT_SECRET	Yes	Secret used to sign and verify JWTs
Backend	PORT	No	API port; defaults to 5000
Backend	FRONTEND_URL	Production	Public frontend URL used to generate signer links
Backend	BACKEND_URL	Production	Public backend origin used to generate uploaded-file URLs

VITE_API_URL is bundled into client-side JavaScript and is therefore public. Never put secrets in a VITE_ variable.

Production deployment

1. Deploy the backend and configure MONGO_URI, JWT_SECRET, FRONTEND_URL, and BACKEND_URL in Railway.
2. Confirm the backend root URL returns a successful JSON response.
3. In Vercel, set VITE_API_URL for Production, Preview, and Development to https://<your-backend-domain>/api.
4. Redeploy the frontend after changing VITE_API_URL; Vite reads it at build time.

Login troubleshooting

• Application not found: the Railway service URL no longer points to an active deployment. Redeploy the backend and update VITE_API_URL in Vercel.
• The API is not configured: create .env.local locally or add VITE_API_URL in Vercel, then restart/redeploy.
• The server is unavailable: check the backend health URL, Railway logs, MongoDB access rules, and the value of VITE_API_URL.
• Invalid or expired token: sign in again; the frontend clears expired sessions automatically.

---

📂 Project Structure

Signetly (this repository)
├── public
├── screenshots
└── src
    ├── assets
    ├── components
    ├── pages
    └── services

Signetly-backend (separate repository)
├── controllers
├── middleware
├── models
├── routes
└── uploads

---

🔄 Complete Workflow

Document Owner

1. Register/Login
2. Upload PDF
3. Add Signature
4. Invite Signers
5. Share Signing Link
6. Track Signing Progress
7. Download Signed PDF

Signer

1. Open Signing Link
2. Verify Email
3. Sign Document
4. Submit Signature

---

📸 Screenshots

Landing Page

Dashboard

Upload Document

Document Management

Shared Signing Page

Signed PDF Output

---

🎯 Skills Demonstrated

• Full-Stack Development
• SaaS Product Design
• REST API Development
• JWT Authentication
• MongoDB Data Modeling
• PDF Processing
• Audit Logging
• Secure File Handling
• Document Lifecycle Management
• Responsive UI Design
• Cloud Deployment

---

🚀 Future Enhancements

• Email Delivery Integration
• Cloud Storage (AWS S3)
• OTP Verification
• Multi-Page Signing
• Real-Time Notifications
• Role-Based Permissions
• Signature Certificates
• Team Workspaces

---

👩‍💻 Author

Keerti Gupta

Built as a portfolio-grade SaaS application demonstrating secure document lifecycle management, digital signatures, audit logging, collaborative workflows, and PDF generation.