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 ReactJS, Function Components, component state, side effects and styling techniques. In your challenge for this Sprint, you will demonstrate proficiency by creating an application that uses ReactJS to consume live data retrieved from the World Wide Web and style that data nicely on the page.
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 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.
Commit your code regularly and meaningfully. This helps both you --in case you ever need to return to old code for any number of reasons-- and your Team Lead.
In this challenge, create a web page that presents a styled list of characters obtained from an API. Being able to render out data to a web page is a large part of what JavaScript developers do, this challenge assesses your ability to achieve such a task.
Demonstrate your understanding of this Sprint's concepts by answering free-form questions. Edit the Answers.md
file at the root of the project to include your answer after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your Team Lead.
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 locally:
git checkout -b <firstName-lastName>
. - Change directories into
./starwars
(cd starwars
) and runnpm install
to retrieve all needed dependencies. - Once you have installed the node_modules, run
npm start
to get your server up and running. - With the server up and running, open Chrome and head over to
localhost:3000
and view your beautiful app. Maybe it's not that pretty... yet, your goal is to ensure this project becomes a thing of beauty. Follow these steps for completing your project. - Implement the project on this Branch, committing progress & changes often.
- Push commits:
git push origin <firstName-lastName>
.
Follow these steps for completing your project:
- Submit a Pull-Request to merge Branch into master (student's Repo).
- Add your Project Manager as a Reviewer on the Pull-request.
- TL then will count the HW as done by merging the branch back into master.
Your finished project must include all of the following requirements:
- Use ONE of the following APIs:
- Use the documentation and Google to learn how to fetch characters from your API.
- Obtain a list of characters. One or several requests might be needed, depending on the API.
- Set the list of characters into state.
- Render your characters to the screen:
- Build a React component named 'Character' to render an individual character.
- Map over the list in state, and for each character render a Character to the page.
- You must display at least one element for each character in the data set.
- The elements must be styled with either Reactstrap or styled-components - don't rely on browser default styles.
- Consistent naming. Examples: variables, functions, Components, and file/folder organization.
- Consistent spacing. Examples: line breaks, around arguments and before/after functions.
- Consistent quotation usage.
- Spell-check.
- Schedule time to review, refine and reassess your work.
It is better to submit a challenge that meets MVP than one that attempts too much and fails.
- Test your API and inspect the data in Chrome, before writing the code for the request(s). See screenshots at the root of the project.
- Try not to hammer your API while developing. Infinite loops in your code might trigger hundreds of requests!
- The Pokemon API is a slightly harder challenge because a single network request might not be enough to get all the data you want.
- Running
npm
commands in the wrong folder will not work. Be aware of what folder you're in when working in the command line. - The
start
process can sometimes choke after adding new dependencies and may need to be restarted.
- Next week we will be looking at React forms. Look a head and try to create a search form that will filter through the data displayed from your characters.
- Build a pagination system that will allow you to load the next page of data.
console.log()
the data coming back from the server.- There might be
next
andprevious
fields that give you a URL. - You can build a function that will get characters called
getCharacters
that you can use dynamically to get the next or previous set of characters. You would need to supply it with the proper fields, and you'll need to set up more state to do this. .