React Capstone Project #3
Conversation
React capstone project - Metrics webapp
Add demo lnik
There was a problem hiding this comment.
Hi @johnkioko,
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
- Descriptive pull request message ✔️
- Professional readme file ✔️
- Clear commit messages ✔️
Required Changes ♻️
Check the comments under the review.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100%.
Please, remember to tag me @uwadonat 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.
|
|
||
| test('renders the navbar component', () => { | ||
| const { asFragment } = render( | ||
| <NavBar />, | ||
| ); | ||
|
|
||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); |
There was a problem hiding this comment.
- Let's add tests for some pure functions in Redux code as requested in project requirements
README.md
Outdated
| <div align="center"> | ||
|
|
||
| In the project directory, you can run: | ||
|
|
||
| <br/> | ||
|
|
||
| ### `npm start` | ||
| <h3><b>CRYPTO</b></h3> | ||
|
|
||
| Runs the app in the development mode.\ | ||
| Open [http://localhost:3000](http://localhost:3000) to view it in your browser. | ||
| </div> |
There was a problem hiding this comment.
- You should put links for your presentation and deployed app in a readme file for more visibility and it is requested. Also remember to highlight in vscode a piece of code your find interesting or you are proud of making.
There was a problem hiding this comment.
Status: Approved ✔️
Hi John,
Your project is complete! 🔋 Great job done! 🥇 😃 There is nothing else to say other than... it's time to merge it 🍾🍾. Congratulations! 🎉💯🌟
Highlights 👍
- Nice presentation of this project
- Good job acknowledging Nelson Sakwa on Behance for the Original design idea.
- API fetch properly implemented
- State management with Redux properly implemented
- Navigation working as intended
- Filter works great! 💪
- Good ReadMe
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you take them into account as they can make your code better.
Kindly consider my inline comments marked [OPTIONAL] under this review
You can also consider:
- You used incorrect gitflow/ GitHub flow for this project! Kindly note that capstone project worked on by a single contributor should have merge request flow from feature into development. Importantly, kindly ensure to use the correct gitflow for subsequent capstone projects.
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 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.
|
|
||
| ## 📝 License <a name="license"></a> | ||
|
|
||
| This project is [MIT](./LICENSE) licensed. |
There was a problem hiding this comment.
- OPTIONAL
MIT license link in your ReadMe is broken, kindly endeavor to fix it.
In this React capstone project, I built a mobile web application to check a list of metrics (numeric values) making use of React and Redux.
In this Project:
The project is a single-page application (SPA) built with React and Redux.
The data retrieved from the API is stored in the Redux store.
You can filter data that you retrieve from the API using a Filter stateless component.
Each page has a unique route within the SPA.
Home page
When the page loads, the web app shows the list of categories that could be filtered out by some parameter, for example by the category name.
Along with the category name, it will display some numeric values per category that come from the API.
When a category item is clicked or tapped, the application navigates to the details page.
On the details page, the web app 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.
Link to the project video demo
Live Demo