Skip to main content Link Search Menu Expand Document (external link)
SEI Remote Flex

General Assembly Logo

React API UI Pattern

You’re going to build out a common UI pattern in React and integrate it with an API.

Prerequisites

  • React Function and Class Components
  • State and Props
  • Component Lifecycle

Instructions

  1. Create a new repo using create-react-app
  2. Fulfill the listed requirements.
  3. Make an issue to submit your work when you’re finished!

Please turn in your submission by the deadline on your cohort calendar.

UI Pattern

You will need to pick a UI pattern from the list below and an API. You’ll then build out the UI pattern you chose to work with the API you chose. Choose a different UI pattern from the one you built in your previous project.

List of UI Patterns

You may choose from the following list of UI patterns. Each of the samples below is built out in an Adobe XD file that you can find here.

When a user clicks on a link, a box should appear in the center of the screen with the details for the item that the user clicks on. The box should have some way for the user to close the box and see the full list of items.

modal

Hamburger Menu

There should be a hamburger icon in the top right corner. When a user clicks on it, a menu should appear from off of the right side of the screen with a list of menu items. When the user clicks on the menu item, the contents in the center of the page should change to show the details for that item. The user should be able to see which item is currently selected. The user should be able to close the menu by clicking the hamburger menu again.

hamburger menu

Accordion

The user should see a list of items. When they click on one, the space below the item expands to reveal the content related to that item. When the user clicks on the item again, the revealed content becomes hidden.

accordion

Tabs

The user sees a row of tabs above a content area. When the user clicks on one of the tabs, the content in the content area changes based on which tab the user clicked.

tabs

Slider

The user should see the content on the screen with ‘Next’ and ‘Previous’ buttons. When they click on the ‘Next’ button, the slider should shift to show the next item in the list. When the user clicks on the ‘Previous’ button, the slider should shift to show the previous items in the list. If there is no next or previous items, the slider could loop to the other end of the list or prevent the user from clicking those buttons.

slider

List of APIs

This is a non-exhaustive list:

  1. Marvel: developer.marvel.com
  2. Star Wars: swapi.co
  3. Weather: openweathermap.org/api
  4. News: newsapi.org
  5. Giphy: developers.giphy.com
  6. Pokemon: http://pokeapi.co
  7. Google Books: developers.google.com/books
  8. City of Chicago: data.cityofchicago.org
  9. Beer: brewerydb.com/developers
  10. Chuck Norris: http://www.icndb.com
  11. Rick and Morty: rickandmortyapi.com/documentation/#rest
  12. Dad Jokes: icanhazdadjoke.com/api
  13. NASA: api.nasa.gov

There is also this collection of public APIs.

Requirements

Each student should pick one UI Pattern and one API and combine the two. The data to populate the UI Pattern should come from the API. When the user loads the page, they should see the data from the API load into the UI pattern on the screen.

License

  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.