📚 Attendance Tracking System

Hey Everyone,

I'm delighted to announce a major update for our Attendance Management System. We've developed a comprehensive web application utilizing the MERN stack, comprising MongoDB, Express.js, React.js, and Node.js, alongside Firebase Authentication and Storage. This innovative system simplifies the process of managing student attendance, offering unparalleled ease in tracking, updating, and exporting attendance records, thus enhancing overall efficiency and accuracy

👋 Introduction
✨ Features
🛠️ Technologies Used
🔧 Prerequisites
🚀 Installation
📖 Usage
📡 API Endpoints
📂 Folder Structure
🤝 Contributing
📧 Contact

Introduction

The Attendance Management System is a web application built using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Firebase Authentication and Storage. It provides a comprehensive solution for managing student attendance, adding or removing student data, and generating attendance reports.

Features

🔐 User Authentication: Securely register and login with email and password using Firebase Authentication. This ensures that only authorized personnel can access and manage the system.
📋 Manage Attendance:
- View Attendance: Displays a list of all students with their names, register numbers, and images.
- Search Students: Quickly find students by their name.
- Update Attendance: Admins can mark students as present or absent using radio buttons, updating their status multiple times throughout the day. The system maintains the attendance status for the current date, resetting it automatically at the start of each new day.
📝 Student Data Management:
- Add Student: Capture essential student information including name, register number, and image. Images are stored in Firebase Storage, renamed with the student's register number for unique identification.
- Delete Student: Remove student records easily by entering their register number, which deletes both the record from MongoDB and the image from Firebase Storage.
- Retrieve Student: Fetch student details by their register number.
📊 Export Attendance Data:
- Excel Export: Download attendance records between specified dates in Excel format. This report includes student names, gender, year, and their attendance records within the selected range.
- Word Export: Download the current day's attendance in Word format, listing the names, departments, register numbers, and years of present students.
📱 Responsive Design: The application is designed to work seamlessly across various devices, including desktops, tablets, and mobile phones.

Technologies Used

Frontend: React.js
Backend: Node.js, Express.js
Database: MongoDB
Authentication: Firebase Authentication
Storage: Firebase Storage
Excel Export: csv-writer library
Word Export: officegen library

Prerequisites

Node.js (v14.x or later)
MongoDB (Local or Atlas)
Firebase Project (for Authentication and Storage)
Git

Installation

Clone the repository:

git clone https://github.com/nodeexcel/AttendanceTracking.git
cd AttendanceTracking

Backend Setup:
```
cd server
npm install
```
- Create a .env file in the server directory with the following environment variables:
```
PORT=5000
MONGO_URI=<your_mongo_db_connection_string>
```
- Start the backend server:
```
npm start
```

Frontend Setup:

cd ../client
npm install

Create a .env file in the client directory with the following environment variables:

REACT_APP_FIREBASE_API_KEY=<your_firebase_api_key>
REACT_APP_FIREBASE_AUTH_DOMAIN=<your_firebase_auth_domain>
REACT_APP_FIREBASE_PROJECT_ID=<your_firebase_project_id>
REACT_APP_FIREBASE_STORAGE_BUCKET=<your_firebase_storage_bucket>
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=<your_firebase_messaging_sender_id>
REACT_APP_FIREBASE_APP_ID=<your_firebase_app_id>

Start the frontend development server:
```
npm start
```

Usage

Login/Register: Register a new user or login with existing credentials.
Manage Attendance: View the list of students and update their attendance.
Add Student: Use the "Add Student" feature to include new student data and their image.
Delete Student: Remove a student by their register number.
Retrieve Student: Fetch student details by their register number.
Export Data:
- Excel: Export attendance records between selected dates.
- Word: Download the current day's attendance.

API Endpoints

Authentication

Register User: POST /api/auth/register
Login User: POST /api/auth/login

Students

Add Student: POST /form/insert

Request Body:

{
    "Name": "John Michel",
    "Register_number": "12345",
    "Year_of_studying": "2",
    "Branch_of_studying": "CSE",
    "Date_of_Birth": "2000-01-01",
    "Gender": "Male",
    "Community": "General",
    "Minority_Community": "No",
    "Blood_Group": "O+",
    "Aadhar_number": "123456789012",
    "Mobile_number": "9876543210",
    "Email_id": "john@test.com"
}

Get Student: GET /remove/getStudent/:registerNumber

Response:

{
    "_id": "60d1f5c8d6e5d435c8763e1a",
    "Name": "John Michel",
    "Register_number": "12345",
    "Year_of_studying": "2",
    "Branch_of_studying": "CSE",
    "Date_of_Birth": "2000-01-01",
    "Gender": "Male",
    "Community": "General",
    "Minority_Community": "No",
    "Blood_Group": "O+",
    "Aadhar_number": "123456789012",
    "Mobile_number": "9876543210",
    "Email_id": "john@test.com"
}

Delete Student: DELETE /remove/delete/:registerNumber
- Response:
```
Student removed successfully
```

Attendance

Record Attendance: POST /attendance

Request Body:

{
    "attendanceData": [
        {
            "studentId": "60d1f5c8d6e5d435c8763e1a",
            "attendance": "present"
        },
        {
            "studentId": "60d1f5c8d6e5d435c8763e1b",
            "attendance": "absent"
        }
    ]
}

Export Attendance Data (Excel): GET /data/download?start=2023-01-01&end=2023-12-31
- Query Parameters:
  - start: Start date of the range in YYYY-MM-DD format.
  - end: End date of the range in YYYY-MM-DD format.
- Response: A downloadable CSV file containing the attendance data.
Download Today’s Attendance (Word): GET /attendanceToday/:date
- Query Parameter:
  - date: Date in YYYY-MM-DD format.
- Response: A downloadable Word document containing the attendance details of present students for the specified date.

Students

Get All Students: GET /read

Response:

[
  {
      "_id": "60d1f5c8d6e5d435c8763e1a",
      "Name": "John Michel",
      "Register_number": "12345",
      "Year_of_studying": "2",
      "Branch_of_studying": "CSE",
      "Date_of_Birth": "2000-01-01",
      "Gender": "Male",
      "Community": "General",
      "Minority_Community": "No",
      "Blood_Group": "O+",
      "Aadhar_number": "123456789012",
      "Mobile_number": "9876543210",
      "Email_id": "john@test.com"
  },
  ...
]

Folder Structure

attendance-management-system/
│
├── client/                # React frontend
│   ├── public/
│  

 └──

 src/
│       ├── components/
│       ├── pages/
│       ├── App.js
│       ├── index.js
│       └── ...
│
├── server/                # Node.js backend
│   ├── models/
│   ├── routes/
│   ├── index.js
│   └── ...
│
├── .gitignore
├── README.md
└── ...

nodeexcel/AttendanceTracking

📚 Attendance Tracking System

Table of Contents

Introduction

Features

Technologies Used

Prerequisites

Installation

Usage

API Endpoints

Authentication

Students

Attendance

Students

Folder Structure