Code Monkey home page Code Monkey logo

kunaljain0212 / face-recognition-web-app Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 1.0 515 KB

It is a full-stack working web application using Clarifai Web API for face detection in an image, using a website with frontend designed completely using React.js, server using Node.js and Express.js and PostgreSQL for the database. The frontend of the application has been deployed to Vercel, backend to Heroku and for database I've used elephantSQL which is a hosted service for PostgreSQL.

Home Page: http://face-recognition.jainkunal.me/

HTML 8.47% CSS 7.97% TypeScript 83.56%
react reactjs nodejs node node-js node-module express expressjs psql psql-database

face-recognition-web-app's Introduction

face-recognition-web-app (FRONTEND)

It is a full-stack working web application using Clarifai Web API for face detection in an image,using a website with frontend designed completely using React.js, server using Node.js and Express.js and PostgreSQL for database. Frontend of the application has been deployed to Vercel, backend to Heroku and for database I've used elephantSQL which is a hosted service for PostgreSQL.

Do check out the application here

Steps to start:

  1. Clone this repo

  2. Go to face-recognition-web-app/face-recognition-frontend This is the main project folder for the front end.

  3. Run npm install This will install all the dependencies.

  4. Go to face-recognition-web-app/face-recognition-api This is the server i.e. the back-end for the application

  5. Run npm install This will install all the dependencies.

  6. You must add your own API key and Databse URI in the face-recognition-web-app/face-recognition-api/.env file to connect to Clarifai and your database. The name of the variables are available in .example.env file.

You can grab your free Clarifai API key from here here

  1. Run npm start This will run the server, on port 8000

  2. Go to face-recognition-web-app/face-recognition-webapp and run npm start This will run the frontend, on port 3000

Configuring Database:

I've used ElephantSQL which is a hosted service for postgreSQL but you can create you local database as well.

  1. Create a database face-recog (Or any other name you prefer)
  2. Create a table named users, with following structure:
CREATE TABLE users (id SERIAL PRIMARY KEY, email TEXT UNIQUE NOT NULL, password TEXT NOT NULL, entries BIGNINT DEFAULT O);
  1. Enter your server details in face-recognition-web-app/face-recognition-api/.env file.

Modules used:

  1. React
  2. Clarifai
  3. Tachyons
  4. Bcrypt
  5. Cors
  6. Express
  7. pg
  8. Nodemon (devDependency)
  9. React-particles-js

Connect with me:

kunaljain0212 _kunaaaaalll

face-recognition-web-app's People

Contributors

kunaljain0212 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

strechoye

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.