Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Milestone 5 : React-Redux-Capstone-Project #1

Merged
merged 30 commits into from
Jul 7, 2023
Merged

Milestone 5 : React-Redux-Capstone-Project #1

merged 30 commits into from
Jul 7, 2023

Conversation

Gardimy
Copy link
Owner

@Gardimy Gardimy commented Jul 4, 2023

In this milestone I introduce the React Capstone Project, which involves building a mobile web application using React and Redux. The project focuses on creating an application that allows users to check a list of metrics obtained from a selected API. The application consists of multiple pages, including a homepage with a list of items and a details page displaying specific data for each item. The project follows design guidelines and incorporates interactions for a seamless user experience.

Changes Made:

  • Developed a React application using Redux for state management.
  • Created a homepage with a list of items that can be filtered based on user input.
  • Integrated an API of choice to retrieve numeric data for the categories.
  • Designed and implemented a details page to display detailed data for a selected category.
  • Implemented navigation between the homepage and details page.
  • Ensured code adheres to HTML, CSS, and JavaScript best practices.
  • Added appropriate documentation for the project in a professional manner.
  • Ensured there are no linter errors in the codebase.
  • Followed the correct Gitflow process for version control.

API: I use the Jikan API

  • Selected the Financial Modeling Prep API for obtaining stock data.
  • Integrated the API into the application to retrieve numeric values based on parameters.

Testing:

  • Conducted thorough testing of the application to ensure proper functionality.
  • Verified that all features, such as filtering, navigation, and data retrieval, work as expected.

@Gardimy Gardimy changed the title Milestone 5 : React-Redux_Capstone Milestone 5 : React-Redux-Capstone-Project Jul 6, 2023
Copy link

@OLIPLICHE OLIPLICHE left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Gardimy,

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

Highlights

  • The App contains home and details pages 👍
  • The project is using redux for data retrieved from the API 👍
  • The App has been deployed successfully and it is working fine

Required Changes ♻️

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.

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.

Comment on lines 21 to 30
<div className="grid-container">
{categories.map((category) => (
<Link to={`/details/${category.mal_id}`} key={category.mal_id} onClick={() => dispatch({ type: 'SET_SELECTED_CATEGORY', payload: category.mal_id })}>
<div className="category-item">
<img className="category-image" src={category.images.jpg.image_url} alt={category.image_url} />
<div className="category-title">{category.title}</div>
</div>
</Link>
))}
</div>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Hi, you have done a nice job and your App is working fine. You need to work on the design and submit it for re-review. this is what the requirements say:
  • You should follow the design guidelines including Layout: composition and space between elements.
    NB: Pay attention to the blue marks in the pictures to understand what is missing in your design, and implement them if possible(Remove space in between pictures, also add those small arrows in each pictures)
  • Original
    Capture1
  • Your design

Capture

Comment on lines +1 to +5
import React from 'react';
import { render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom';
import Navbar from '../components/Navbar';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Hi, I will advise you to test more components of the App, because the requirements say that the App must have unit tests for several components of the app.

  • Can you add integration tests using React Testing Library, it is the project requirement.
    For this one, you can perform a mocking data fetching and Redux Store connection.

Copy link

@franclobo franclobo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Gardimy,

♻️ Required Changes ♻️

istockphoto-1079018918-612x612

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

Highlights

  • No linter errors ✔️
  • Descriptive PR ✔️
  • Correct Git flow ✔️
  • All tests passed ✔️
  • Good UI ✔️

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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • As requested by the previous CR please 🙏🏽 add several tests for the components, you have a test for the Navbar component, kindly add tests for DetailsPage and Homepage.

Copy link

@roshan-bajgain roshan-bajgain left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Gardimy,

In my opinion, your project is ready for the presentation! There is nothing else to say other than... it's time to merge it :shipit:

Good luck! 🎉

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.

@Gardimy Gardimy merged commit 309d208 into Dev Jul 7, 2023
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants