Skip to content
ReleasedWeb

Automatic ID Card Generator

Fill in a form, get a print-ready Bangla student ID card

A small web app that makes student ID cards for পারুলকান্দি নূরানী তালিমুল কুরআন একাডেমি হাফিজিয়া মাদ্রাসা. The office enters a student's photo, name, class, roll, father's name, address and phone once. The app saves the record and draws the card itself on a canvas, with the madrasa's header, a round photo and every field in a proper Bangla font, then downloads it as a 300 DPI PNG at standard ID-card size.

automatic-id-card-generator.app
Automatic ID Card Generator

Automatic ID Card Generator

Fill in a form, get a print-ready Bangla student ID card

Status
Released
Platform
Web
Stack
6 technologies
Source
Open source

Why I built it

Designing every student's card by hand in a graphics app is slow, and a single typo means redoing the whole card. Turning the card into code makes every card consistent, and a fix is just an edit and a re-download.

My role

Sole developer.

How it fits together

4 layers

  1. 01Student form (HTML + JS)
  2. 02PHP endpoints with prepared statements
  3. 03MySQL students table (utf8mb4)
  4. 04Canvas renderer with Bangla fonts

Key features

  • Card drawn automatically from the student's details
  • Bangla fonts (Kalpurush, SutonnyMJ) so names look right
  • Photo upload, cropped into a circle
  • Edit a student and reprint the card
  • Previous and next buttons to flip through students
  • 300 DPI PNG at standard ID-card size, ready to print

Built with

  • JavaScript
  • Canvas API
  • PHP
  • MySQL
  • HTML
  • CSS

More projects

View all

Pong

The 1972 arcade classic in about 280 lines of plain JavaScript

A browser version of Pong you can play right now, on a laptop or a phone. You're the left paddle, the computer is the right one, and two counters keep score: green for every return, red for every miss. No framework, no build step, just HTML5 Canvas and vanilla JavaScript.

Case study

SkyJourney

Flight booking web platform

A Java-based airline web application covering flight information, company details, and customer inquiries, built on JSP/Servlets with a Maven build pipeline.

Case study