/SmartBrain--front-end

See README for info on how to use this Face Detection API app.

Primary LanguageJavaScript

SmartBrain Project
Live Site: https://parkers-smartbrain.fly.dev/

This is the Zero to Mastery Complete Web Developer's course final project - with some added improvements!

face-detection-example

How to Use:

You can use the following test login information if you'd just like to test the app without creating a new profile:
Email: a@gmail.com
Password: 123

sign-in-example

**Please note: Site may take a few seconds to initially load due to Bcrypt password verification

Or, you can register a new account. Note: please use test login info from above, to avoid overloading the database memory. Thanks!

register

Once logged in, copy and paste an image url from the web into the search input field, then click the 'Detect' button to run the Face Detection API


detect-button

Each time you upload an image, your entry count is increased by +1


Description

A React app that detects and highlights faces in web images. Built with React.js, Node.js, Express, Bcrypt, PostgreSQL, Tachyon CSS, Clarifai Face Detection API, deployed on Fly.io


A huge thanks to Andrei Neagoie for creating Zero to Mastery Complete Web Developer Course and the entire Zero To Mastery platform to help encourage new developers like myself to pursue their passions!


This project was not entirely a code along, as I had to overcome a few challenges:


  • The Clarifai REST API integration. Ran into numerous issues with outdated code and documentation. Was also able to use Clarifai model to detect multiple faces, not just one
  • Deployment - ZTM course deployed to Heroku, but since free tier no longer exists, had to troubleshoot with other hosting services for server, database, and front-end app deployment
  • Resolved numerous issues related to using a Windows OS vs Mac (i.e. PATH errors)
  • Moving API calls from front-end to back-end for security
  • Setting up ENV variables properly on the server
  • Learned several new technologies: Node.js, Express, Bcrypt, PostgreSQL, Knex.js
  • Challenged myself by using ES6 syntax for Node.js, despite all ZTM videos using commonJS (Back-end is 99% ES6 syntax)

    • Possible Future Improvements:

  • Store submitted images for a gallery view
  • Edit profile info & delete profile
  • Display a loading spinner while logging in

    • Features

  • Multi-Face Detection using Clarifai Face Detection API Model

  • User profiles, stored with a PostgreSQL Database hosted on Fly.io

  • Responsive layout using Flexbox

  • TS Particles for background animation

  • Parallax Tilt for interactive site logo

  • Form Validation & Error Messages

  • Custom site favicon

  • Bcrypt user password encryption/decryption to/from PostgreSQL/Fly.io Database