Feedback

[esin87]

Project 2 Feedback

Code Quality - Performing

Criteria: Is the code well-formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?

Strengths:

• Code is well-formatted with semantic and sensible variable/function/component naming throughout. Indentations and spacing are consistent throughout. No console.logs observed.
• Code is easy to read and understand. Components are named and organized in a way that makes sense and is straightforward to follow.
• Good use of semantic HTML throughout -- app content is separated out into main and footer elements. Nice work having one primary heading in the header.

Areas for Growth:

• You used a lot of ternary statements to check if a value was truthy and return JSX if it was. However, your falsey return was often set to an empty string. In instances where you don't need a falsey return, consider using a && operator instead -- a little cleaner.
• A couple instances of commented-out code observed. Be sure to clean these up from deployed branches.
• Think about how you can use fewer wrapper divs and more semantic elements. For example, opening up the nav element in the browser inspector, I see three layers of divs before I start seeing content. The nav links can probably also be marked up as <li> in a <ul>, which would be more semantic than paragraph elements in divs. You can always inspect your browser output and look at the elements tab to see how your React code is being compiled into DOM elements. You can also wrap content out of a return in a <> opening empty tag and a </> closing tag, or a React.Fragment if you don't want another DOM element to be created. More info here on Fragments.

Technical Requirements - Performing

Criteria: How does the project stack up to the requirements for this project? Is the developer making use of the material we've covered in a way that makes sense?

Strengths:

• The project meets the technical requirements laid out for this project. The technologies we covered are implemented very logically and effectively to create an engaging application.
• Great work parsing through API results and using conditionals to make sure data would show in the browser consistently. There might be some instances where using optional chaining (see docs here) might help minimize the amount of conditionals necessary.
• Nice job implementing React Router for dynamic page navigation and multi-page functionality.

Areas for Growth:

• It looks like you worked on just your main branch based on your GH repo. For further feature development and for future projects, definitely make use of Git Branches to work on code without affecting the main branch -- this will keep you from having to worry about breaking the working app, and is an important development practice to get in the habit of doing. When your branch works the way you want it to and you're ready to incorporate it into production code, you can submit a pull request on your repo or use git merge to merge your development branch to the main (we haven't really practiced this yet, but it's pretty straightforward!).
• Your GitHub repo shows a very extensive history of descriptive commits, but work on both the consistency of your commit message formatting as well as their content. For instance, 'some errors gone' is not a great commit message, though we've all written messages like that. Ideally, you should have one change per commit. The standard format is usually 'capitalized present-tense verb + description of what was done' for each and every commit. For example, 'Add styling to card container' or 'Refactor API call'. This is my favorite article on how to write good commit messages and why it should be a focus for developers.

Creativity and Interface - Excelling

Criteria: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?

Strengths:

• Application is easy to navigate and looks consistent across Chrome and Safari. The name you landed on (PKDb) is amazing as well.
• The design theme is modern and polished and on-theme. Choice of font and colors is very pleasing and enhances the content. The book cover colors shine through.
• The side menu is implemented very well, and I like how the page collapses into a single-column on smaller browser widths. Nice work building in that responsiveness.
• Love the abundant micro-interactions and transitions. Looks like you had a lot of fun with the CSS there!

Areas for Growth

• Remember to incorporate a custom favicon! Favicon.io is my favorite resource for those, and your download comes with all the differently-sized files needed including logo192.png, which is throwing an error in the console on page load. Alternatively, delete all references to that file from index.html and manifest.json.

Functionality - Performing

Criteria: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?

Strengths:

• Application is feature-rich. Many great components implemented well. Project presents a complete application. Features are fully implemented in a way that makes sense.
• Application works without any errors or bugs observed during normal use for the most part (aside from the logo192.png error mentioned above).

Areas for Growth:

• Instead of logging errors from API calls to the console, use .catch to dynamically display an error message in your API calls. This can be implemented by having a state hook with [error, setError], which can be set to false initially but changed to true in the event of an error. When true, a message displays to the user that tells them something went wrong and to try again.

Presentation - Progressing

Criteria: Is there adequate documentation? Is the repository well-organized and free of clutter?

Strengths:

• The repository is well-organized and free of clutter. Files and folders are well-named.
• A good start to your README is in place, with a Description, Screenshot, and Technologies Used, as well as the side About menu filled out.

Areas for Growth:

• README should include a couple more topics as described in the Project 2 markdown: Contribution Guidelines that indicate how other developers might add code or note bugs, and Installation/Getting Started Instructions that describe how a developer might download your React app to their computer and run it locally. Writing thorough and engaging documentation is an important part of showcasing our projects to prospective employers.
• I'd consider including a planning directory in your repo that includes your user stories and wire-frames to highlight your methodological approach to building out an application.

Hard Requirements - Complete:

• Your app must be a working, interactive, React application.
• It must include data from a third-party API.
• It must use at least 4 separate components.
• It must be deployed to the Web.
• It uses CSS Grid or Flex for layout and not floats.
• Your project repository must adequately document your project and include a line to the deployed app.
• You have used git for version control throughout the project.

Grade: Pass 🎉🎉🎉

Mable, congrats on this wonderful application. Your enthusiasm for this author and your project was apparent throughout the course of project week and in your final product. I knew you were skeptical about React at first, but you clearly grew more confident with React, working through programming challenges, and solving your own technical issues. The result is a project that highlights your growing abilities as a developer and that is also super polished, feature-rich and engaging. I suggested some areas for growth, such as tightening up the code a bit and more sophisticated error handling. But overall, this is a fantastic project that you should be proud of. Thank you for all your hard work and engagement in the course so far, and looking forward to seeing your continued successes and growth!