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 relatively well-formatted with semantic and sensible variable/function/component naming throughout.
• Code is easy to read and understand. Components are named and organized in a way that makes sense and is straightforward to follow.

Areas for Growth:

• Writing good semantic, accessible HTML is still an important concern. For example, there is no h1 in the code rendered in the browser, which detracts from search engine optimization (SEO) as well as accessibility. We also talked a little bit about how if you're wrapping a button in a Link (essentially an anchor element), you're probably not using those elements as they're meant to be used. An anchor element is for navigation, and a button is for page actions (e.g., submitting a form or closing a modal).
• Formatting is a bit inconsistent, with a mixture of tabs and spaces for indents, and different amounts of spacing between lines. There are also still a couple instances of console.logs that should be removed from a deployed main branch. As mentioned, setting up your editor's formatter to enforce these settings for you will save you some valuable time and yield consistent results!
• Watch out for a few instances of commented-out code in CSS files.
• Quite a few empty files or placeholder components that are not being used, as well as things that you were trying out, like Styled Components and Context in Utils! I'd move anything that's not contributing to the functionality of your application off of the main branch and out of production code.
• I see you have some unused dependencies, like bootstrap and styled-components. If there's any package you thought you were going to use but didn't end up needing, I'd uninstall it with npm uninstall bootstrap for example, so that it doesn't bloat your application unnecessarily. Since it's listed in the package.json, it's going to download to the node_modules every time your app is installed and built.

Technical Requirements - Excelling

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 and goes beyond the basic requirements. Good job hitting some big stretch goals!
• Nice work implementing React Router for dynamic page navigation and multi-page functionality, though things definitely got a bit MacGyver-y at times!
• You did a terrific job working through some challenging technical issues, mostly on your own! I'm proud of you for solving your own code problems, getting your project working and building out some pretty complex functionality and engaging features independently. I love that resourcefulness!
• Good job adding in some error handling for your API calls.

Areas for Growth:

• As we discussed, make sure that you're taking advantage of the React Router library to hide and show different components on different routes. You figured out some clever workarounds, like the hidden boolean, but as you discovered, it caused some problems in other aspects of your application. Use the route parameters to pass information to a component in terms of what it should be showing. You mentioned the the useHistory hook as something you'd like to explore, but its use case is more of programmatically navigating through an application. The useParams hooks is more likely something you'd want to use as you improve your implementation of React Router.
• One of the hallmarks of React is the idea of component reusability. For instance, your Anime and Manga components return almost exactly the same JSX, but are currently two different components in two different files. How could you DRY this up?
• There should be some type of error handling for when a user types in a search string that does not yield results on the Hunter views.
• Your GitHub repo shows a good history of descriptive commits, but work on both the consistency of your commit message formatting as well as their content. 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 results 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 use and navigate and design is on-theme for the application.
• The design and use of image and video assets is highly effective in terms of drawing in the user!
• You went above and beyond in terms of designing your own logo for the app, and the favicon as well. The UI has a very custom and professional feel thanks to these small touches.

Areas for Growth

• As you mentioned in your notes to me, more responsive design should be one of the next major features to work on! Currently the application doesn't resize in a browser window very well. Part of the reason might be hard-coding the height and width in the .homepage rule.
• I like the idea of a loading spinner that can be displayed while data is being fetched. It looks like you experimented in one of the component files with the React Bootstrap Spinner component. You might need a loading state variable. As long as loading is true and error is false, this loading GIF or component or message can be displayed.
• A content advisory modal would be great for both UI and as a technical challenge to build out from scratch! We often rely on CSS frameworks to create that functionality for us, but it would be cool to build it out yourself!
• I also like your idea of implementing a pagination feature. An infinite scroll is also a similar feature in terms of allowing user to load more results. Both of these are something that you could build out yourself, but there are also third-party libraries that can help.
• There are a few instances where the choice of font color and background does not see high-contrast enough to be visually accessible. Here's a cool tool to check.

Functionality - Excelling

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 works without any major errors or bugs observed during regular use.
• Project presents a complete application with a variety of user interactions and features available.
• Features are fully implemented in a way that makes sense. The Hunter vs. Explorer and Manga vs. Anime modalities are really cool!

Areas for Growth:

• The main detractor from full functionality is the fact that your application breaks on refresh of routes other than the home page because data is being passed down from state, and because of the way you're working around and not with React Router for your page views. Components rendered from routes should be responsible for fetching their own data to avoid this type of error, ensuring that those routes are bookmark-able and can stand on their own even with browser refreshes. The general rule of thumb is to put state and fetch data as close as possible to the component that needs it, but lifted high enough to share any data with other components.

Presentation - Performing

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

Strengths:

• The repository is relatively well-organized. Files and folders are well-named.
• Great job highlighting the important aspects of your project in the README.md. The descriptions and screenshots are very engaging and offer good insight into your application.

Areas for Growth:

• The "About" tab in your repo should include a link to your deployed app and a brief description.
• I would move all your wireframes and other planning documents into a planning directory in your repo so that they are not cluttering the outer folder.
• Remember to delete unused files and code that comes with the create-react-app template.

Hard Requirements - (Mostly) 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. ❌ -- I don't see a link to your deployed application anywhere in your README or on your GitHub repo, but this is a quick fix!!
• You have used git for version control throughout the project.

Grade: Pass 🎉🎉🎉

Drew, amazing work on this project! You chose a great API, and your enthusiasm for both your topic and the technologies at hand was apparent throughout the course of project week and in your final product. You clearly grew more confident with React and with trying new things, as well as solving your own technical issues. The result is a project that highlights your growing abilities as a programmer and that is also feature-rich and engaging. There are a couple areas in which you might continue working, such as refining your use of React Router to show and hide different content on different routes, developing more sophisticated error handling and making the routes refresh-proof. Overall, you hit this one out of the park! Thank you for all your hard work and engagement in the course so far, and looking forward to seeing your continued successes and growth!