Project 2 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.
• Great job breaking down UI components into individual React components. As a result, component files are relatively concise.

Areas for Growth:

• There are still a couple instances of commented-out code that should be removed from a deployed main branch.
• A few instances of using let for variable declaration when const would be more appropriate. Reserve let for when you need to reassign the value of a variable in your code.
• The Header component might be one to consider breaking down into smaller components! Not only will this make the individual components more concise and readable, but connecting the Navbar elements with the state in the Starman modal appears to be causing the Navbar to refresh along with other components when a new link is clicked.

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.
• Nice job implementing React Router for dynamic page navigation and multi-page functionality.
• Great use of React Bootstrap to implement a CSS framework for your application. Bootstrap components' styles and functionality are leveraged well in this project, including Cards, Modals, Nav, and Carousel.
• Good job making use of Git branches to try out new things and keep production code safe on the main branch. I know this was a bit of a learning experience in that area, but you did a great job!

Areas for Growth:

• Instead of returning an alert in the .catch section of your API fetch calls, use the .catch to dynamically display an error message. 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.
• 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 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:

• Way to use Bootstrap here. As a result, you have very consistent margins, padding, and alignment throughout. Mobile responsiveness is built right in, and the overall effect is that of a modern, polished application. Choice of font and colors is very on-theme.
• 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

• There are a few instances in the mobile view where there is some unexpected behavior in the UI. I noticed that the home page carousel component, for instance, gets stretched out vertically but the images remain at the top.
• On the "Latest" page, the logo of the latest launch is huge on both desktop and mobile browser widths! Take a second look at that image and add some size constraints.

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 errors or bugs observed. No errors related to code you wrote log to the console (the one about "failed to execute postMessage" is a known bug with React Player/YouTube's iFrame API).
• Project presents a complete application with a variety of user interactions and features available. Features are fully implemented in a way that makes sense.

Areas for Growth:

• Currently the entire page refreshes and the user sees a white screen when a Nav link gets clicked on, as mentioned above. This appears to be because the Spaceman modal is part of the Nav elements in the Header.js file, and you have loading logic in place there. I would make the Nav elements a static component that does not depend on state or props, and separate out the modal functionality from the baseline Nav element. Ideally, when a Nav link gets clicked on, only the section of the app that requires reacting would update, and the Nav would stay in place, which is the whole idea of React.

Presentation - Excelling

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.
• Great job highlighting your planning and coding process in the README.md. The wireframes, component tree, and screenshots are very engaging and offer good insight into how you built this application.
• Nice job using GH Projects as your organizing tool. I could tell how prepared you were with specific questions in office hours, and you obviously hit MVP super early and were able to achieve many of your stretch goals. Great planning and project management here!

Areas for Growth:

• The "About" tab in your repo should include a link to your deployed app.

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 🎉🎉🎉

JT, 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 super polished, feature-rich and engaging. There are a couple areas in which you might continue working, such as developing more sophisticated error handling and making the nav bar static so that it doesn't refresh along with the entire application when the user navigates to other components. 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!