MarkYourPresence-

Complete Web App for taking online attendance using AI based Facial Recognition. Designed from scratch using React + Tailwind with Python backend. OpenCV used for Face detection and recognition.

🚀 Features

User(Teacher) signs in.
Teacher creates a new course by giving information, and dataset.
Dataset includes a folder having pictures of students enrolled in the course, shot by their webcams.
Upon creation, the data is sent to the backend and model is trained for the given course.
To take attendence, the teacher starts a new session of the course.
A unique code is generated which teacher sends out to the students.
Students navigate to /markattendence page and paste the code.
Students are then shown a page where they allow webcam, capture a shot and mark attendence. Using the trained model, their attendance is marked.
Teacher can download attendence reports of a course in form of csv from the sessions page.

💻 Tech Stack Used/ Dependencies

React : Front-end JavaScript library for building user interfaces or UI components.

React Router Dom : Responsibile for rendering UI components according to the URL paths.

Express : Back end web application framework for Node.js (a JavaScript runtime environment).

Opencv : Automatic face recognition is all about extracting those meaningful features from an image, putting them into a useful representation and performing some kind

Tailwind CSS : A utility-first CSS framework for rapidly building custom user interfaces. Used by adding the required styles as classes.

CORS : A HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources. Used here for communicating between server and client side hosted.

Flask :Flask is a small and lightweight Python web framework that provides useful tools and features that make creating web applications in Python easier

Others : React icons and react-copy-to-clipboard.

Setup/starting up

1. Install Front-end

To run the front-end:

Clone the repository.
Navigate to the cloned repository and install dependencies by running:

npm install

Now, start the server

npm start

2. Install Back-end

The project requires python 3.7. Other versions may create issues.
Install MongoDB using their documentation and start the MongoDB server.
For starting server and stopping the server-

sudo systemctl start mongod

sudo systemctl stop mongod

Navigate to backend/ folder and install the python dependencies:

pip install -r requirements.txt

Run main.py

3. Connect front-end to back-end

Note the local host url the backend server is running at (as given in the terminal output). Paste this url in config/api.js eg:

// End point of your flask api.
export const apiEndPoint = 'http://127.0.0.1:5000/';

⚡️ Agile methodology followed during the build

The Agile methodology is a way to manage a project by breaking it up into several phases. It involves constant collaboration with stakeholders and continuous improvement at every stage.

💡 Timeline and itreations followed-

💡 Challenges faced and learnings

Before the Microsoft Engage Program's qualification announcement, I had only a rudimentary understanding of React. After learning the new concepts associated with React, I began the design-build phase of this project.
For my love of frontend styling,Improved my CSS skills vastly by practising them here. -Never worked with OpenCV and ML database , learned it within a week and implemented and incoprated it within my application.
learned about how a low-complex, embedded friendly CNN architecture can be used for face recognition.
I'm new to python and Opencv and I tried to save an image to my computer from my webcam , But when I try to open it, I find that the jpeg is empty i worked on small errors like these.
Figured out how attendence can be downloaded through webapp.
Came across a memory-leak bug while building a socket connection from client side to server side. Couldn't get my doubt resolved even from Stack Overflow. Took me about one week to resolve it by thorough researching of the hints provided by my mentor. Saved my project from getting disqualified because this bug was a barrier in implementing the minimum requirement feature of the Engage'22 Challenge.
Deployed a full stack app with frontend, backend and database for the first time. Struggled through it but documentations and tutorials came to the rescue as always.
Learnt about Cross-Origin Resource Sharing (CORS) and proxies.

🚧 Future Scope/ What's next?

Dark theme toggler.
Password resetting and email verification on sign up.
Voice calling within the app feature
Fee payment after authentication through face ID
Student portal
Multiple and simultaneous login from different accounts of the same user.

aashimawadhwa/MarkYourPresence