Pokemon Pages with React Router

Start by accepting the assignment at https://classroom.github.com/a/_eyorB2I and cloning the repository. This is a React application created with Create React App. Next, cd into your project run npm install. You can now start it with npm start.

Requirements

Build the following application using React and React Router v7: https://pokemon-react-router.surge.sh. This application uses the Pokemon API.

  1. Your application must behave exactly the same as the example and show the same data.
  2. Your application must have the same client-side routes.
  3. Feel free to style it however you wish. The example uses Bootstrap.
  4. When you deploy your assignment to Surge, refreshing on a Pokemon details page should not result in an error. Be sure to read Deploying React apps made with Create React App to Surge.

Tips

  1. Use the Network tab in Chrome to see the AJAX calls being made. To get to the Network tab, right click on the page and select "Inspect". Then click on "Network". If you click on "Fetch/XHR", it will filter down all the requests in the Network tab to those from AJAX calls.
  2. To create a comma separated list from an array, use the join() method. For example: [1, 2, 3].join(', ') produces 1, 2, 3. This will be helpful for the Moves and Abilities sections on a Pokemon page.

Other Requirements

  1. You are not allowed to use any libraries. Your implementation should only use React, React Router v7, and optionally Bootstrap.
  2. Your implementation must only use the techniques, patterns, and concepts that we covered in class.
  3. Your implementation should not have any direct DOM manipulation or have any references to document or window.
  4. There shouldn't be any console warnings or errors when running locally or when deployed to Surge.

Submission

Create a video with audio using Zoom where you demo your assignment and explain where you fulfilled or did not fulfill each requirement. Please explain your code. Put a link to this recording in the README.md file at the root of your project.

Also, deploy your project using Surge and include this link on your README.md.

Make a commit and push up all your changes. Visit your repo in the browser and verify all of your changes were pushed to GitHub.