Sprint Challenge: Single Page Applications - Rick & Morty

This challenge allows you to practice the concepts and techniques learned over the past Sprint and apply them in a concrete project. This Sprint explored Single Page Applications, React Router I - II, React Forms, and Hooks.

Instructions

Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.

This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.

You are not allowed to collaborate with students during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your TL and Instructor in your cohort help channel on Slack.

You have three hours to complete this challenge. Plan your time accordingly.

Commits

In case you ever need to return to old code. Remember your ABC: Always Be Committing!

Description

In this challenge, you will create a Single Page Application complete with Client-Side Routing. It must consume a 3rd party API service (based on the TV show Rick and Morty.)

Self-Study/Essay Questions

Demonstrate your understanding of this Sprint's concepts by answering the following free-form questions. Edit this document to include your answers after each question.

• Explain benefit(s) using client-side routing?

Answer: The browser controls url history and creates a multi-page experience through use of (usually) an SPA or single page app.

• What does AJAX stand for?

Answer: Asynchronous JavaScript and XML

• What are controlled components in React?

Answer: A controlled component receives values, props and callbacks from a parent component and uses these to process a specific task.

• Name three tools/libraries for making AJAX requests.

Answer: Axios, Fetch, jQuery

Project Set Up

Follow these steps to set up and work on your project:

• Create a forked copy of this project.
• Add TL as collaborator on GitHub.
• Clone your OWN version of Repo (Not Lambda's by mistake!).
• Create a new Branch on the clone: git checkout -b <firstName-lastName>.
• Implement the project on this branch, committing changes regularly.
• Push commits: git push origin <firstName-lastName>.
• LOOK at your project directory and notice it's just a plain ol' React App that we've built using create-react-app.
• RUN yarn install or npm install to retrieve the client-side dependencies.
• RUN yarn start or npm start to fire up your React application.

Instructions to completing

Minimum Viable Product

The MVP of this project will be broken up between 2 parts.

Follow each part and be sure to use your design/style skills to make this application look professional.

MVP Preview:

Part 1

Construct a Single Page Application with React incorporating multiple components.

Keep your components separate and design them before adding in your Router. You can test them individually before adding in the Router (Part 2).

Create 3 page components to display data from 3 API endpoints:

• https://rickandmortyapi.com/api/character/ - docs

• https://rickandmortyapi.com/api/locations/ - docs

• https://rickandmortyapi.com/api/episodes/ - docs

• Read the Rick & Morty API docs.

• Create a component to show a grid of data from the API.

  • Include useState, useEffect.
  • Use Axios (or fetch) to make a GET request to the 3 endpoints.
  • Example API Endpoint: https://rickandmortyapi.com/api/character/
  • Display API results using a card grid or list UI on the page.
  • Design each 'page' layout based on the available fields. (See docs for schema details.)
  • Use a styling or component library. (Pick at least 1 of: Semantic-UI, ReactStrap, Material-UI, styled components, emotion).
  • Before adding routing, check each component manually by importing into App.js and adding to JSX.

💡reminder: git commit -am 'Part 1 Completed'

Part 2

Add a Router to this application by using React Router.

• Start by wrapping your root component in the BrowserRouter component.

• Declare your 3 routes with <Route> components for each component created above..

• Include /characters, /locations and /episodes routes.

• In your App component, add a tab bar that will use React Routers NavLink components to link to your different pages.

• Make sure to use <Link> component instead of <a> elements.

• Make sure all tasks are complete: Do a global search (Cmd-Shift-F in VS Code) for the string TODO:.

💡reminder: git commit -am 'MVP Completed'

Stretch

Add a search component to your pages.

• Add the <SearchForm /> component (see ./components/SearchForm.js).
  • Wire up the onSearch(name) callback prop to support querying the API. (To search for rick, you would request /api/character/?name=rick.)
  • Remember: useEffect must reference any state on which it depends.
• Persist search form field(s) by using the custom hook useLocalStorage.

💡reminder: git commit -am 'Stretch Progress'

EXTRA STRETCH 💪

There's a range of difficulty included. 😈

• Animate page transition and/or card loading.
• Add paging support (next/previous links).
• Add additional fields to search form. They are unique for each endpoint. See Available parameters., etc..
• Add a modal component view to show more details of each type of record. See if you can use a nested route for it.
• Use the GraphQL Endpoint with multiple search fields.

💡reminder: git commit -am 'Extra Stretch Progress 💪'

Completing

Follow these steps to complete your project:

• Submit a Pull Request to merge <firstName-lastName> branch into master (student's repo).
• Add your TL as a Reviewer on the Pull Request.
• TL then will count the HW as done by merging the branch into master.

Backup API URL

If the main API service goes down, or you exceed rate limits, you can try the following backup URL:

Backup URL: https://rick-and-morty-learning-api.herokuapp.com/api/