ISCP ID Generator — Letting Students Build Their Own School IDs

thumbnail

https://image.thum.io/get/width/1200/crop/630/https://iscpid.vercel.app

date

Jun 24, 2026

slug

iscp-id-generator

status

Published

The Idea

Getting an official school ID at the International State College of the Philippines was often a slow process involving manual forms and long wait times. I built the ISCP ID Generator so students could log in, enter their details, and generate a print-ready school ID card directly in their browser.

No graphic design tools required, and no waiting in line.

System Overview & Workflow

1. Student Auth: Sign in with Google OAuth via Firebase Authentication.

2. Information Input: Enter student details (Full Name, Course, Year Level, Student Number, Emergency Contact).

3. Client-Side Rendering: Live interactive preview of the ID card with customizable template themes and photo uploads.

4. Export Options: Instant browser rendering to high-resolution PNG or print-ready PDF.

5. Persistent Profile: Student data is saved in Firestore so returning users can update details or regenerate lost cards without starting over.

Tech Stack

Framework: Next.js 13 (App Router)

Language: TypeScript

Auth & Database: Firebase (Authentication + Firestore)

Styling: Tailwind CSS

Deployment & CI/CD: Vercel + GitHub Actions

Technical Highlights & Lessons Learned

1. Canvas vs DOM Rendering

To render high-DPI printable ID cards, I experimented with HTML5 Canvas vs DOM-to-Image libraries (`html2canvas` / `dom-to-image`). DOM-to-Image with SVG filters proved best for maintaining sharp typography across different printer resolutions.

2. Next.js App Router with Firebase

This project served as an early deep dive into the Next.js App Router architecture. I learned how to manage Firebase client SDK instances across client components while keeping API routes clean.

Source Code

The project is open source and available on GitHub: github.com/Adrian-stuff/iscp-id-generator