ID Card Generator for intelligent technology
Project Overview
A powerful web-based ID card template designer and generator that allows you to create, customize, and generate ID cards with a user-friendly interface.
Features
- 🎨 Interactive canvas editor for precise field positioning
- 📝 Support for text and image fields
- 🎯 Grid system with snap-to-grid functionality
- 🎨 Rich text formatting options
- 🖼️ Support for both front and back card designs
- 📏 Precise positioning with coordinate system
- 🎯 Field alignment and sizing tools
- 🎨 Color picker with eyedropper tool
- 🔍 Zoom and pan controls
- 📱 Responsive design
Live Demo
Technology Stack
This project is built with a modern, full-stack technology stack to provide a feature-rich and seamless user experience.
Core Framework
- Next.js: A React framework for building full-stack web applications. Used for server-side rendering, routing, and API routes.
- React: A JavaScript library for building user interfaces.
Styling and UI
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- shadcn/ui: A collection of re-usable UI components.
- Radix UI: Provides unstyled, accessible UI primitives.
- Lucide Icons: A set of simply designed, beautiful icons.
- Framer Motion: A library for creating animations.
- clsx & tailwind-merge: Utilities for constructing dynamic and conflict-free class names.
Canvas and Document Generation
- Fabric.js: A powerful and simple JavaScript HTML5 canvas library. It is the core of the interactive canvas editor.
- html2canvas: For capturing screenshots of the generated ID cards.
- PDF-LIB: To create and modify PDF documents, enabling the export of ID cards as PDFs.
- @resvg/resvg-js: For rendering SVGs to PNGs.
- fontkit & @pdf-lib/fontkit: For handling custom fonts in generated PDFs.
Forms and Validation
- React Hook Form: For managing form state and validation.
- Zod: A TypeScript-first schema declaration and validation library.
Backend and Authentication
- Mongoose: An Object Data Modeling (ODM) library for MongoDB and Node.js.
- jsonwebtoken (JWT): For creating and verifying JSON Web Tokens for authentication.
- bcryptjs: For hashing passwords.
- Nodemailer: To send emails.
Data Handling
- ExcelJS & xlsx: For reading and writing Excel files, likely for bulk data import/export.
- JSZip & unzipper: For creating and reading ZIP files.
Development and Tooling
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- ESLint: For identifying and reporting on patterns found in ECMAScript/JavaScript code.
- PostCSS: A tool for transforming CSS with JavaScript plugins.
User Guide
Creating a New Card Template
-
Add Fields
- Drag fields from the "Available Fields" panel onto the canvas
- Fields can be text or image fields
-
Position Fields
- Click and drag fields to position them
- Use arrow keys for precise positioning
- Enable "Snap to Grid" for aligned placement
-
Customize Fields
- Select a field to edit its properties:
- Font family and size
- Text color and alignment
- Field dimensions
- Image shape (for image fields)
- Select a field to edit its properties:
-
Grid and Coordinates
- Toggle grid visibility
- Adjust grid size
- Show/hide coordinates
- Use zoom controls for detailed editing
Field Properties
Text Fields
- Font Family: Choose from 20+ fonts
- Font Size: 8-72px
- Font Weight: Normal/Bold
- Text Alignment: Left/Center/Right
- Color: Use color picker or eyedropper
Image Fields
- Shape: Rectangle/Circle/Square
- Dimensions: Width and Height
- Maintain Aspect Ratio option
Keyboard Shortcuts
- Arrow Keys: Move selected field
- Delete: Remove selected field
- Ctrl/Cmd + Z: Undo
- Ctrl/Cmd + Y: Redo
- Space + Drag: Pan canvas
- Mouse Wheel: Zoom in/out
Tips
-
Precise Positioning
- Use the grid system for alignment
- Enable coordinates for exact positioning
- Use arrow keys for 1px adjustments
-
Image Fields
- Choose appropriate shape for photos
- Maintain aspect ratio for consistent results
- Consider minimum size requirements
-
Text Fields
- Test different font sizes
- Ensure text is readable
- Use appropriate colors for contrast
Additionally it has the subscription based user options with modern security and functionalities
Support
For support, email [hello@tarikul.dev] or open an issue in the repository.
“We had a very specific and complex vision for an ID card designer, but after an extensive search, we came up empty. Every off-the-shelf solution was missing critical features, and other developers told us our requirements were too custom to be built feasibly. We were close to giving up. Then we found Tarikul. He was the only one who reviewed our list of features and confidently said he could build the exact tool we needed. He didn't just deliver; he exceeded all our expectations. The interactive canvas, the precise control over every element, and the seamless PDF generation were exactly what we had envisioned. He turned a problem we thought was impossible into a powerful, user-friendly reality. If you have a project that seems too unique for anyone else to handle, Tarikul is the person you call. His ability to deliver a truly custom solution is unmatched.”
Shamsul Alam
Manager (Technical)
Intelligent Technology
Technologies
Stats
Share
Get In Touch With TARIKUL
Let's work together
Contact Information
Feel free to reach out to me for any project or collaboration. I'm always open to discussing new projects, creative ideas or opportunities to be part of your visions.