Star Wars Catalog

A Star Wars Character Catalog Using a GraphQL wrapper of the Star Wars API

Uses https://api.graphcms.com/relay/v1/swapi

Get Started

1. Clone the project. git clone https://github.com/sarah-vanderlaan/star-wars-catalog.git
2. Navigate into star-wars-catalog folder
3. Install dependencies npm install
4. Run app with npm start. This command watches all files - everytime that code is rebuilt, linting runs and tests run.
5. Find app at localhost:3000.

Features

1. React for UI components
2. Redux for application state
3. Apollo-Client and React-Apollo for fetching and binding graphQL data
4. Babel to compile ES6
5. Webpack to bundle files and leverage hot reloading during development
6. Express server
7. ESLint to report style/syntax issues
8. SCSS for improved css syntax
9. React-Router for routing
10. Expect/Sinon for testing
11. Halogen for loading dots animation
12. FlexboxGrid for component layout on screen

RESPONSIVE DESIGN:

Renders nicely in both desktop and mobile view:

Desktop:

Mobile:

LOADING STATE:

Displays loading dots when loading any data from graphQL:

• Also shows smaller loading dots on profile page when loading

ERROR STATE:

Handles graphQL errors:
Also handles data-specific edge cases:

1. Handles null values for character properties (eg unknown height, planet, weight, etc) display as Unknown. Also shows user a message when character has no planet or no "friends" on planet.
2. Shows user a message when no data returned that matches search:

Other Functionality:

1. Ability to show/hide filter panel
2. Navigate to characters from same planet via character profile page by clicking names of friends
3. Search for a character (searches based on if search term is contained in any part of the character name)
4. Sort character list in four different ways (Name asc/desc, Age asc/desc)