jtomassoni / project-2-react

SpaceX API+React

Welcome to jtX

What I have built for you is an app that displays spaceX launch data and allows the user the navigate through it, if available, the user can also isolate certain launches made by specific vehicles.

OG Component Heirarchy

Current Component Heirarchy

Wire Frames

User Stories

MVP Goals - DONE

• As a user, I want to be able to see the latest SpaceX flight info.
• As a user, I want to be able to see all of the SpaceX flights in a list.
• As a user, I want to be able to click one of the spaceX flights in that list, and be brought to a details screen.

Stretch Goals - DONE

• Any kind of filtering: mission type(Starlink, National Recon Office, NASA), vehicles used(rockets, recovery drone ships), date ranges.
• Custom Sorting, oldest first, newest first.

Technologies Used

• JavaScript
• React
• CSS
• Bootstrap

How to use

Click here

Screenshots

• Homepage

• All Launches

• Starman modal within a modal

• Ships+NavBar dropdowns

Unsolved Mysteries

• Query/Pagination/LoadMore.
  • POST Query wouldn't work: I am n00b.
  • Front-End Mod
• Passing form data wasn't really needed here, so I still need some practice there.

Solved Mysteries

• Instead of filtering, I created a system where users could navigate between connected components as well as reverse the order of the returned launches.
• Sorting the results of a return in reverse order was as simple as spreading the currrent array into a temparray that gets reversed everytime the button is pressed.
• Not knowing how 100% of your code works is something I will have to keep getting used to. I feel like I have a much better handle on how to make React work for JT, rather than trying to understand how to React was working for React.
• Bootstrap 101
  • HOWEVER
  • Don't get caught using Bootstrap Components without writing semantic code in conjunction. While React Bootstrap will make things pretty for you. It does not account for anything outside of visual interactions. This means we still must write(or have our JSX render) semantic HTML for accessibility.
• Github
• Asking for help: If you finished this week without using any of your tokens, ask yourself which parts of the project caused you unnecessary stress, or which stretch goals you could have acomplished with some assistance. If you think you're done and have enough time to spare, use a token to ask what else you could improve, or just say hello to your TLs and TAs.