🆔 Identity Cards Management System

A full-stack web application for managing identity cards with advanced features, built using the MERN stack (MongoDB, Express.js, React.js, Node.js).

Live Demo | Report Bug

✨ Features

🎯 Core Functionality

• Create, read, update, and delete identity cards
• Image upload for photos and signatures
• PDF generation and preview
• QR code generation for each card
• Responsive design for all devices
• Multiple view options (Card/Table view)

💡 Advanced Features

• Real-time form validation
• Interactive UI with animations
• Secure file upload handling with size restrictions (500KB max)
• Advanced data visualization with charts
• Pagination and dynamic search
• Role-based authentication
• Admin dashboard with statistics
• Image compression and optimization
• Responsive design across all devices

🔒 Security Features

• JWT-based authentication
• Protected routes and API endpoints
• File upload validation and sanitization
• Input data validation
• Rate limiting protection
• Secure password handling

📊 Dashboard Features

• Activity trends visualization
• Gender distribution charts
• Religion distribution analytics
• Age group statistics
• Real-time data updates
• Customizable time ranges

---

📸 Screenshots & Interface

🔐 Login Interface

🖥️ Dashboard View

📝 Input Form Interface

🎴 Card View Layout

📋 List View Interface

📱 Card Detail Interface

📄 PDF Export Feature

Key Interface Features:

• Clean and intuitive dashboard layout
• Responsive card detail view
• Professional PDF export design
• Dark/Light mode support
• Mobile-friendly interface
• Interactive data tables
• Modern form controls

---

🛠️ Tech Stack

Frontend

• React.js with Vite
• Redux Toolkit for state management
• Bootstrap 5 with custom animations
• Chart.js for data visualization
• Axios for API integration
• jsPDF for document generation
• QR Code generation
• FontAwesome icons
• Custom CSS with responsive design

Backend

• Node.js & Express.js
• MongoDB with Mongoose
• Multer for file handling
• CORS enabled
• Rate limiting
• Environment variables

---

🚀 Live Demo

• Frontend: https://identity-card-system.vercel.app
• Backend: https://identity-card-system-backend.up.railway.app

📄 Exported PDF Example

---

📱 Application Structure

identity-card-system/
├── backend/
│   ├── routes/
│   ├── models/
│   ├── middleware/
│   ├── uploads/
│   ├── .env
│   ├── .env.production
│   ├── db.js
│   ├── index.js
│   └── README.md
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── redux/
│   │   ├── services/
│   │   ├── styles/
│   │   ├── utils/
│   │   ├── App.jsx
│   │   ├── App.css
│   │   ├── index.css
│   │   └── main.jsx
│   ├── .env
│   ├── .env.production
│   ├── public/
│   ├── index.html
│   ├── README.md
│   ├── vercel.json
│   └── vite.config.js
│
├── docs/
│        
├── .gitignore        
├── package-lock.json        # Project locked dependencies
├── package.json            # Project dependencies
└── README.md

---

🚀 Quick Start

Prerequisites

• Node.js (v14+)
• MongoDB
• npm/yarn

Installation

git clone https://github.com/QaiserEjaz/identity-card-system.git
cd identity-card-system

2. Backend Setup

cd backend
npm install

Create .env file in backend directory:

MONGODB_URI=your_mongodb_connection_string
PORT=5000

3. Frontend Setup

cd ../frontend
npm install

Create .env file in frontend directory:

VITE_API_URL=http://localhost:5000

---

👏 Acknowledgments

• Design Inspiration

  • Material Design Guidelines
  • Bootstrap Documentation & Examples
  • Dribbble ID Card Designs

• Technical Resources

  • React.js Documentation
  • MongoDB University Tutorials
  • Express.js Official Guides
  • Redux Toolkit Best Practices
  • Chart.js Examples Gallery

• Libraries & Tools

  • Bootstrap Themes
  • FontAwesome Icons
  • jsPDF Documentation
  • QRCode.react Examples
  • Axios HTTP Client
  • Multer File Upload
  • JWT Authentication
  • Vite Build Tool

• Development Tools

  • GitHub Version Control
  • Vercel Deployment
  • Railway Platform
  • MongoDB Atlas
  • VS Code Editor
  • Chrome DevTools

Engineered with ⚡ Precision by Qaiser Ejaz