React capstone project - Metrics webapp #4
Conversation
There was a problem hiding this comment.
Hi @porag-m06,
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 ✔️
- React application works as expected ✅
- Application uses
reduxlibrary for state management ✅ - Good video presentation ✅
- Pull request has a descriptive title and summary ✅
- Git flow is used correctly ✅
Required Changes ♻️
- I think it would be better if you fix the error on your
Live demo, once you deploy your application online you need to make sure that it works the same way it did when developing (the home and detail page works as expected). I would like to suggest that you try deploying the application usingNetlifyorGitHubpages if deploying onrendergives an error. Please see this link on how to deploy a react application on Netlify using GitHub
State of deployed link
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:
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.
src/components/PollutionDetail.js
Outdated
| <h3>Pollutant concentration in μg/m3:</h3> | ||
| <ul className="pollutants-list"> | ||
| {Object.keys(item.components).map((key) => ( | ||
| <li key={key}>{`${(key).toUpperCase()} : ${item.components[key]}`}</li> |
There was a problem hiding this comment.
-
[ Required ] I think it would be better if this part of your design is consistent with the design provided on Behance.net, currently, it differs from the design on Behance in the following ways.
- The details list on Behance is zebra stripped background whereas the design on the details list on your design uses only one solid background color.
- The details list items on the Behance design have padding around them whereas on your design the details list items have no padding around them.
Screenshot
I would like to suggest that you try and match the design for this view as much as possible.
| Behance design | Your design |
|---|---|
 |
 |
src/components/GeoLocation.js
Outdated
There was a problem hiding this comment.
- [ Required ] This comment is related to the
redux/features/geolocations/geolocationSlice.jsfile. I would like to suggest that you delete the commented code on line49, this is because commented code makes a project look unprofessional and is widely considered as a sign of code that is not clean. Please see the screenshot below and rectify this.
There was a problem hiding this comment.
Hi, thanks for the feedback. It has been removed. :)
|
Hi @porag-m06, This is a manual reviewApproved 👍Cheers and Happy coding!:clap::clap::clap: |
Live Demo:
Video Presentation:
Highlights
GeoDB Cities API for retrieving cities with latitude and longitude selected.
Air pollution API: for air quality data selected.
Home page search added by city name.
Tests added.
Retrieved data from API stored in the store.
Unique route for each page.