Austin J Blake
Face Detector App
Single Page Application that connects to a machine learning API to examine images. Front end built with React. RESTful API on Node.js server and SQL datatbase for user registration
Front end repository
Back end api repository
This full scale application has it all:
Front End powered by React
Utilizing State to change routes and dynamically render the appropriate content-a true Single Page Application
Sign-in and Register features
Connected to a RESTful API Back End built on a Node.js server
Stores user profiles in a PostgreSQL database and returns them after login verification
Passwords are encrypted with Bcrypt and stored as hashes--no sensitive information left in plaintext
User inputs are sent to an advanced machine learning API that can detect faces in images and the result is returned and drawn onto the user's picture
Returning users get to see a total count of their activity, stored in the database and incremented with every action
Responsive design makes viewing and use enjoyable on large screens or small mobile devices
Try it out with these login credentials
email: test@example.com
password: password
Or feel free to register a new user account! (for your convenience, email verification is not required and your information will never be used outside of this demo app)
This large scale app brings together many powerful technologies and vital programming skills to bring a sleek and modern real-world app to life.
React components and their state and lifecycle management really work magic behind the scenes here. Most of what you see on the page and what logic runs the functionality of the app has all been made into separate components--sign-in, register, rank, navigation bar, logo, submission form, and more.
This is important for a few reasons. First, code readability. If everything was piled into one massive script file it would be a nightmare for another developer to read and understand. It's also an unnessecary hassle combing through all of that unorganized code myself when a change needs to be made. Second, components can be thought of as the building blocks of React. They are defined separately and then can be put together to create larger, more complex things. Components are reusable too--many instances of a single component can be added to a page. And last but not least, components accept props and return something unique based on the props passed in. So the same component can do different things at different times depending on the properties passed to it. Awesome!
State is used in this project to handle many things and it solves a lot of problems. We need to capture the information entered by the user and hold it until an event is triggered where that information sent into action. State is also used to determine if a valid user is logged in and we should display the home screen, or if the Sign-in or Register pages should be what is rendered to the user instead. this.state is also incredibly useful inside many functions to grab the current data and this.setState will trigger a re-render of the virtualDOM which is central to React's functionality and why we use it!
Tachyons are used to easily style components and elements, while Particles adds a nice touch over the gradient background.
The back end is made with Node.js. I'm focused on learning Javascript inside and out, so it just makes sense to write the server with the same language. Express and knex are also used to help the process of connecting the back end to the front end so we have seamless communication and our users can take advantage of having a stored profile with a progress counter.
Controllers here are also separated into files for each type of functionality. These are imported into the main server script and called with a variety of HTTP verbs. The server makes calls to the ClarifaiAPI when needed and also talks to the database, storing and retrieving and modifying information based on our needs. As mentioned above, user passwords are encrypted using a library called Bcrypt. These hashes are what are stored in the database and then checked against a user's login credentials to determine if they are allowed access to the data from the requested profile. This is an important point and deserves repeating. Sensitive user information should never be stored as plaintext!!!! Security of our users' data is paramount, and always should be kept in mind when designing an app like this.