A lightweight barcode-scanning attendance tracking system built with Node.js. Employees scan barcodes or QR codes to check in/out, and admins can register employees, view attendance records, and export reports — all without needing a database server.
- Barcode/QR scanning — Uses the device camera to scan employee ID barcodes for instant check-in/check-out
- Automatic entry/exit detection — The system alternates between "entrada" (entry) and "salida" (exit) based on the last record
- Employee registration — Register employees with name, last name, position, ID number, and photo
- Photo upload — Upload employee photos via drag-and-drop (FilePond)
- Attendance reports — View all attendance records in a searchable, sortable DataTable
- Export options — Export reports to Excel, CSV, PDF, copy to clipboard, or print directly
- Zero database setup — All data is stored in a single JSON file (
public/registro.json) - Spanish language UI
| Layer | Technology |
|---|---|
| Backend | Node.js, Express |
| Frontend | Bootstrap 5, jQuery 3.6, DataTables 1.11 |
| Barcode scanning | Html5Qrcode |
| File uploads | FilePond (client) + Formidable (server) |
| PDF generation | PDFMake |
| Data storage | JSON file |
- Node.js v14 or higher
- A modern web browser (Chrome, Firefox, Edge)
- Camera access (for barcode scanning feature)
# 1. Clone the repository
git clone https://github.com/99Arrzel/PMSAC.git
cd PMSAC
# 2. Install dependencies
npm install
# 3. Start the server
npm startOpen http://localhost:3000 in your browser. That's it.
| URL | Description |
|---|---|
http://localhost:3000/ |
Main page — scan barcodes to mark attendance |
http://localhost:3000/registro_personal |
Employee registration and management |
- Register employees at
/registro_personal— enter their ID number, name, position, and upload a photo - Mark attendance at
/— scan an employee's barcode or enter their ID manually - The system automatically records the timestamp and determines if it's an entry or exit
- View reports — click "Ver todos los registros" to see all attendance records with export options
DIRECTORPERSONALPASANTE
| Method | Endpoint | Description |
|---|---|---|
GET |
/ |
Main attendance page |
GET |
/registro_personal |
Employee registration page |
POST |
/checkId |
Record attendance (body: id) |
POST |
/addUser |
Register new employee (body: id, nombre, apellido, puesto, img) |
POST |
/getMarcas |
Get attendance records for an employee (body: id) |
POST |
/img/upload |
Upload employee photo (multipart form) |
GET |
/public/registro.json |
Raw JSON data (used by DataTables) |
All data lives in public/registro.json:
{
"data": [
{
"colaborador": 1,
"nombre": "Andrés",
"apellido": "Carrillo",
"puesto": "Programador",
"img": "2.gif",
"marcas": [
{ "fecha": "2021/10/13", "hora": "13:58", "tipo": "entrada" },
{ "fecha": "2021/10/13", "hora": "17:00", "tipo": "salida" }
]
}
]
}PMSAC/
├── index.js # Express server (entry point)
├── index.html # Main attendance page
├── registro_personal.html # Employee registration page
├── package.json
├── public/
│ └── registro.json # Data file (the "database")
├── img/ # Employee photos
├── dependencias/
│ ├── js/ # Frontend JS libraries and custom scripts
│ └── css/ # Stylesheets
└── imagenes_datatables/ # DataTables icon assets
index.js— All server logic (routes, file I/O, upload handling)dependencias/js/indexPost.js— Attendance check-in/out client logicdependencias/js/validaciones.js— Form validation and user registrationdependencias/js/modalAsistencia.js— DataTable setup and export buttonsdependencias/js/qrAplicado.js— Barcode/QR scanning logicdependencias/js/filepondGozu.js— FilePond upload configuration
# Auto-reload on file changes
npm run devMIT



