Create full version of the project - Space Travelers Hub

[NitBravoA92]

React & Redux project. 🥇

Team:

@NitBravoA92
@Kidd254

To build this project, the following requirements were fulfilled:

General requirements

✅ Follow the Gitflow pattern
✅ Distribute the work based on a Kanban board
✅ Create and set up a React project with create-react-app
✅ Use Redux Toolkit / React Redux to manage the global state of the application
✅ Use React Router to create the navigation routes.
✅ Create unit tests using Jest and React Testing Libraries
✅ Build the following interfaces: Rockets, Missions, and My Profile.
✅ Apply the Conditional Components Rendering approach to render different markups if a condition is true or false.
✅ Follow the design of the provided wireframes.
✅ Have no linter errors.
✅ Project documented correctly.

Coding requirements

✅ Header: A navigation menu is created in this section using the <NavLink /> component of React Router to display the navigation links to the different pages. When the user clicks on any navigation link, the corresponding view is displayed and the selected link is underlined, so the user knows at all times which view is active. In addition to the navigation menu, the Logo and title of the web page are also displayed in the Header.

✅ Rockets view: Upon loading the page, the web application retrieves data from the selected API (https://api.spacexdata.com/v4/rockets) using the useDispatch() hook to dispatch the getAllRockets action that updates the rockets state. This functionality allows to display the list of rockets items on the screen.

• When the user clicks on the Reserve Rocket button of a rocket item, the action addReserve is dispatched using the useDispatch() hook, and the rockets state is updated. The rocket's item information is updated on the screen displaying a blue badge with the text reserved and a Cancel Reservation button.
• When the user clicks on the Cancel Reservation button of a rocket item, the action cancelReserve is dispatched using the useDispatch() hook, and the rockets state is updated. The rocket's item information is updated on the screen by removing the blue badge with the text reserved and the Cancel Reservation button and displaying the Reserve Rocket button again.

✅ Missions view: Upon loading the page, the web application retrieves data from the selected API (https://api.spacexdata.com/v3/missions) using the useDispatch() hook to dispatch the getAllMissions action that updates the missions state. This functionality allows displaying the list of missions on the screen. This data is displayed using an HTML <table> element.

• When the user clicks on the Join Mission button of a mission item, the action addReservedMission is dispatched using the useDispatch() hook, and the missions state is updated. The mission's item information is updated on the screen by removing the gray NOT A MEMBER badge and the Join Mission button and displaying a new blue badge with the text Active Member and a Leave Mission button.
• When the user clicks on the Leave Mission button of a mission item, the action LeaveMission is dispatched using the useDispatch() hook, and the missions state is updated. The mission's item information is updated on the screen by removing the blue badge with the text Active Member and the Leave Mission button and displaying again the NOT A MEMBER badge and the Join Mission button.

✅ My Profile view: Upon loading the page, the web application gets the Reserved Rockets and Joined Missions data from the rockets and missions state using the useSelector() hook. This information is displayed on the screen in two columns with the titles My Missions and My Rockets. When the status of rockets and missions changes (for example, when you reserve a new rocket or leave a mission), the My Profile view also changes, showing an updated listing.

The state updates are not preserved in the API.

Additional: The application has been successfully deployed. Live Demo link in the documentation.

⭐To the code reviewer 👨‍💻

💝 We really thank 🙇‍♂️ you, dear code reviewer 👨‍🎨 for dedicating your precious 🥇 time ⌚ to check the PR 🧾 .

We kindly ask 🙏 dear code reviewer 🤵 that if there is any kind of issue 🦯 in this project, please do list 📃 them in a descriptive 💡 manner and give your best suggestions 🎁 if needed.

If you think there are some big issues that are essential to be changed ♻️ please kindly contact 📞 us through Zoom or Slack, I am available on Microverse UTC-6 time zone.

[AbelG101]

Hi @NitBravoA92 & @Kidd254 👋,

Your project is complete! You've done outstanding work here from the awesome UI down to the last bit of code, so...there is nothing else to say other than... it's time to merge it.
Congratulations! 🎉 🥳🥇

Highlights

• UI is looking great ✔
• React Redux, Redux Logger, and React Router are properly configured ✔
• Local & global states are properly handled ✔
• API endpoints are properly called ✔
• Actions are properly dispatched ✔
• Correct use of Git Flow ✔
• Well-structured files ✔
• All linter checks are passing ✔
• Descriptive PR title with a top-notch summary ✔

Optional suggestions

• N/A

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

---

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.