This project is a React App that is designed to challenge the developer to make a series of fetch calls to SWAPI, an unsecured api that is a programmatically accessible data source for all the data from the Star Wars canon universe. The developers/designers on this project are Kevin Simpson and Tobin Nelson.
- To download this application, clone down the repo:
git clone https://github.com/relasine/SWAPIBox.git - cd into the repo
- Install dependencies
npm install - Start up the local server
npm start - Open your browser to localhost:3000
SWAPIBox is an assigment from the front end engineering program at The Turing School of Software and Design in Denver, CO as a part of the third module. You can find the project specs here. Most students working on this project have only been coding for sixteen-to-twenty three weeks using HTML5, CSS3, and JavaScript. React has only become a part of our skill set as of seven weeks ago.
Grabbing data from the api is uniquely challenging as a single fetch call will not give the user the data required from the spec. Calling a fetch on people will return most of the data required, but will also return promises that resolve to a url for certain properties, like planet names, residents, species, etc. This requires a series of fetch calls to be made via the .map() array prototype method. We elected to use ES7 syntax for this project with async and await instead of ES6 .then().
The app is throughly-tested utilizing enzyme and jest, employing mock function usage for fetch calls that return Promise.resolve().
Originally, we decided to approach the layout and design quite literally based on the project specs:
We imagined the movie crawl text from a random Star Wars film scrolling up the left side while users could access data relating to characters, vehicles, and planets from the series on the right. After a few days, this design felt not only dated, but was becoming an overwhelming theme throughout the class. Consequently, we stripped the layout down to the foundation and rebuilt it with a very specific theme: the user is role-playing a Jedi Master at some point during the established Star Wars film universe, and they are logging into a secure data interface that imparts a narrative connection sequence, a situation report (the random film crawl text), and a series of access points relaying information about people, places, and transports that are pertinent to their mission. Users can hover over cards to information and click on them to save them.
All fetch calls and saved items are saved in local storage to reduce the need to repeated fetch calls.
This project additionally adds the challenge of applying React Router mid-stride for page navigation. This requires a great deal of refactoring and some headache, but is meant to mimic the real-world requirements of refactoring a product to include new tools and features.
The following pages are where the fetched data can be viewed. Images are not provided by the api, so they were curated by the developers and are assigned via a helper object linking the names attached to data objects and a path to the image cooresponding to the person, place, or thing.
The app is fully-responsive, and works equally well on wide-screen monitors all the way down to the iPhone 5s.
We also did quite a bit of work with CSS transitions and animations, which is a bit of a challenge in React compared to working with the the normal, three-file html/css/js structure. All animations were created first in CodePen, then transferred over to the project.
This project was bootstrapped with Create React App.