This app was inspired by the HBO sitcom Silicon Valley where a character's investor urged him to build "Shazam...but for food." The result was an app that was able to determine if your photo was of a hot dog. Or not a hot dog. Further background on the story and show can be found here from Engadget (there is strong language if you watch the YouTube clips).
This React app uses the Clarifai Predict API with their food recognition model to create a basic identifier for hot dogs. A user will need to register and sign in to use the app (while the back end uses bcrypt.js to hash the password, it is not recommended to use real account information). Once signed in, a user can then submit an image URL in the input field and click on the button to see if their image contains a hot dog. The app will keep track of the number of images a registered user has submitted, as well as how many of those images were hot dogs. Demo screenshots below:
- Fork and clone back end repository.
- Install dependencies with
npm install. - Run
npm startto run website on local host 3000. - Fork and clone this repository.
- Install dependencies with
npm install. - Run
npm startto run website on local host. - To publish on Github Pages, push your changes to Github.
- Run
npm run deployto deploy. - Go on an interview with Emily Chang at Bloomberg Tech and talk about your new app Seefood. (Just kidding, please don't do this).
Please note the following for the back end repo:
- You will need to create your own database locally for development (tables shown in the repository), and eventually one host online. If you're not using PostgreSQL, you will need to change line 13 in server.js to a different client.
- While in development, you will need to remove comments on lines 15 and 16 in server.js. You will also need to comment lines 17 through 20.
- When you deploy (I used a free Heroku app), you will want to revert these previous two steps - comment or delete lines 15 and 16, and lines 17-20 need to be in use. Line 17 needs to be the URL of your deployed database.
- In image.js, you will need to use your own Clarifai API Key from the start, and there is a free version if you sign up.
- In image.js, you can change the criteria for identifying a food as a hotdog. Lines 25-33 contain that logic.
- Providing user feedback on each action's success or failure.
Clearing form on submit and preventing multiple submits.- Unit testing.
- Allow a user to change a password.