🎓 Advanced Certificate Generator

A powerful, full-featured web application for designing, generating, and verifying professional digital certificates. Built with a modern tech stack featuring a visual drag-and-drop editor, bulk generation capabilities, and blockchain-ready verification system.

---

✨ Features

🎨 Visual Certificate Designer

• Drag & Drop Editor - Intuitive canvas-based design interface powered by Fabric.js
• Rich Text Formatting - Multiple fonts, sizes, colors, and styles (bold, italic, underline)
• Shape Tools - Add rectangles, circles, lines, and decorative elements
• Image Support - Upload logos, seals, signatures, and background images
• Template System - Save, load, and share certificate templates
• Real-time Preview - See changes instantly as you design

📑 Certificate Generation

• Single Generation - Create individual certificates with custom data
• Bulk Generation via CSV - Generate hundreds of certificates from spreadsheet data
• Field Mapping - Map CSV columns to certificate placeholders
• Multiple Export Formats - Download as PDF or high-quality images (PNG/JPEG)

✅ Verification System

• Unique Verification Links - Each certificate gets a cryptographically unique URL
• QR Code Integration - Embed scannable QR codes for instant verification
• Public Verification Portal - Recipients can verify certificate authenticity online
• Anti-Forgery Protection - Server-side validation prevents tampering

🔐 Authentication & Security

• Firebase Authentication - Secure email/password authentication
• Session Management - Persistent sessions with secure cookie handling
• Protected Routes - Design interface requires authentication
• Environment-based Configuration - Sensitive data stored in environment variables

---

🛠️ Tech Stack

Category	Technology
Runtime	Node.js 18+
Framework	Express.js 4.x
Template Engine	EJS
Canvas Library	Fabric.js 5.x
Authentication	Firebase Auth
Database	Firebase Firestore
PDF Generation	jsPDF, pdf-lib
CSV Parsing	PapaParse
Styling	Tailwind CSS, Custom CSS

---

🚀 Quick Start

Prerequisites

• Node.js 18.x or higher
• npm or yarn
• Firebase project (optional for development mode)

Installation

# Clone the repository
git clone https://github.com/bbinxx/advanced-certificate-generator.git
cd advanced-certificate-generator

# Install dependencies
npm install

# Copy environment template
cp .env.example .env

# Start development server (no Firebase required)
npm run dev

Development Modes

Command	Description
npm run dev	No-Auth Mode - Runs without Firebase, perfect for UI development
npm run dev:auth	Full Auth Mode - Runs with complete Firebase authentication
npm start	Production Mode - Runs the production server

No-Auth Development Mode

npm run dev

• ✅ Skips Firebase authentication
• ✅ Auto-creates mock user session
• ✅ Redirects directly to design page
• ✅ Uses in-memory mock data for certificates
• ⚡ Perfect for rapid UI/feature development

Full Authentication Mode

npm run dev:auth

• 🔐 Requires Firebase configuration
• 🔐 Full sign-in/sign-up flow
• 🔐 Persists data to Firestore
• 🧪 Test complete authentication flow

---

⚙️ Environment Configuration

Create a .env file in the root directory:

# Session Configuration (REQUIRED)
SESSION_SECRET=your-super-secret-session-key

# Firebase Configuration (Required for npm run dev:auth)
FIREBASE_API_KEY=your-firebase-api-key
FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
FIREBASE_DATABASE_URL=https://your-project-id.firebaseio.com
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
FIREBASE_APP_ID=your-firebase-app-id
FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

# Application Settings
NODE_ENV=development
PORT=3000
LOG_LEVEL=0

---

📁 Project Structure

advanced-certificate-generator/
├── src/
│   ├── app.js              # Express application entry point
│   ├── auth.js             # Authentication logic
│   ├── firebase.js         # Firebase initialization
│   ├── firebaseConfig.js   # Firebase configuration
│   ├── firestore.js        # Firestore database operations
│   └── utils/
│       └── errorHandler.js # Custom error handling
├── public/
│   ├── js/
│   │   ├── main.js         # Application entry point
│   │   └── modules/        # Modular JavaScript components
│   │       ├── canvasManagement.js
│   │       ├── elementManagement.js
│   │       ├── textFormatting.js
│   │       ├── csvHandling.js
│   │       ├── saveAsFile.js
│   │       ├── templateManager.js
│   │       └── ...
│   └── css/
│       └── styles.css      # Custom styles
├── views/
│   ├── design.ejs          # Certificate designer page
│   ├── index.ejs           # Landing page
│   ├── signin.ejs          # Sign in page
│   ├── signup.ejs          # Sign up page
│   ├── certificateVerified.ejs
│   └── error.ejs
├── .env.example            # Environment template
└── package.json

---

🔌 API Endpoints

Authentication

Method	Endpoint	Description
GET	/signin	Sign in page
POST	/signin	Authenticate user
GET	/signup	Sign up page
POST	/signup	Create new account
GET	/logout	End user session

Certificate Operations

Method	Endpoint	Description
POST	/api/certificate/add	Create new certificate
GET	/api/certificate/verify/:linkId	Verify certificate (public)
GET	/api/certificate/status/:certificateId	Check certificate status

Protected Routes

Method	Endpoint	Description
GET	/design	Certificate designer (requires auth)

---

📖 Usage Guide

1. Design Your Certificate

1. Access the design interface at /design

2. Use the sidebar tools to add elements:

   • 📝 Text - Add titles, names, dates, descriptions
   • 🔷 Shapes - Add rectangles, circles, lines
   • 🖼️ Images - Upload logos, seals, signatures
   • 🎨 Background - Set colors or background images

3. Customize elements with the formatting toolbar:

   • Font family, size, and color
   • Bold, italic, underline
   • Alignment options

2. Generate Certificates

Single Certificate

1. Design your template
2. Fill in the recipient details
3. Click "Save as PDF" or "Save as Image"

Bulk Generation (CSV)

1. Click the CSV icon in the sidebar
2. Upload your CSV file with recipient data
3. Map CSV columns to certificate fields
4. Generate all certificates at once

3. Verify Certificates

Each generated certificate receives:

• A unique verification link
• An optional QR code for quick scanning
• Entry in the verification database

Recipients can verify at: your-domain.com/api/certificate/verify/{linkId}

---

🧪 Development

Running Tests

npm test

Code Style

The project follows standard JavaScript conventions with ESLint.

Hot Reload

Development server uses nodemon for automatic restart on file changes.

---

🔒 Security Features

• Environment Variables - All sensitive data stored in .env
• Session Security - HTTP-only, secure cookies with SameSite protection
• CORS Configuration - Restricted origins in production
• Security Headers - X-Content-Type-Options, X-Frame-Options, X-XSS-Protection
• Input Validation - Server-side validation for all user inputs
• HTTPS Ready - Automatic secure cookie handling in production

---

🗺️ Roadmap

• Visual certificate designer
• Firebase authentication
• Certificate verification system
• CSV bulk generation
• PDF/Image export
• Development mode without auth
• Template marketplace
• Blockchain-based verification
• Email delivery integration
• Custom fonts upload
• Multi-language support
• Mobile responsive designer

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Fabric.js - Powerful canvas library
• Firebase - Authentication and database
• Express.js - Web framework
• jsPDF - PDF generation
• PapaParse - CSV parsing
• Tailwind CSS - Utility-first CSS

---

Made with ❤️ for creating beautiful certificates