Add all project files #1

musangamfure · 2023-06-30T19:06:18Z

Hello,

In this PR, I have worked on all features and functionalities of the react-capstone project which in my case the Movie app.

Here are what I have done:

Home page

- When the page loads, the webapp shows the list of categories that could be filtered out by some parameter, for example by the category name.
- Along with the category name, you will display some numeric values per category that come from the API.
- When the user clicks (or taps) on a category item, the application navigates to the details page.

Details page

- In the details page, the webapp retrieves data from the API to show detailed data in the category.
- When the user clicks on the "Back" button (<), the user navigates to the home page.

Testing requirements

- Create unit tests for pure functions in your Redux code.
- Create integration tests for your application using the React Testing Library.

Technical requirements

- The project is a single-page application (SPA) built with React and Redux.
- The data retrieved from the API should be stored in the Redux store.
-  Filter shows from the API using a Filter stateless component by categories.
- Every page (the main page and the pages for each item) have a unique route within the SPA.
- The project is deployed and accessible online using [Render](https://render.com/).
- Link to the online version of the app is in the README file.

Kindly check the project and let me know what you think.

Happy Coding 🎉🎉

Update README

vickymarz

Hi @musangamfure,

You have done a great job so far! 💪 👏
You still need to work on a few issues before moving on to the next project, but you're almost there!

Top highlight 🎯

The Pull Request is following the Git Flow ✅
Good redux setup✅
The PR title and description are professional and descriptive ✅
Tests well written ✅
Good component structure ✅
Linters are working properly ✅

Required Changes ♻️

I have gone through your code and its commendable. One major thing you need to take note is that your design doesn't match the design guideline given to you. It is very important to always stick to any design given to you and replicate it as expected. In this regard, I will like you to look critically at the design guideline and make sure to modify your design to match it for both the homepage and the details page 👎🏽

Design guideline 👇🏽

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

You can also consider:

N/A

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.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

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.

vickymarz · 2023-06-30T20:57:24Z

README.md

+<!-- ACKNOWLEDGEMENTS -->
+
+## 🙏 Acknowledgments <a name="acknowledgements"></a>


Kindly ensure that your README contains an "Acknowledgements" section or similar that gives appropriate credit to Nelson Sakwa the author of the original design, as required by the Creative Commons License.

codepantha

STATUS: CHANGES REQUIRED ♻️

Hi @musangamfure 👋,

Great work on making the changes requested by the previous reviewer 👏
You've done well implementing some of the requested changes, but there are still some which aren't addressed yet.

Highlights 🎯

✔️ Descriptive PR
✔️ Wrote unit tests 📌
✔️ Linters are passing 📌

Required Changes ♻️

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to 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.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

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.

codepantha · 2023-07-01T03:29:21Z

src/components/Show.js

+    <div className="show-item">
+      <button
+        type="button"
+        onClick={handleShowDetails}
+        aria-label="View more info"
+        className="details-btn"
+      >
+        <BsArrowRightCircle />
+      </button>
+      <img className="show-image" src={Show.image.medium} alt="" />
+      <h3 className="show-name">{Show.name}</h3>
+      <h3 className="show-rating">{Show.rating.average}</h3>
+    </div>


Please style the item cards to look exactly like the design guideline. Please follow these action steps to get a more similar design:

Please use 2 background colors (a lighter and a darker variant) for the item cards and ensure that they are alternating. This will give it the look of a chequered board (like a chess board) just like in the design

Style the arrow icon at the top-right of each card to look just like the one in the design

Reduce the height of each card and its image so that it mirrors the cards in the design accurately.

Increase the font-size of the text at the bottom of each card in order to get a more accurate design

Design Guideline

Your Implementation

…apstone-project into project-development

tufoinnkuo10

Hi @musangamfure

There are some issues that you still need to work on to go to the next project but you are almost there!

To Highlight
✅ You used the correct Gitflow
✅ Descriptive pull request message
✅ linter error checks validated
✅ Test added
✅ well deployed

Required Changes ♻️
Check the comments under the review

Optional suggestions
_Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

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.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
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.

tufoinnkuo10 · 2023-07-01T06:01:45Z

src/components/ShowDetails.js

+
+function ShowDetails() {
+  const { id } = useParams();
+  const shows = useSelector((state) => state.shows.Shows);


Wonderful job so far. Please like the previous reviewer specifically noted and as you can see from the original design, the thick and light color is in a check board form. I.e. a zigzag manner, not one side being thick color and one being lighter like in your case. Kindly use this small change as a way to advance your design skill 😄 💯
yours

original design

tufoinnkuo10

Status: Approved ✔️

Hi @musangamfure

Your project is complete! Great job for making the changes🥇. There is nothing else to say other than... it's time to merge it 🍾🚢 . Congratulations! 🎉💯🌟

Good Points 👍

Descriptive Pull Request
Great design
No linter errors

Cheers..Happy coding!..and keep soaring higher! 💻 🍷 🚀

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.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have 2 more limited reviews per this project. If you think that the code review was not fair, you can request a second opinion using this form.

musangamfure and others added 3 commits June 30, 2023 19:41

Add all project files

8921248

Change title

5120055

Update README.md

a3ed34c

Update README

vickymarz suggested changes Jun 30, 2023

View reviewed changes

musangamfure and others added 3 commits July 1, 2023 03:25

Update the UI view

1f71001

Update README.md

1accf39

Update README.md

f2a228e

codepantha suggested changes Jul 1, 2023

View reviewed changes

musangamfure and others added 4 commits July 1, 2023 06:07

Update CSS

fa6284d

Merge branch 'project-development' of github.com:musangamfure/react-c…

a900595

…apstone-project into project-development

fix linters

6f62530

Update README.md

ce70008

tufoinnkuo10 suggested changes Jul 1, 2023

View reviewed changes

musangamfure and others added 5 commits July 1, 2023 10:21

Update Colors

5254b2a

Update the UI

b217bd2

Fix Linters

79bf7d1

Update the UI

674513c

Update README.md

2b496f0

tufoinnkuo10 approved these changes Jul 1, 2023

View reviewed changes

musangamfure merged commit 2b50028 into dev Jul 1, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add all project files #1

Add all project files #1

musangamfure commented Jun 30, 2023

vickymarz left a comment

vickymarz Jun 30, 2023

codepantha left a comment

codepantha Jul 1, 2023

tufoinnkuo10 left a comment

tufoinnkuo10 Jul 1, 2023

tufoinnkuo10 left a comment

		<!-- ACKNOWLEDGEMENTS -->

		## 🙏 Acknowledgments <a name="acknowledgements"></a>

Add all project files #1

Add all project files #1

Conversation

musangamfure commented Jun 30, 2023

Here are what I have done:

vickymarz left a comment

Choose a reason for hiding this comment

Top highlight 🎯

Required Changes ♻️

Optional suggestions

vickymarz Jun 30, 2023

Choose a reason for hiding this comment

codepantha left a comment

Choose a reason for hiding this comment

STATUS: CHANGES REQUIRED ♻️

Hi @musangamfure 👋,

Highlights 🎯

Required Changes ♻️

Optional suggestions

codepantha Jul 1, 2023

Choose a reason for hiding this comment

Design Guideline

Your Implementation

tufoinnkuo10 left a comment

Choose a reason for hiding this comment

Hi @musangamfure

tufoinnkuo10 Jul 1, 2023

Choose a reason for hiding this comment

tufoinnkuo10 left a comment

Choose a reason for hiding this comment

Status: Approved ✔️

Good Points 👍