Face Recognition Web App in TypeScript with React, Express, Node, PostgreSQL

This article summarizes the full stack face recognition app I built with React, Express, Node and PostgreSQL in TypeScript. This app was inspired by the excellent Udemy course The Complete Web Developer in 2018: Zero to Mastery by Andrei Neagoie.



Front End – React, written in TypeScript

Server – Node and Express, written in TypeScript

Database – PostgreSQL

Code and Live Demo

The client code and server code are both hosted on Github.

The live version of the app is hosted on Heroku. Both the client and server are hosted as separate Heroku applications. The app was deployed to Heroku via Github integration. Note that it takes a few seconds to respond because it’s on the free plan which means the app goes to sleep often and needs to wake up when it’s accessed.

The React client was bootstrapped with create-react-app adapted for TypeScript and the generated starter project was imported into Github.

The PostgreSQL database is hosted on ElephantSQL.

Face Recognition

The app uses Clarifai’s face detection model API to detect faces in images. The app sends the public URL of images to Clarifai and receives co-ordinates of all the faces in the image.


  • new user registration
  • existing user login
  • picture counter for each user
  • drawing square around face in picture

Future Improvements

  • finding multiple faces in a picture
  • better error handling when there are no faces in an image
  • better error handling when image URL is incorrect / not available