This project is sort of a Star Wars data bank using React. For this project, we wanted to use the popular Star Wars RESTful API 'SWAPI-Box' to tap into a “black hole” of Star Wars data and be able to manipulate the data to display it to the user in an interesting and interactive way. You will be able to see movie cards for all the movies included in the SWAPI API, access each movies, to see their iconic crawling opening titles and a list of the ten most prominent characters of each movie with their information (name, homeworld, etc.) The user is also able to favorite individual characters that they can later check out on the Favorites tab.
The purpose of this project was to get more comfortable using new tools and keep practicing routing, props, state, testing, fetching nested promises, and asynchorous JS in general.
Check it out in GitHub Pages here!
git clonethis repository- Run
npm installto install the required dependencies for this app - Run
npm startto start the server from your command line - Have fun!
- Made informed UI/UX design decisions to create a user-friendly, web-responsive application.
- Kept state based components to a minimum and leveraged more functional components.
- Used a modular architecture for our file structure.
- Became more familiar with promises, nested fetch requests, and handling the UI based on acceptance of data.
- Also became familiar with routing (Link, NavLink, Redirect, HashRouter) and how to handle dynamic routes.
- Used propTypes for every component receiving props.
- Wrote tests for React components, asynchronous functionality, and route handling.
- Deployed a React Router web-app to GitHub Pages.
- React
- React Router
- SCSS
- Jest
- Enzyme
- Sketch
- Async methods and API calls testing
- React unit testing
- Snapshot testing