Exercise Sunday

Goal: Practice using all of the build 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 if 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.


  • What is a promise? What are the advantages and disadvantages of using a promise for async code?
  • What is a static method? How is a static method different from an instance method?
  • How can we use callbacks to handle async code?
  • What causes callback hell and how can we avoid it?

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 it return?
  • How do async functions work? What does the await keyword do?
  • Are there any potential disadvantages to using async functions?
  • What is CORS? Why is it important for making API calls in our projects?

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 are 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 6
Last updated October 22, 2021