/moody

A small website that combines the Giphy and Soundcloud APIs

Primary LanguageJavaScript

Giphy / SoundCloud Mashup

Small site using the Giphy and SoundCloud APIs

You can find it on heroku.

Developed with Gulp, Browserify, BabelJS, Less, React, Bootstrap and ES6.

This is a small, single-page site that allows the user to pick from six moods (sad, happy, excited, angry, love or sleepy).

Based on the selected mood, it retrieves an mp4 from giphy (http://api.giphy.com/) and a track from soundcloud (https://developers.soundcloud.com/).

Motivation:

  • To learn node and npm
  • To learn gulp, browserify and babel
  • To try out ES6 imports and exports
  • To show how great React js is :-D

Installation Instructions:

  • Install node (https://nodejs.org)
  • Run npm install
  • Edit the src/javascripts/app.jsx replacing client_id with your soundcloud application ID (you can generate one at http://soundcloud.com/you/apps)
  • Edit the src/javascripts/services.js replacing the giphyApiKey with your own (the default one is their public beta, you can get your own at http://api.giphy.com/submit)
  • Run gulp build

The installation process may require Gulp to be installed as a global package. Run npm install --global gulp if necessary.

Production Builds:

  • Run gulp build --production

When deploying, it is highly recommended to build with the --production flag. The production build is much smaller in size.

Running Instructions:

  • Run npm start
  • Browse http://localhost:8080/

Development Instructions:

  • Run gulp build
  • Run gulp watch

You can now edit any files in your src/ directory and the appropriate re-compilation steps will be taken for you. Refresh your browser page to view your changes.

Further Work:

  • Make the site mobile friendly (video should render in the background and music should play, or at least have usable controls).
  • There is an issue with the track not always changing when the image does.
  • Should be made to use Redux (https://github.com/rackt/redux) for state.
  • Add basic music controls (mute, volume and image that comes with track, static in bottom right corner of page?)
  • Make music search better (at the moment we just search on mood, we can probably use the SC api better).
  • Display an error to the user is we his the Rate Limit on sound cloud (https://developers.soundcloud.com/docs/api/rate-limits#play-requests)
  • Make music loop (select a new track after the current one ends?)
  • Gif service should use promises (jQuery defer) to bring it in line with the music service.
  • Provide a link service, so people can share combinations of track / gif that they like.
  • Ensure correct terms of use of giphy and soundcloud APIs (do we need to mention them on the page somewhere?)

Resources: