Build an Image Search App with:

Vanilla JS, React.js, Angular 6 and Vue.js

All apps will contact the 500px Image Search API.

https://api.500px.com/v1/photos/search?term=flowers

500px appears to have disabled consumer keys!! Try another image search API like Unsplash

You will need a consumer key from 500px.com. Update your-api-key-here with your consumer key to use the app. After signing up, create an application here: https://500px.com/settings/applications

All apps will use the skeleton CSS framework:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

And use this body style:

body {
  width: 80%;
  margin: 2em auto 0 auto;
}

This app demonstrates:

• User Input
• DOM Events
• API Requests
• Conditional Rendering
• Rendering Lists of Data

Vanilla JS

---

• Add search form to page
• Make API Request with search term when form is submitted
• Show loading image
• Append Results to the page
• Hide loading image

React.js

---

• Add search form to page
• Update state when input changes
• Make API Request with search term when form is submitted
• Show loading image
• Append Results to the page
• Hide loading image

Angular

---

• Add search form to page
• Update state when input changes
• Make API Request with search term when form is submitted
• Show loading image
• Append Results to the page
• Hide loading image

Vue.js

---

• Add search form to page
• Update state when input changes
• Make API Request with search term when form is submitted
• Show loading image
• Append Results to the page
• Hide loading image

STRETCH

• Paginate Results with next/previous buttons
• Click image to add to favorites
• Append favorites to the page
• Navigate between search page and favorites page