Face Detection Web App created with MERN stack.
The hosted version can be found HERE.
Users can register, signin and upload an image (by entering a direct image link), and the app will display rectangles around all detected faces in the picture.
Front-end: React
Back-end: Node.js & Express.js
Database: MongoDB
- Clarifai API
- bcrypt-nodejs
- Mongoose
- Tachyons
- Serve
- Cors
- Express
- Nodemon
- Clone this repo
- Run
npm install - Change the URL in src/App.js to your own API backend.
- Run
npm run dev
API Repo can be found HERE
Frontend Repo can be found HERE Browse to http://localhost:3000/, signin/register, and upload an image!
- You can login using these credentials:
- Email:
test@test.com - Password:
test123
Or you can Register using a fake email/password.
2. Afterwards, you need to enter a direct image link
(right click on image and click on Copy Image Address)
- The Web App uses SSL encryption through HTTPS protocol to transfer input data.
- Passwords are hashed once received by the backend.
- Despite 1 and 2, I'd still recommend using a fake/weak password to avoid any potential future attacks.
- Emails aren't verified, so you can use any email even if it's fake.
- Entered images URLs are NEVER stored in the database or API logs.
- If your image isn't working, make sure the image URL points directly to the image file (you might want to right click on the image and click on
Copy Image Address).
If you are sure about the image, maybe the face detection API reached its 5000 images per month limit.
However, do check your browser console for any potential bad requests or errors, and raise an issue in case you find any. - Sometimes the server responds slow for signin/register requests, so please be patient.
However, do check your browser console for any potential bad requests or errors, and raise an issue in case you find any.
The latest version is deployed and hosted on Netlify. Check it out by clicking HERE.