Flickr PWA is a demonstration application built using React and accessing Flickr's public REST API.
The application performs a text search for images and returns matching images along with details about each image. Search results display below the search box.
The app is deployed on Netlify here: https://jj-flickr-pwa.netlify.com/
- Search Flickr for images
- View search results below the search area
- Search routes appear in address bar at 'search?text=queryterms'
- Preset routes appear in address bar at '/hedgehogs', '/sloths', and '/wombats'
- Errors are handled when a search term returns no results from the Flickr API (try '@@@')
- Invalid routes (e.g. '/asdf', '/search/asdf', etc. ) are handled by a custom 404 page. Server errors are handled by a custom server error page. (Please note that this will not work on Netlify. Instead, users will be redirected to the homepage.)
- Search results are stored in state within a session, removing the need to fetch the same query more than once
To install the app locally, fork or clone it, and then download it to your local development environment. Be sure to run:
npm install
to install all dependencies.
To start the local server use:
npm start
Please note that you will need to get a Flickr API Key. You can do that here: https://www.flickr.com/services/developer/api/
Once you have an API key, create a file called config.js in the 'src' directory.
The content will be:
export const apiKey = 'YOUR API KEY GOES HERE';Please note that colorette may throw an error. Be sure you're using node ^14.5.0.
Please note that the linter may report a warning in useEffect. You can ignore it. The warning shows that the callback has dependencies not listed in the dependency array. That's fine, because we actually don't want to update the component when those other dependencies change.
Flickr PWA was built using React.js hooks and was bootstrapped with Create React App. Routing is accomplished with React Router 5, also using hooks. The app uses the native Fetch API.
Please report any issues here: https://github.com/TAP-Projects/flickr-pwa/issues
- Refactor Cuties component to use newer fetch function
- Add page navigation to page through results
- Cache results so that using the forward and back buttons doesn't result in a reload (at present I'm caching the image metadata, including the url for the image, but I'm not caching the image itself)
- Create a function on Netlify to hide my API key. Right now I'm using Netlify's env variables from the control panel and process.env.NODE_ENV