Skip to content

🎯 A modern QR code-based attendance tracking system built with MERN stack. Features real-time attendance monitoring, admin dashboard, and detailed analytics. Mobile app for students to scan QR codes & web portal for administration. Perfect for universities & educational institutions.

Notifications You must be signed in to change notification settings

Mohammedaoudi/abes-qr-attendance

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

8 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

ENSAJ Attendance Management System πŸ“š

APP Logo

Made with MERN License Version

🌟 Overview

A modern, QR code-based attendance management system built for ENSAJ (Γ‰cole Nationale des Sciences AppliquΓ©es d'El Jadida). This system streamlines the attendance tracking process through an intuitive web interface for administrators and professors, complemented by a mobile application for students.

✨ Key Features

For Administrators πŸ‘¨β€πŸ’Ό

  • Comprehensive dashboard with real-time statistics
  • User management (students, professors)
  • Course and schedule management
  • Access to attendance reports and analytics
  • Department and class management

For Professors πŸ‘¨β€πŸ«

  • QR code generation for class sessions
  • Real-time attendance tracking
  • Course schedule viewing
  • Student attendance history
  • Export attendance reports

For Students πŸ“±

  • Mobile app for QR code scanning
  • View personal attendance records
  • Check class schedules
  • Real-time attendance confirmation

πŸ› οΈ Technology Stack

Technology Purpose
MongoDB Database
Express.js Backend Framework
React Frontend Web
Node.js Runtime Environment
React Native Mobile App

πŸš€ Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • MongoDB
  • npm or yarn
  • React Native environment setup (for mobile development)

Installation

  1. Clone the repository
git clone https://github.com/Mohammedaoudi/abes-qr-attendance.git
cd abes-qr-attendance
  1. Set up environment variables

Create .env files in both backend and frontend directories:

Backend .env:

PORT=5000
MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret

Frontend .env:

REACT_APP_API_URL=http://localhost:5000
  1. Install dependencies and start the servers
# Backend setup
cd backend
npm install
npm start

# Web setup
cd web
npm install
npm start

# Mobile setup
cd mobile
npm install
npx react-native run-android  # or run-ios

πŸ–₯️ Web Application Screenshots

Admin Dashboard

Admin Dashboard Stats Admin Dashboard Graph

Professor Interface

Professor Homepage QR Code Generation

Schedule and Attendance

Class Schedule Attendance Sheet

πŸ“± Mobile Application Screenshots

Mobile Login Student Home QR Scanner Attendance Confirmation

πŸŽ₯ Demo Video

demo.mp4

πŸ‘₯ Contributors

πŸ“„ License

This project is part of an academic project at ENSAJ (2023-2024) and is licensed under the terms of academic usage.

πŸ™ Acknowledgments

Special thanks to:

  • Prof. EL BOUJNOUNI Mohamed for project supervision
  • ENSAJ administration for their support
  • All testers and early adopters

Made with ❀️ by Team 2ITE | ENSAJ 2023-2024

Report Bug Β· Request Feature

About

🎯 A modern QR code-based attendance tracking system built with MERN stack. Features real-time attendance monitoring, admin dashboard, and detailed analytics. Mobile app for students to scan QR codes & web portal for administration. Perfect for universities & educational institutions.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published