MagicBrain

A modern web application which identifies faces in images and display its boundaries.
Explore the docs »

View Demo · Report Bug / Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. Contact
7. Acknowledgements

About The Project

MagicBrain is a modern web application on which users can sign up for a new user, login with their existing user, submit their favorite friends and family photos and have theirs faces identified.

This project was originally built as part of a Full Stack pratical exercise to expand on React knowledge (including login, hooks and routes) and Rest API building and integration. Later on, tests with Jest and React Testing Library were also added to the project.

Built With

MagicBrain was built with the following technologies:

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Have npm installed in your machine.

• npm

  npm install npm@latest -g

Installation

On terminal

1. Clone the repo

   git clone https://github.com/sgtbrunner/magicbrain

2. Navigate to project folder

   cd magicbrain

3. Install NPM packages

   npm install

Usage

Run the following commands on terminal within the project folder

1. Starting the app

   npm start

   If you browser doesn't open automatically, open it and navigate to

   http://localhost:3000/

   To fully benefit from MagicBrain login and face detection capabilities, it is required to either run the MagicBrain API (default PORT 5000) or point the development environment REACT_APP_API_ENDPOINT config constant in the .env.development file to https://mighty-beyond-04256.herokuapp.com.
   
   Once loaded, you can sign up or login onto the app...
   
   ...submit your favorite family/friend picture and see all the magic happening!

2. Formatting the app

   npm run format

3. Linting the app

   npm run lint

4. Testing the app

   npm test

   To check for testing coverage:

   npm run test-coverage

5. Building the app

   npm run build

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Guilherme Brunner - guilherme.brunner@gmail.com

Project Link: https://github.com/sgtbrunner/magicbrain

Acknowledgements

• Tachyons
• React Prop-Types
• React Particls JS
• React Loading Overlay
• React Router
• Eslint
• Prettier
• Testing Library
• GitHub Pages