Developed a beginner-friendly attendance management system using MERN stack, featuring clear and simple code for easy understanding. The hosted site has a spindown time of 1 minute
Hey everyone, itβs Gc here!
I'm thrilled to share an exciting update on our Attendance Management System. We've created a robust web application using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Firebase Authentication and Storage. This system streamlines the management of student attendance, making it easier than ever to track, update, and export attendance records.
If you find this project helpful or interesting, please consider starring the repository on GitHub! Your support is greatly appreciated.
Feel free to check out my other repositories:
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.
π 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:
π Student Data Management:
π Export Attendance Data:
π± Responsive Design: The application is designed to work seamlessly across various devices, including desktops, tablets, and mobile phones.
Clone the repository:
git clone https://github.com/Guru-1205/attendance-management-system.git
cd attendance-management-system
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
POST /api/auth/register
POST /api/auth/login
Add Student: POST /form/insert
{
"Name": "John Doe",
"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": "[email protected]"
}
Get Student: GET /remove/getStudent/:registerNumber
{
"_id": "60d1f5c8d6e5d435c8763e1a",
"Name": "John Doe",
"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": "[email protected]"
}
Delete Student: DELETE /remove/delete/:registerNumber
Student removed successfully
Record Attendance: POST /attendance
{
"attendanceData": [
{
"studentId": "60d1f5c8d6e5d435c8763e1a",
"attendance": "present"
},
{
"studentId": "60d1f5c8d6e5d435c8763e1b",
"attendance": "absent"
}
]
}
Export Attendance Data (Excel): GET /data/download?start=2023-01-01&end=2023-12-31
start
: Start date of the range in YYYY-MM-DD
format.end
: End date of the range in YYYY-MM-DD
format.Download Todayβs Attendance (Word): GET /attendanceToday/:date
date
: Date in YYYY-MM-DD
format.GET /read
[
{
"_id": "60d1f5c8d6e5d435c8763e1a",
"Name": "John Doe",
"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": "[email protected]"
},
...
]
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
βββ ...
Contributions are welcome! Please open an issue or submit a pull request.
For any questions or suggestions, please reach out to:
Feel free to further customize the README according to your project's requirements and structure.
Happy coding
Cheers Gc