Certificate Generator: Full-Stack Digital Certificate Management System

This case study is shared while respecting confidentiality agreement. I've ensured to keep it engaging while protecting sensitive information.

Project Overview

Certificate Generator System is a full-stack digital certificate management platform built with Next.js 14, MongoDB, and TypeScript. The application enables administrators to generate and manage certificates for AI training courses while providing public certificate verification and social sharing capabilities.

Technical Architecture

Stack: Next.js 14 (App Router) | TypeScript | MongoDB | Tailwind CSS | pdf-lib

The application follows a layered architecture pattern with clear separation between presentation, business logic, and data access layers. Next.js API routes serve as the backend, leveraging server-side rendering for SEO optimization and middleware-based authentication for route protection.

Key Technical Challenges & Solutions

1. Client-Side PDF Generation with Dynamic Text Fitting

The most technically challenging feature was implementing client-side PDF generation that dynamically sizes and positions text to fit within certificate templates.

Challenge: Course names of varying lengths needed to fit elegantly within a fixed space on the certificate, with automatic text wrapping and font scaling.

Solution: Built a sophisticated algorithm in the useGenerateCertificate hook that:

• Calculates available box width (70% of page width)
• Implements smart text wrapping across multiple lines
• Auto-scales font size from 115px down to 36px minimum
• Centers text both horizontally and vertically
• Handles edge cases like extremely long course names

// Dynamic text fitting algorithm
const boxWidth = pageWidth * 0.7;
let fontSize = 115;
while (fontSize >= 36) {
  const lines = wrapText(courseName, fontSize, boxWidth);
  if (textFitsInBox(lines, fontSize, boxHeight)) break;
  fontSize -= 5;
}

2. Performance Optimization Through Aggressive Caching

Challenge: PDF generation requires loading fonts and templates, which are expensive network operations that would cause delays on every certificate view.

Solution: Implemented a singleton pattern for font loading and template caching:

• Font loaded once per session using a promise singleton
• PDF templates cached by path in a dictionary
• Eliminates redundant network requests across re-renders
• Reduces certificate generation time by ~80%

3. Custom CSV Parser for Bulk Operations

Challenge: Needed robust CSV parsing that handles edge cases without adding third-party dependencies.

Solution: Built a custom CSV parser from scratch that:

• Correctly handles quoted fields with embedded commas
• Escapes double quotes properly
• Integrates with Zod validation schemas
• Provides row-by-row error highlighting
• Detects duplicate emails before submission

4. Security Through Defense in Depth

Challenge: Protect admin routes and operations without complex authentication infrastructure.

Implementation:

• Admin routes intentionally hidden (no UI links to /access/secure-login)
• Custom token system with HMAC-based signatures
• SHA-256 password hashing with environment variables
• Timing-safe comparison functions to prevent timing attacks
• Middleware-based route protection at the edge
• HttpOnly cookies for token storage

5. PDF to Image Conversion in Browser

Challenge: Display certificate previews without server-side rendering.

Solution: Leveraged pdfjs-dist to convert generated PDFs to PNG images entirely in the browser:

• Load PDF using getDocument with typed arrays
• Render to canvas with appropriate scale
• Convert canvas to blob for download or display
• All processing happens client-side for instant feedback

Architecture Decisions

Why Next.js 14 App Router?

• Server-side rendering for SEO (critical for certificate verification pages)
• API routes co-located with frontend code
• Middleware support for authentication
• React Server Components for optimal performance

Why MongoDB?

• Document model maps naturally to certificate data structure
• Flexible schema for evolving requirements
• Simple deployment with Mongoose ODM
• No complex relationships required

Why pdf-lib Over Server-Side Generation?

Client-side PDF generation provides:

• Zero server load for certificate generation
• Instant preview without round-trips
• No server-side dependencies or file storage
• Reduced hosting costs and complexity

Code Quality Patterns

• Type Safety: Full TypeScript coverage with Zod runtime validation at API boundaries ensures type safety from frontend to database
• Component Reusability: Modular component system with clear responsibilities (GenerateCertificate, ShareCertificate, Modal components)
• Error Handling: Comprehensive error handling with user-friendly messages and loading states throughout the application
• Validation: Dual validation (client + server) prevents invalid data while providing instant user feedback

Performance Metrics

Key Learnings

1. Client-side processing wins: Moving PDF generation to the client eliminated scaling concerns and reduced infrastructure costs significantly.

2. Caching is critical: Aggressive caching of fonts and templates made the difference between a slow and snappy user experience.

3. Custom solutions sometimes better: The custom CSV parser (100 lines) proved more reliable than third-party libraries while avoiding dependency bloat.

4. Security through obscurity has limits: While hidden routes add a layer of protection, defense in depth with proper authentication and validation is essential.

5. Type safety pays dividends: TypeScript + Zod caught numerous bugs during development and made refactoring fearless.

Future Technical Enhancements

• Add Redis caching for certificate verification queries
• Implement rate limiting on public API endpoints
• Add PDF generation worker threads for bulk operations
• Introduce automated testing with Playwright
• Add certificate template versioning system
• Implement certificate revocation mechanism

Conclusion

The Certificate Generator System demonstrates how thoughtful architecture and creative problem-solving can deliver a robust, performant application. By leveraging client-side processing, aggressive caching, and defense-in-depth security, the system handles certificate generation and verification at scale while maintaining a clean, maintainable codebase.