CertifyPro 🎓

Modern certificate generation and verification platform with glassmorphic design

✨ Features

🎨 Modern UI/UX

• Glassmorphic Design: Beautiful purple/blue/pink gradient backgrounds with frosted glass effects
• Responsive Layout: Fully responsive design that works on all devices
• Dark Theme: Elegant dark mode with vibrant accent colors
• Smooth Animations: Polished transitions and micro-interactions

📜 Certificate Generation

• Visual Template Editor: Drag-and-drop field creation on certificate templates
• Bulk Generation: Process multiple certificates from Excel data
• Custom Fonts: Support for multiple font families and sizes
• QR Code Integration: Optional QR codes for instant verification
• ZIP Download: Automatically packages all certificates for download

🔍 Verification System

• Email Lookup: Search certificates by recipient email
• ID Verification: Direct certificate lookup by unique ID
• QR Scanning: Scan QR codes for instant verification
• LinkedIn Integration: Share certificates directly to LinkedIn
• Download Options: Download verified certificates as PDF

📊 Admin Dashboard

• Analytics Charts:
  • Bar chart showing certificates per event
  • Pie chart for download status tracking
• Event Management: Create and manage certificate events
• Recent Activity: Track recent certificate generations
• Export Data: Download certificate data as CSV

🗄️ Database Integration

• Supabase Backend: Secure PostgreSQL database
• Real-time Sync: Instant updates across all platforms
• Mock Data Support: Test without database configuration

🚀 Quick Start

Prerequisites

• Web browser (Chrome, Firefox, Safari, Edge)
• Python 3.x (for local development server)
• Supabase account (optional, for database features)

Local Setup

1. Clone the repository

git clone https://github.com/riyanshlunia/certifypro.git
cd certifypro

2. Start local server

python -m http.server 8000

3. Open in browser

http://localhost:8000

Supabase Configuration (Optional)

1. Create a Supabase project at supabase.com
2. Run the database setup scripts (see SUPABASE_SETUP.md)
3. Update credentials in assets/js/supabase-config.js:

// Update these values:
return 'https://your-project.supabase.co';
return 'your-anon-key';

Or set via localStorage:

localStorage.setItem('supabase_url', 'YOUR_URL');
localStorage.setItem('supabase_key', 'YOUR_KEY');

📁 Project Structure

certifypro/
├── index.html                    # Landing page
├── login.html                    # Authentication page
├── app.html                      # Certificate generator
├── admin-dashboard.html          # Analytics dashboard
├── verify.html                   # Verification portal
├── assets/
│   ├── css/
│   │   ├── style.css            # Global design system
│   │   ├── app.css              # Generator styles
│   │   ├── admin.css            # Dashboard styles
│   │   ├── verify.css           # Verification styles
│   │   └── auth.css             # Authentication styles
│   └── js/
│       ├── app.js               # Generator logic
│       ├── admin.js             # Dashboard logic
│       ├── verify.js            # Verification logic
│       ├── cert-worker.js       # Certificate processing worker
│       ├── email-service.js     # Email notifications
│       └── supabase-config.js   # Database configuration
└── README.md

🎨 Design System

Color Palette

• Primary: Purple (#667eea)
• Gradients: Purple → Blue → Pink
• Background: Dark slate with gradient overlays
• Text: Slate shades for hierarchy

Typography

• Font Family: Inter (Google Fonts)
• Weights: 300, 400, 500, 600, 700, 800

Components

• Glassmorphic cards with backdrop blur
• Gradient buttons with hover effects
• Animated hero badges
• Responsive navigation bars

🔧 Usage

Generating Certificates

1. Upload Template: Drag and drop your certificate image
2. Upload Excel Data: Provide recipient information in Excel format
3. Create Fields: Click and drag to create text fields on the template
4. Configure Fields:
   • Enter Excel column name (e.g., "name", "date")
   • Select font family
   • Set font size
5. Generate: Click "Generate & Download ZIP"

Verifying Certificates

1. Navigate to the Verify page
2. Enter recipient email or certificate ID
3. View certificate details and verification status
4. Download or share to LinkedIn

Managing Events

1. Access the Admin Dashboard
2. Click "Manage Events"
3. Create new events with details:
   • Event name
   • Date and location
   • Organization info
4. Track certificates per event in dashboard charts

📊 Dashboard Features

• Certificate Count: Total certificates generated
• Event Tracking: Bar chart of certificates per event
• Status Overview: Pie chart showing download status
• Recent Activity: List of recently generated certificates
• Data Export: Download all data as CSV

🌐 Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Opera

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License.

👨‍💻 Author

Riyansh Lunia

• GitHub: @riyanshlunia

🙏 Acknowledgments

• Design inspiration from modern web design trends
• Icons from Font Awesome
• Charts powered by Chart.js
• Database by Supabase
• Excel parsing via SheetJS

---

Made with ❤️ by Riyansh Lunia