QR Code Attendance System

The QR Code Attendance System is a web-based application designed to track visitors' attendance when using the Makerspace room. The system simplifies attendance management by leveraging QR codes for streamlined check-ins.

Features

For Visitors:

• QR Code Scanning: Visitors can scan a QR code to register their attendance.

• Confirmation Screen: Displays a confirmation message upon successful check-in.

For Admins:

• Dashboard Overview: View total visitor count (all-time) and filter attendance records by date.

• Filtered Data: Retrieve and display attendance records for a specific date.

Technologies Used

• Frontend:

  • HTML, CSS, JavaScript

  • EJS (Embedded JavaScript Templates) for dynamic rendering

• Backend:

  • Node.js with Express.js framework

• Database:

  • MongoDB for storing visitor data

How It Works

1. Visitor Check-In:

   • A visitor scans the QR code using their device.
   • Their attendance details (timestamp and unique visitor ID) are recorded in the database.

2. Admin Dashboard:

   • Admins log in to the dashboard to view attendance records.
   • They can filter visitor records by date or view the total number of visitors.

Installation Instructions

1. Clone the repository:

git clone https://github.com/ro0opy/QR-Code-Attendance-System

2. Navigate to the project directory:

cd qr-code-attendance-system

3. Install dependencies:

npm install

4. Set up the MongoDB database:

   • Create a new MongoDB database.

   • Update the database connection string in the index.js file:

       mongoose.connect('mongodb+srv://<username>:<password>@cluster.mongodb.net/attendanceDB', {
         useNewUrlParser: true,
         useUnifiedTopology: true,
       });
     

5. Start the server:

node index.js

6. Access the application in your browser:

http://localhost:3000

File Structure

    qr-code-attendance-system/
    ├── views/
    │   ├── admin.ejs       # Admin dashboard template
    │   ├── index.ejs       # Home page template
    │   ├── success.ejs     # Success message after check-in
    ├── public/
    │   ├── css/            # Static CSS files
    │   ├── js/             # Static JavaScript files
    ├── models/
    │   ├── visitor.js      # Mongoose schema for visitors
    ├── index.js            # Main server file
    ├── package.json        # Project metadata and dependencies