30ozsteak / swapi-box

SWAPI-BOX

Swapi-box is an interactive Star Wars application made using React.js, React-Router, and the Star Wars API. The app is fully responsive to handle popular devices sizes.

This app is deployed on Netlify

https://swapi-box.netlify.com/

Set Up Instructions

• npm install
• npm start

Collaborators

Laura Shamus and Nick Dambrosio

Progress

Project Reflection

Laura

This project was fun and challenging. It was our first time implementing React Router and using nested API calls to fetch data. The most challenging part of this project was rendering information from multiple API calls onto a single card; we refactored this function more than once. Certain functionalities in this project turned out to be more difficult and time consuming than we originally had thought. Overall, it was a very humbling learning experience. We both feel more confident with our React abilities and can't wait to continue to make fun applications.

Nick

I have so much fun with parts of react, and struggle so hard with others. This project was no different, but it forced me to learn better practices. I knew, coming into this project, that we'd have to utilize React Router for rendering different routes on click. Thankfully, I had previous experience using Router and knew that this was going to be a major part of the project, so we didn't bother with conditional rendering of any of the routes, and thus, didn't have to refactor large chunks of code once router came into play. Only took a single evening to get all the routes working properly. Getting images mapped to the correct cards from a JSON object was also one of my bigger wins for the project. The bottom menu button was inspired by a tutorial I watched that utilized custom checkboxes, a CSS only button that responded to user clicks and expanded to show additional menu options on click. I repurposed it into a react component, and now I have a really rad button that can be carried from project to project. I plan on refactoring this to a true/false boolean component eventually, because it's not entirely reusable at the moment and relies on class names. overall, lot's of fun. Got to flex some design skills and make a really great looking app.

swapi-box's Issues

tesdt

test

Double background causing scroll issues

if you hover over the background, and then try to scroll, you might be prevented from scrolling through the cards. This is probably caused because there are two background images, with a height of 100vh, and overflow: hidden, when the card container has an overflow: scroll on. This will likely easily be fixed by removing the twinkling background and removing overflow: scroll

No 404 Page

the catch in our Try Catch renders the loading component, when it should actually render a 404 component if it's ever hit, and loading should be rendering based on the state of app.

Some cards have too much data, and make their text fields ugly

an easy fix would be to make the text fields bigger, or to change their positioning, but I felt that it was going to ruin the original aesthetic and would need a bigger design change to get working properly.

Image file sizes are way too big and need to be compressed

title

manually selecting routes on netlify results in an error

Not entirely sure what's causing this issue, but if you visit the deployed site, and manually type in a url, it will say the URL is invalid and respond with a 404. Works fine on localhost, so its likely a netlify specific problem.

Merge requests aren't workinngggggggggg

Continuous integration with netlify seems to be down

Deployed version marquee text issues

The marquee text will sometimes scroll behind the swapibox logo, despite it's Z index being 0, and the header having a black block background.

Favorite star adds fave class to all cards at once

When clicking on the favorite star, on the people route, it triggers to add the class of "faved" to all cards at once, rather than on the one card you clicked on.

This would probably be easily fixed by turning our card into a class based component and adding the state to the component itself, rather than having the state live on App.js