DigiCertificate

DigiCertificate is a multi-tenant SaaS platform built for event organizers, academic institutions, and online course providers to issue, deliver, and verify tamper-proof digital certificates.

The platform provides a visual certificate canvas editor, bulk Excel processing, dynamic QR code verification, transactional email distribution via Resend, 1-click LinkedIn profile credential sharing, and Paddle subscription billing.

---

Key Features

1. Visual Template & Canvas Editor

• Upload custom certificate background templates (PNG, SVG).
• Dynamic drag-and-drop placeholder positioning for recipient names and multi-line descriptions.
• Customizable font families, font sizes, text alignment, and colors using Konva canvas rendering.

2. Bulk Generation & Self-Service Claiming

• Participant Claiming: Public event pages where attendees input verified details to self-serve claim and download their credentials.
• Bulk Excel Import: Batch upload .xlsx spreadsheets to generate hundreds of certificates concurrently.
• Client-side rendering and ZIP archive generation for offline downloads.

3. Verifiable Credentials & Live Verification Portal

• Tamper-Proof IDs: Unique, unforgeable NanoID assigned to every issued certificate.
• Dynamic QR Codes: Automated QR code generation embedded on certificates leading directly to the public verification endpoint (/verify/:certId).
• Zero-Storage Live Re-rendering: Certificates are rendered live on-demand from the event template and verified database record, eliminating storage costs for rendered image blobs while ensuring authenticity.
• Revocation Control: Real-time credential revocation management from the organization admin panel.

4. 1-Click LinkedIn Profile Credential Sharing

• Integrated LinkedIn Add to Profile deep-link modal.
• Automatically pre-populates certification title, issuing organization name, issue date, credential ID, and verification link.
• One-click credential link copying and media image download helper.

5. Bulk Transactional Email Delivery

• Transactional email dispatch powered by the Resend API.
• Delivers unique claim and verification links directly to recipient inboxes.
• Real-time delivery progress monitoring (sent, pending, failed) with a "Resend Failed Only" retry mechanism.

6. Multi-Tenant Organization & Billing Infrastructure

• Workspace organization model with role-based access control (owner, admin).
• Tiered subscription plans (Free, Starter, Growth, Enterprise) with monthly quotas for certificates, events, and emails.
• Paddle checkout integration with automated webhook synchronization for instant upgrades.

---

Technical Stack

• Frontend: React 19, Vite, Tailwind CSS, React Router v7
• Canvas & Export: Konva (react-konva), jsPDF, html2canvas, SVG2PDF, JSZip, SheetJS (xlsx), QRCode
• Backend & Database: Vercel Serverless Functions, Node.js, Firebase Admin SDK, Cloud Firestore
• Authentication: Firebase Authentication
• Integrations: Resend API (Transactional Email), Paddle (Subscription Billing)

---

System Architecture

                               ┌───────────────────────────┐
                               │     Client Web App        │
                               │  (React 19 + Vite + Canvas)│
                               └─────────────┬─────────────┘
                                             │
                      ┌──────────────────────┴──────────────────────┐
                      ▼                                             ▼
          ┌───────────────────────┐                     ┌───────────────────────┐
          │ Vercel API Endpoints  │                     │ Firebase Auth & Client│
          │  (Node.js Serverless) │                     │     Firestore SDK     │
          └───────────┬───────────┘                     └───────────────────────┘
                      │
   ┌──────────────────┼──────────────────┬──────────────────┐
   ▼                  ▼                  ▼                  ▼
┌──────────────┐   ┌──────────────┐   ┌──────────────┐   ┌──────────────┐
│  Cloud       │   │  Firebase    │   │  Resend API  │   │  Paddle      │
│  Firestore   │   │  Admin SDK   │   │ (Email API)  │   │  Webhooks    │
└──────────────┘   └──────────────┘   └──────────────┘   └──────────────┘

---

Project Structure

DigiCertificate/
├── api/                   # Vercel Serverless entry points & route wrappers
│   ├── index.js           # Serverless route router
│   └── billing/           # Paddle webhook & checkout handlers
├── server/                # Backend domain handlers
│   ├── lib/               # Auth verification, Firebase Admin, plan limits
│   └── routes/            # API endpoints (certificates, events, email, billing)
├── src/                   # React frontend application
│   ├── components/        # Reusable UI components & modals (LinkedInAddModal, etc.)
│   ├── context/           # AuthContext & global state providers
│   ├── pages/             # Admin, Verification, Claiming, and Editor pages
│   └── utils/             # Certificate canvas rendering & export helpers
├── firestore.rules        # Security rules for Cloud Firestore
├── vercel.json            # Vercel serverless build & rewrite rules
├── vite.config.js         # Vite configuration & plugin pipeline
└── package.json           # Node.js dependencies and scripts

---

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn
• Firebase Project with Firestore and Authentication enabled
• Resend Account (for email delivery)
• Paddle Vendor Account (for subscription billing)

Installation

1. Clone the repository:

   git clone https://github.com/umarfarooq3488/DigiCertificate.git
   cd DigiCertificate

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env.local file in the root directory:

   # Firebase Client SDK Configuration
   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   
   # Firebase Admin Service Account (JSON stringified)
   FIREBASE_SERVICE_ACCOUNT='{"type":"service_account",...}'
   
   # Resend Transactional Email API
   RESEND_API_KEY=re_123456789
   
   # Paddle Subscription Billing Configuration
   VITE_PADDLE_CLIENT_TOKEN=test_abcdef123456
   VITE_PADDLE_ENV=sandbox # or 'production'
   PADDLE_API_KEY=pdl_123456789
   PADDLE_WEBHOOK_SECRET_KEY=pdl_whsec_123456789

4. Start Development Server:

   npm run dev

5. Build for Production:

   npm run build

---

API Routes

Endpoint	Method	Description
/api/certificates/verify	POST	Fetches verified certificate metadata & event details for public verification.
/api/certificates/claim	POST	Handles self-service certificate claiming for event attendees.
/api/certificates/register-bulk	POST	Bulk registers recipient certificates to Firestore.
/api/email/send-bulk	POST	Processes batch transactional email sends via Resend.
/api/events/create	POST	Creates a new event under the organization account.
/api/events/public	POST	Fetches public event data for claim pages.
/api/organizations/create	POST	Initializes a new organization account workspace.
/api/billing/create-checkout	POST	Generates Paddle checkout transaction parameters.
/api/billing/sync-checkout	POST	Immediately verifies completed checkout transactions with Paddle.
/api/billing/webhook	POST	Processes incoming Paddle subscription status events.

---

Security & Access Control

• Server-Side Trust Boundary: Sensitive operations (certificate creation, bulk email dispatch, subscription management, revocation) are executed strictly via Serverless API endpoints using the Firebase Admin SDK.
• Firestore Security Rules: Direct client-side database access is restricted by firestore.rules to prevent unauthorized document manipulation or unverified certificate generation.

---

License

This project is licensed under the MIT License.