In this feature we did the following:

Set up

• Create React App.
• Install React-Redux, Redux Logger, and React Router.
• Download the free image for the app logo.
• Create routes and view components (Rockets, Missions, My Profile, Dragons [only if your team has 3 members]). Use for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• Create directories for all Redux state slice files

Redux: Fetch data and Redux store

• Upon first render fetch data from the SpaceX API endpoints:
  • Rockets: https://api.spacexdata.com/v3/rockets
  • Missions: https://api.spacexdata.com/v3/missions
• Once the data are fetched, dispatch an action to store the selected data in Redux store:
  • Rockets:
    • id
    • rocket_name
    • description
    • flickr_images
  • Missions:
    • mission_id
    • mission_name
    • description

UI/UX

• Use useSelector()
• You can style the whole application "by hand" or you could use React Bootstrap, a UI library that could speed up the process. This is a popular library and working with its components would be good practice.
• Render a list of rockets (as per design). For the image of a rocket using the first image in the array of flickr_images.
• Render a table with the missions' data (as per design).
• Render a list of dragons (as per design). For the image of a dragon use the first image in the array of flickr_images[only if your team has 3 members].

Render UI condition components:

• Rockets that have already been reserved should show a "Reserved" badge and "Cancel reservation" button instead of the default "Reserve rocket" (as per design).
• Missions that the user has joined already should show a badge "Active Member" instead of the default "NOT A MEMBER" and a button "Leave Mission" instead of the "Join Mission" button (as per design).

In this feature I did the following:

• Implement logic to render the reserved missions on the My Profile page
• Implement logic to render the reserved rockets on the My Profile page
• Style the My Profile page

In this feature I did the following:

• Implemented the functionality so the user can join and leave a mission
• Changed the button styling according to the reservation status
• Change the badge styling according to the reservation status

In this feature I:

• added bootstrap through a CDN to the main html file
• implemented the rocket reservation/cancelation features
• styled the rockets page

• Create a route and a view component. Use for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).

• Create a directory for all Redux state slice files.

• Create a route and a view component. Use for the page navigation links and style active class to indicate which section page the user is currently on (underline active navigation link).
• This view should be empty - you will add content in separate tasks .

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• Create a directory for all Redux state slice files.

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• Create a directory for all Redux state slice files.

Fetch data from the Missions endpoint (https://api.spacexdata.com/v3/missions) when a user navigates to the Missions section.

Once the data are fetched, dispatch an action to store the selected data in Redux store:

• mission_id
• mission_name
• description

NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).

Fetch data from the Rockets endpoint (https://api.spacexdata.com/v3/rockets) when the application starts (as Rockets is the default view).

Once the data are fetched, dispatch an action to store the selected data in Redux store:

• id
• name
• type
• flickr_images

NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).

Fetch data from the Dragons endpoint (https://api.spacexdata.com/v3/dragons) when a user navigates to the Dragons section.

Once the data are fetched, dispatch an action to store the selected data in Redux store:

• id
• name
• type
• flickr_images

NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).