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, and React Forms.
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 by reaching out through DM to your TL. You have three hours to complete this challenge. Plan your time accordingly.
In case you ever need to return to old code. Remember your ABC: Always Be Committing!
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.)
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:
- What does AJAX stand for?
Answer:
- What are
controlled components
in React?
Answer:
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
ornpm install
to retrieve the client-side dependencies. - RUN
yarn start
ornpm start
to fire up your React application.
โ ๏ธ Expand for alternate API URL
If the main API service goes down, or you exceed rate limits, try the following URL:
Backup URL: https://rick-api.herokuapp.com/api/
You can still be locked out - watch your chrome devtools' network panel to make sure you aren't making too many requests.
The MVP of this project is broken up between a couple parts.
- Plan: Divide your allowed time, use either 15, 30 or 60 minute intervals.
- Plan estimated targets or waypoints ("By the '1 hour' mark I'll have 1 component functionally completed & styled"). This is mostly about time-boxing.
- If you get stuck - maximize your time: try building another part, going back to previous working commit, or asking your TL for help.
- Follow each part.
- Find design resources OR use your design skills make the application look professional.
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/location/
-docs
https://rickandmortyapi.com/api/episode/
-docs
- You will need to add a EpisodeList and EpisodeCard component yourself.
- Read the Rick & Morty API docs.
- Create a component to show a grid of data from the API.
- Include
useState
,useEffect
. - Use
Axios
(orfetch
) 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 for part of or all of your application. (Pick at least 1 of: Semantic-UI, React Bootstrap, Material-UI, styled components, emotion), etc.
- Before adding routing, 'spot' check each component manually by importing into
App.js
and adding to JSX.
- Include
๐กReminder:
git commit -am 'Card UI Loading Data Successfully'
Add a Router to this application using React Router.
Tip: Review the examples on the React Router site.
-
Declare your routes with
<Route>
components (for each component created above.)- Include
/character
,/location
and/episode
routes.
- Include
-
In your
App
component, add a navigation menu, tab bar, or similar. (Hint: Make sure to use React RoutersNavLink
to link to your different pages.) -
If you have any
<a>
tags, replace them with<Link>
or<NavLink>
components. -
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'
๐ Pro Tip: Complete as many stretch goals as possible! Even after the Sprint Challenge! You'll get a head start on important upcoming concepts!
There's a range of difficulty in the options below. ๐
Note: The most difficult stretch goal(s) could take an expert an hour or more.
Start with the most familiar (or fun) sounding stretch goal. Complete search component to your list views.
-
Add the
<SearchForm />
component (see./components/SearchForm.js
). -
Wire up the
onSearch(name)
callback prop to support querying the API. (To search forrick
, you would request/api/character/?name=rick
.) -
Remember:
useEffect
must reference any state on which it depends. -
Animate page transition and/or card loading.
-
Persist search form field(s) by using the custom hook
useLocalStorage
. -
Add error handling for all async (axios/AJAX) calls. (Including some styled UI.)
-
Add a "details view" and route to show more details for each type of record. (Hint: Look into route parameters or nested routes.)
- Similar to the "details view" now with a UI twist: use a modal component to show item view. (If you can, build modal with routes.)
-
Add paging support (next/previous links.)
-
Refactor to use as few Components as possible - while still readable to a React Dev. (Hint: research these patterns: HoC, render props, FaaC.)
-
Add additional fields to search form. They are unique for each endpoint. See Available parameters., etc..
-
Use the GraphQL Endpoint with multiple search fields.
๐กReminder:
git commit -am 'Stretch Progress ๐ช'
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.
Note: AFTER Sprint Challenge: Solutions to many stretch goals (and live demo URLs) are available from TLs (or GitHub admins.)
There are many ways to implement each of these requirements!