Hello reviewer, 👋

Live Version: HERE

Objectives of the project

• Use React documentation.
• Use React components.
• Use React props.
• Use React Router.
• Connect React and Redux.
• Handle events in a React app.
• Write unit tests with React Testing Library.
• Use styles in a React app.
• Use React life cycle methods.
• Apply React best practices and language style guides in code.
• Use store, actions, and reducers in React.
• Perform a code review for a team member.

We used create-react-app and react-redux. We created routes and view components. We used react-router-bootstrap for the page navigation links and style active class to indicate which section/page the user is currently on. Then, we created directories for all Redux state slice files.

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

render list

we styled the project using React Bootstrap

• We rendered a list of rockets. For the image of a rocket, we used the first image in the array of flickr_images.
• Render a table with the missions' data (as per design).
• We render a table with the missions' data (as per design).

My profile

• We composed two layouts and listed ONLY the rockets reserved and missions joined by the user (as per design):

Enhance the My Profile section by adding the "Read more" button for each mission and rocket. Upon click, it should open a corresponding Wikipedia page in a new tab. NOTE - you need to get that extra Wikipedia URL from the API's payload.

Enhance the My Profile section by adding the "Cancel reservation" and "Leave Mission" buttons to the lists here. Clicking them should dispatch the actions you have already used in the main Rockets and Missions sections.

Enhance the My Profile section by adding a placeholder message when the "My Missions" or "My Rockets" lists are empty (no missions joined or no rockets reserved)

• 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).
• 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.

• 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).