Http Project
Your project this week is to build an app that queries at least two APIs and uses the results to update the DOM. There should be a way for the user to search, filter, sort or otherwise affect what is displayed.
What you choose to build and how you choose to display the data is entirely up to you!
User Stories
A user story is a description of one or more features of a piece of software.
Core Stories
As a user, I want to:
- See an interesting mashup of different data
- Input information to change the displayed result
- View the app on all of my devices
Since your app will be unique you will need to create your own user stories for more specific features.
Stretch stories
- As an impatient user, I want to see some indication that data is loading
- As a confused user, I want to be told when something goes wrong
Acceptance Criteria
- Query at least two APIs using
fetch - Dynamic content generated with JS
- A clearly defined user journey, documented in your readme
- A responsive, mobile-first design
- Ensure your app is accessible to as many different users as possible
Planning
During the planning phase we suggest you spend time on:
- Exploring APIs you are interested in working with
- Considering your user journey
- Deciding what you need to build for your Minimum Viable Product (MVP) and splitting up the tasks
API keys
Some APIs require a key or token so they can identify who is making a request. This allows them to block people who abuse the API (or charge people if it’s not a free service).
Usually you want to avoid including this API key in your client-side code, since anyone can see it using the browser developer tools. However this requires having your own server, which we’re learning next week, so for now try to either use APIs that don’t require a token, or free APIs so it doesn’t matter too much if someone steals your token.
Choosing your APIs
Things to check before you start:
- Does it support CORS (cross-origin requests)?
- Is there a high enough rate limit?
- Is a free API key available?
- Are you able to use the API without user authentication (OAuth)?
- Is good documentation available?
Some APIs are badly documented or almost impossible to use. If you don’t manage to get a successful response within 20 minutes of reading their documentation we strongly recommend moving on to another one. This week is about practicing fetch, not using the coolest API.
Recommended APIs
Here’s a list of decent APIs to consider. You can choose to use other APIs if you prefer, but make sure to do your research and check that what you want to do with the API is possible before you start to code.
| Name | Info | API key required? | Rate limit? |
|---|---|---|---|
| Giphy | Lots and lots of GIFs | Free for small apps | Yes |
| GitHub | Everything publically available on GitHub | No | Yes |
| The Movie DB | Lots of info about all kinds of movies, a bit like IMDB | Yes, it’s free | 40 requests per 10s |
| The Guardian | Access to articles and media back to 1999! | Yes (free) | 12 requests per 1s |
| Game of Thrones | Data from the universe of Ice and Fire | No | 20,000 requests per day |
| Unsplash it | Generates random images | No | Not clear |
| Recipe Puppy | Find recipes and ingredients | No | 1,000 per day |
| News API | Get links to articles from international news sources | Yes | No |
| Corporate Buzzword API | Corporate BS generator | No | No |
| TFL | Everything you need to know about transport in London | Optional | Yes |
| Police API | UK police data on crimes | No | 15 requests per 1s |
| Postcode lookup | UK Postcode lookup and autocomplete | No | No |