cheshire137 / instavibrant

Vibrant.js color extraction + your Instagram photos

Instavibrant

How to Run Locally

Register an Instagram client. Set your redirect URI to http://localhost:5000.

cp env.sh.example env.sh

Update env.sh with your Instagram client's details.

bundle install
npm install
npm start

Visit localhost:5000 in your browser.

How to Deploy to Heroku

First Time

1. Create a new app on Heroku.
2. git remote add heroku [email protected]:yourherokuapp.git
3. heroku config:add BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-ruby.git
4. heroku config:set RACK_ENV=production
5. heroku config:set INSTAGRAM_CLIENT_ID=your_instagram_client_id
6. heroku config:set LOCAL_STORAGE_KEY=instavibrant
7. heroku config:set FRONT_END_URI=url_to_your_heroku_app
8. git push heroku master
9. heroku ps:scale web=1

After It Has Been Deployed Once

./deploy.sh

Thanks

• Vibrant.js for color extraction.
• TinyColor for determining readability of colors.

instavibrant's Issues

Make divider in dropdown relative to background

So it looks good with darker color previews:

JS error

Hit Preview, switch users, go back to myself, this error occurs.

Can't login as another user

When you click 'Log out', and then choose 'Log in to Instagram', it automatically logs in the last user without giving you a chance to enter new credentials.

Show Instagram avatars in dropdown

Use https

For HTTPS Everywhere folks like @mikedillion.

Style at small screen sizes

• Hide hex color in swatches or display them vertically.
• Don't float the Instagram image to the left of the swatches.

Thanks @asiansteev.

Show spinner or indicate new user is loading

Show the user name in the title area, or show a spinner when the user changes which user is selected from the drop down.