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

Description

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

How to Use:

Use the following test login information if you'd like to test the app without creating a new profile:
Email: [email protected]
Password: 123

**Please note: Site may take a few seconds to initially sign in 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!

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

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

You can also view and update your profile information

Features

Multi-Face Detection using Clarifai Face Detection API Model

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

JWT session management, with tokens stored in Redis temporarily

Tokens removed during sign-out, so re-authentication is required

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

Technical challenges I overcame:

With Clarifai REST API integration, had numerous issues with outdated code and documentation. Was also able to instruct Clarifai model to detect multiple faces, not just one

Troubleshooted with free hosting services for server, databases, and front-end app deployment

Resolved numerous issues related to using a Windows OS vs Mac (i.e. PATH errors)

Moved API calls from front-end to back-end for security

Setting up ENV variables properly on the server for both local development and production

Learned several new technologies: Node.js, Express, Bcrypt, PostgreSQL, Redis, Docker, Knex.js

Challenged myself by using ES6+ syntax for Node.js (Back-end is 100% ES6+ syntax)

Possible Future Improvements:

Store submitted images in a gallery view

Allow users to update profile picture

Allow users to upload local images for face detection API

Display a loading spinner while logging in

View Back-End Repository