AttendX

An AI based attendance app that uses face-api.js to mark attendance of student using face recognition.

My submission for Hack-R-Play 2.0 organised by ReactPlay.io

Link to the blog:

https://swapn652.hashnode.dev/attendx-an-ai-based-app-that-marks-your-attendance-based-on-face-recognition

Link to the working demo:

https://www.youtube.com/watch?v=EFNkb-wQpqw

Tech Stack Used

For Frontend
- ReactJS
- Tailwind CSS
For Backend
- NodeJS
- ExpressJS
- MongoDB
- Cloudinary
- Bugfender SDK

To run the project locally on your machine

Fork and clone the repository.
Open up the project in VS Code or any other IDE of your choice.
Open up the terminal.
Type the command cd server.
Now, you will be in the server directory. Run npm i to install all the required dependencies.
Create a .env file in the server folder and create the following key value pairs in it:
- MONGODB_URL = 'link to your mongodb atlas database`
- CLOUDINARY_CLOUD_NAME = link to your cloudinary cloud name'
- CLOUDINARY_API_KEY = 'link to your cloudinary api key'
- CLOUDINARY_API_SECRET = 'link to your cloudinary api secret'
Then, run the command nodemon src/app. This will make your backend run and on the terminal you will see:
Now, open up a new terminal and get to the client directory by typing the command cd client.
Run npm i to install all the required dependencies.
Run the command npm run dev and you will see the following on the terminal:
Go to that link and bingo now you can use the application.

Note:

Sometimes, the face-api code doesn't work. So, after you open the Mark Attendance page, and it doesn't work, simply copy the code in client/src/Webcam.jsx, erase the whole code and paste it again. That would make it work. I researched a lot but couldn't really find out why this happens.