A simple, responsive giphy browser. On initial load this site will show all of the most recently trending gifs. Users can select a gif to see it's full-quality version and supplied title. Searching for a gif will return the matching set from the giphy servers. Scrolling to the bottom of the page will load additional gifs as well.

Check it out on github pages here: https://matthewzaso.github.io/giphy-search/

or checkout and run it locally with npm install and npm run start

• Added Webpack to compile and bundle all file types.
  • Easily bundle all js and compile scss
  • Allows us to use webpack dev server and hot reloading
• Included Babel loader to add support for ES6 code
  • Uses preset-env to support older browsers
• Added PostCss/Autoprefixer for wider browser support

• Project pieces separated out into containers, components, with matching css structure for better organization
  • Containers made to hold majority of app logic, while components are simplified to render-only items.

• Basic, custom 12-col CSS grid added for responsive scaling.
• Redux added for better scaling and state management
  • Probably not necessary with the small amount of state management required right now, but offers greater scalability.
  • Using dispatch feels cleaner than modifying state directly anyways.
• Makes use of upcoming JS features such as promises and fetch (polyfilled)
• Use intersection observers (with polyfill) to create an infinite scroll experience
  • A reducer adds additional gifs to the current collection

• Cache html/js/css and trending API with serviceworker through workbox plugin for webpack
  • Initially added, but removed due to not using https locally for development
• Add paddles to pop-up modal to use a carousel-like experience for browsing
  • Could be implemented by instead passing all gif data to the modal for easy switching.