kaohman / swapi-box

Star Wars API React app

SWAPI-Box

See it Live!

Set-Up Front-End:

Clone this repo
Run npm install from the root directory
Run npm start and visit localhost:3000 in your browser

Background / About:

This app is based on a project to practice React, API fetch calls, and asynchoronous testing with Jest/Enzyme. The project uses the open-source Star Wars API, SWAPI, for all data calls.

Primary Technologies Used:

• React
• Javascript
• HTML
• SASS/SCSS
• Jest/Enzyme

Test Driven Development:

Jest and Enzyme for front-end testing.
Run npm test from the root directory

Enhancements:

• Add radial star animations in background of app.
• Add more/add less button functionality on cards.
• Save favorites in local storage.

Screenshot:

Original Assignment:

SWAPI-Box project from Turing School of Software and Design

Contributors:

Karin Ohman

Wireframes:

swapi-box's Issues

Refactoring

• Responsive layout
• Refactor app render
• Refactor switch statement on card

Linting

Loading Component

Create loading component to display when data are being loaded.

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.

Extensions

• Implement a More button. When clicked, the next 10 items of that category should be shown. There should be a Back button to go back to the previous page.
• Have your data persist in localStorage. Think about when you want to store it.
• Add radial stars animation

CSS/Loading Styles

• Add loading pages when data are being fetched
• Style pages

Get People

• When a user clicks on People, the page is populated with cards with data for each person.
• The cards should have:
  Name
  Homeworld
  Species
  Population of Homeworld
  A button to “Favorite” the person
• The button should have an active class indicating it has been pressed.

Read Me

PropTypes

PropTypes added to all components:

• Landing
• CardContainer
• ControlForm
• People
• Planets
• Vehicles
• Favorites

Get Planets/Vehicles

• When a user clicks on any of the other buttons, the data should then represent the button pressed.
• Planet Cards:
  Name
  Terrain
  Population
  Climate
  Residents
  A button to “Favorite” the planet
• Vehicle Cards:
  Name
  Model
  Class
  Number of Passengers
  A button to “Favorite” the vehicle

Landing Page

• When the app starts up '/' the user should see the opening scrolling text of 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.

Wireframing

create wireframes for app

Testing

Testing completed for all components:

• App - issues with componentDidMount
• Landing
• CardContainer
• ControlForm
• Loading
• Cards