Skip to content

fulin426/Color-Pic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Color Pic

The Color Pic application uses image recognition to predict what the dominant colors are in a given picture. The colors are then used to generate a suggested color palette with colors that work well together. This works in a semi-random way, so hit regenerate to see a different color set each time.

User Story:

  • User can upload a picture url, capture the main colors, and generate a selected color palette
  • User can adjust colors
  • User can save palettes for future reference
  • User can create a new user profile and login

Screenshots Screenshots Screenshots Screenshots

How it works

The Color Pic application uses image recognition from Clarifai to predict what the dominant colors are in a given picture. The colors are then sent to Colormind to generate a suggested color palette, it searches for colors that work well together. The palettes are generated in a semi-random way. The app also uses React Color for color adjustments.

Technology

React, Redux, Semantic UI, Axios, JWTs, Node.js, Express, MongoDB

API Info

Running locally

  • Install dependencies for server ==> npm install
  • Install dependencies for client ==> npm run client-install
  • Run the client & server with concurrently ==> npm run dev
  • Run the Express server only ==> npm run server
  • Run the React client only ==> npm run client
  • Server runs on http://localhost:5000 and client on http://localhost:3000

Requirements

Add mongoURI and jwtSecret to keys.js in config folder
Clarifai developer key required in client/src folder Developer Guide