For this project, we are going to work on developing some muscle memory building out React components. At this point you’ve built at least one basic React app in the past. Now’s the time to leverage that and add some complexity.
For this project, we will be hitting The Star Wars API to tap into a “black hole” of Star Wars data. Mwahaha.
You will be expected to use a modular structure for this application. Before you begin coding, read this article which discusses why modular architecture is a good idea.
Using a “Modular Structure” means that all of the files associated with a given component should be nested within the same folder.
src/ components/ Button/ Button.js Button.scss Button.spec.js Card/ Card.js Card.scss Card.spec.js
Project Goals & Requirements:
- Learn how to wireframe and know why it is important.
- Get comfortable whipping together React components on your own with the additional complexity of implementing React Router.
- Write squeaky clean, well refactored code using ES6 & ES7 syntax.
- Make informed design decisions to create a user-friendly application.
- Keep state based components to a minimum and leverage more functional components.
- Use a modular architecture for your application file structure.
- Think deeply about React Lifecycle Methods.
propTypesfor every component receiving props.
- The API we are using is completely unsecured. This means we will be making all requests for this particular project directly from our browser. We will not be sending any advanced communication from a local server.
- Although there are many resources out there for making API calls, you are asked to exclusively use the native
fetch()API for this project.
- The data does need to persist in localStorage.
Iteration O: Wireframing
- Utilize a wireframing tool of your choice to plan the design of your application before you start building.
- Adobe XD CC
Iteration 1: Landing Page
- When the app starts up
'/'the user should see the opening
scrolling textof a random film, with the title of the film and release year listed below.
- There should be buttons to browse three different categories: People, Planets, and Vehicles.
- There should be a button to view favorites, with the number of current favorites indicated.
Iteration 2: Get People
- When a user clicks on
People, the page is populated with cards with data for each person.
- The cards should have:
- Population of Homeworld
- A button to “Favorite” the person
- The button should have an
activeclass indicating it has been pressed.
Iteration 3: Get Planets/Vehicles
When a user clicks on any of the other buttons, the data should then represent the button pressed.
- Planet Cards:
- A button to “Favorite” the planet
- Vehicle Cards:
- Number of Passengers
- A button to “Favorite” the vehicle
Iteration 4: LocalStorage
- Use LocalStorage to persist data. People, Planets, and Vehicles should all be saved in LocalStorage. Secondary calls for data should be made to LocalStorage (i.e. you should not be fetching the data once you already have it).
Iteration 5: Favorites
- There should be a button on each card to save it to Favorites.
- There should also be a button that when clicked, displays only the favorited cards.
- This button should also show the count of favorited items in the button text.
- Users should be able to unfavorite a card.
- If there are no favorites, there should be a message indicating that there are no favorites.
Iteration 6: React Router
- The URL should match the category chosen. For example, clicking on the
Peoplebutton routes the user to
'/people'and display the people cards.
- When a user visits
'/favorites'the favorited cards are displayed.
- Implement a
Morebutton. When clicked, the next 10 items of that category should be shown. There should be a
Backbutton to go back to the previous page.
- 4 - The application completes all 6 iterations above and implements the extension.
- 3 - The application completes all 6 iterations.
- 2 - The application is in a usable state, but is missing some of the features outlined in the specification above.
- 1 - The application is missing multiple features essential to having a complete application.
- 4 - Developer demonstrates complete understanding of React with appropriately separated components and exceptionally well refactored code.
- 3 - Developer appears comfortable in React. There are minor opportunities to refactor.
- 2 - Developer selected appropriate libraries and frameworks to build the app but did not use them as intended. Significant refactoring necessary.
- 1 - Developer did not make any effort to use React effectively or refactor code.
- 4 - Developer has made a targeted effort to make the app appealing and user friendly. Evaluator has minimal recommendations for design changes. Follows 10 Essential Usability Guidelines.
- 3 - Developer has made a targeted effort to make the app appealing and user friendly. Evaluator has multiple recommendations for design changes. Follows majority of the 10 Essential Usability Guidelines.
- 2 - Developer has made intentional design decisions to create a user friendly application but Louisa would be mad. Attempts to follow 10 Essential Usability Guidelines.
- 1 - Developer did minimal to no CSS for this project besides what was indicated in the comp.
- 4: Application is a single page and uses the React Router to display appropriate components based on URL.
- 3: Application is a single page and uses the React Router but does not display the appropriate components upon navigating.
- 2: Application does not render/cannot find additional routes.
- 1: Application did not use a Router
- 4 - Every component is tested from both a unit and acceptance standpoint, all crucial functionality is tested
- 3 - Almost all components are tested to a level that indicates developer has an understanding of testing
- 2 - A valid attempt was made to test functionality with obvious gaps where functionality is not tested
- 1 - There was little to no attempt to test this application.
- Pass - Developer team laid out their thinking using wireframes before building their project
- Fail - No wireframes were used to build this project
- Pass - Proptype validation is implemented for any component receiving props.
- Fail - There are components missing proptype validation.
- Pass - The README.md file has been updated with a description of the project, the team, and how to get it up and running
- Fail - The boilerplate README is still in place
The output from ESLint shows…
- 4 - Zero complaints
- 3 - Five or fewer complaints
- 2 - Six to ten complaints
- 1 - More than ten complaints
4 - Developer(s) make many small, atomic commits that clearly document the evolution of the application and do not contain irrelevant changesets that aren’t reflected by the commit message. Commit messages are concise and consistent in syntax and tense. Developer(s) are using a rebase workflow, effectively use git branches and pull requests when applicable to incorporate changes into the application, and are not pushing directly to master. There are no instances where the developer(s) have committed source code that should be .gitignored. There are no instances of “dead” or commented-out code and debugger statements like console.log.
3 - Developer(s) make many small, atomic commits that document the evolution of the application but sometimes contain irrelevant changesets and inconsistent commit messages. Developer(s) use git branches and pull requests when applicable to incorporate changes into the application, and are not pushing fresh changes directly to master. Pull requests may contain little or no code review. There may be slight instances where the developer(s) have committed source code that should be .gitignored. There may be some instances of “dead” or commented-out code and debugger statements like console.log that need to be cleaned up.
2 - Developer(s) make large, inconsistent commits that contain irrelevant changesets and make it difficult to follow the evolution of the application. Developer(s) rarely use git branches and frequently incorporate changes directly into master with little or no review process. There are instances of committed source code that should be .gitignored and instances of dead code and/or debugger statements.
1 - Developer(s) make very few commits that each cover too much responsibility and aren’t indicative of how the application evolved. Branches and pull requests were not used and changesets were applied directly to master. There are many instances of committed source code that should be .gitignored and many instances of dead code and/or debugger statements.