Exercise Sunday

Goal: Practice using all of the tools that we have learned so far to create an app centered around your choice of public JSON APIs which support CORS. As always, make sure you test API calls with Postman first.

This is a multi-day project, so you'll have time to do the following:

  • Experiment with different tools for working with asynchrony, including callbacks, promises, the Fetch API, and async functions
  • Make multiple API calls in the application
  • Separate out logic clearly, including keeping business logic separate from service and UI logic as necessary
  • Write a great README with thorough setup instructions
  • Experiment with chaining promises

Warm Up — Part 1

This warm up is for your first class session working on this multi-day project.


  • Are there any potential disadvantages to using async functions?
  • What is SOP and CORS? Why is it important for making API calls in our projects?
  • What is your preferred method of making API calls, and why?

Warm Up — Part 2

This warm up is for your second class session working on this multi-day project.


  • How does the Fetch API work?
  • What does fetch() return?
  • How do async functions work?
  • What does the await keyword do?

Code


Bike Index API

Build an app using the Bike Index API. Your app could list all the bikes that have been registered as stolen in a given location in the past week. Or it could display statistics — for instance, you could see which manufacturer is most frequently stolen in a given area.

Cryptocurrency Analytics App

Build an app using the Nomics Cryptocurrency & Bitcoin API. To get an idea about what you can do with the API, check out the Nomics homepage. Why? According to their docs,

nomics.com is built entirely with the Nomics API. Everything we've done on nomics.com you can do with our API. There are no internal API endpoints.

Here are some ideas for you:

  • Your app can list currencies and their popularity (rank).
  • Or, your app could show the price for currencies and make exchanges based on exchange rates.
  • You could also show the number of trades happening for each currency.

Pick Your Own API

If you decide to use an API that isn't listed here, make sure to do some research and confirm that it supports CORS and that it returns JSON (unless you want to experiment with a format like XML). It is recommended to pick one project to focus on for the entire time so that you can have an opportunity to really build out your project.

If you wish to research more APIs, this is a very useful page. We also recommend this comprehensive list of public APIs as a great resource that's organized by type of data and authentication required. We suggest looking for APIs that use an apikey and have CORS (a "yes" marked in the column).

Peer Code Review


  • Does the application make at least one API call and work as expected?
  • Is application logic fully separated into user interface, service logic, and if necessary, business logic?
  • Does the application include a fully function development environment, including a .env file to hide API keys?
  • Does the application include a README with all setup instructions?

Lesson 1 of 8
Last updated September 7, 2022