This AI-powered face detection application can detect faces at various angles and detect multiple faces in a photo simultaneously with high accuracy. It can also recognize the age, gender, and ethnicity of each detected face.
Live Demo: https://ai-face-detection.rashidshamloo.com/
This application uses an external API to provide the face detection results. All external API calls are performed on the server using Next.js API routes resulting in faster response times and more security by hiding the API key from the client.
The data received from the external API is validated and transformed to contain only the needed information before being sent to the client resulting in less bandwidth usage and easier debugging.
Users have the ability to upload their own images for face detection. This application handles the upload process, file handling, and file limit enforcement (size, type, count).
This application handles errors gracefully regardless of which part of the process they occur in.
The face detection result is rendered on top of the image with size, rotation, and opacity adjustments to be both readable and elegant.
During the loading process, a custom skeleton UI with shimmering animation is used to provide feedback to the user and prevent unwanted layout shifts.
This application is optimized for search engines using metadata like description, keywords, OpenGraph, Twitter card, and more.
All of the images used in this application have responsive sizes according to the device size to limit bandwidth usage and deliver a great end-user experience. All of the fonts are cached and served from the same server for faster load times.
This application is tested with Cypress using end-to-end testing. Multiple face detection workflows are tested using intercepted API responses.
This Application has a full 100 score on the Lighthouse benchmark.
- TypeScript
- React.js
- Next.js v14
- Tailwind CSS
- Redux Toolkit (RTK) Query
- Zod
- Cypress
- Desktop
- Mobile
Rashid Shamloo
- Portfolio - rashidshamloo.com
- Linkedin - rashid-shamloo
- Dev.to - @rashidshamloo
- Twitter - @rashidshamloo
- Email - rashidshamloo@gmail.com