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
Live Demo
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