In this project, I have used:
- Next.js
- Tailwind css
- face-api.js for face recognition
- React-Toastify for pop-ups
- Deployed the app on vercel https://picture-and-todo-manager.vercel.app/
- Backend part can be found here
User
- User Authentication using face recognition
- Used jasonwebtokens(jwt) for server side authentication.
- If the user tries to sign-up with an already registered username, it will show an error message.
- While sign-up user can capture at max six images for verification
- While sign-in if the user is not registered with the username it will show an error pop-up.
- While sign-in if the model does not matches the face, with face used for sign-up it will show red rectangle on web cam around face.
Gallery
- Image classification in the Gallery page using face recognition
- If the image contains more than one face, It classifies it as "Group Photo"
- If the image doesn't conatins any face or the model doesn't detects any face then it classifies the image as "No face detected"
- If the image has only one face, and If the user has saved some pictures with an Image label, then modal will find the best match with uploaded pictures and classifies accordingly else if the image doesn't matches with any one of the faces it will classify that image into "unknown".
- You can both capture and upload image.
- You can also delete an image.
ToDo
- Todo Manager with add, edit and delete feature.
Follow the following steps to setup this project.
Or More detailed setup is here
Note - This task requires yarn which is a tool similar to npm.
- Clone this repo.
- Go the project folder in terminal.
Install the dependencies using
yarn install
Then you can finally run the server using this command.
yarn dev
Then you can go to http://localhost:3000
in your browser.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit and save the file.
NOTE :- Site takes little bit time to load while refreshing the page as it loads the models and while sign-in browser freezes for some time due to face recognition process.
If you want to connect to the local server database