roshoniab/familiar

familiar's Issues

Project 2 Feedback

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.
• 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.
• Way to add the YouTube attribution in the Todo component.

Areas for Growth:

• There are still a couple instances of console.log() that should be removed from deployed code. (Check out the deleteItem method in Todo.js.) Eventually, instead of console.error for the catch in promises, you want to build out some error handling to convey error messages to the user.
• With the number of component files in this app, consider organizing your components into a components folder.
• Remember that it's more concise to write components that don't require their own state (like your App.js) as functional rather than class-based components.
• Be sure to remove any unused code and files that come with the npx create-react-app bootstrap.

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:

• This project meets all of the technical requirements set out in the project specs! Great job using not just one, but TWO APIs, including figuring out how to use a CORS proxy.
• Way to go above and beyond and implement some additional technologies through your own research. I like how you are using local storage, and this shortid package is pretty cool!
• Nice job using Git Branches to work on code without affecting the master branch -- this will keep you from having to worry about breaking the working code, and is a useful development practice to continue.

Areas for Growth:

• Your GitHub repo shows a good history of descriptive commits, but (and this is relatively minor) 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 app 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 - Performing

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:

• App is very easy to navigate. UI is modern and UX is intuitive.
• The color scheme is so soothing and subtle. It fits the app perfectly.
• The UI looks amazing on mobile, and I can tell it was designed with responsiveness in mind.

Areas for Growth

• On both the mobile and desktop browser widths, the app extends too far down on the landing page. This is probably a quick fix by setting a height on the body selector in index.css.
• The nav bar layout gets a little wonky on wider screen widths and should be adjusted. It would be great if the nav bar indicated which page the user was on. Using Flex or Grid would be a better option here than inline-block.
• Be sure to customize the title of your application in the head tag of your index.html file. Also create your own favicon so that it does not display the default React app one.

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:

• The application works without errors observed.
• Every feature is fully implemented in a way that makes sense.

Areas for Growth:

• I noticed that when clicking on the daily advice tab, empty quotes flash before the results of the API call come back and trigger the component to be re-rendered. How could you rewrite this component so that it either flashes nothing or a loading message before the results populate?
• I also noticed that you can add blank 'todo' items. How might you refactor the code so that blank form entries are not allowed?
• One cool functionality I would love to see is if the user can refresh the advice/affirmation with a button, instead of by navigating away/navigating back.

Presentation - Performing

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.
• The README is a good start and includes a description, technologies used, getting started, and contribution sections.

Areas for Growth:

• I would keep building out the README to be a more detailed overview of your project. This would be helpful to include so that visitors to your repo can see exactly how you implemented this application! A code snippet that you're particularly proud of could also be something cool to include here. In the About tab of your repo please add the deployed URL, and you can also add a short description and tags to your repo to help identify it as well.
• You did such great planning work for this project. I would love to see a planning directory added to your repo that includes your proposal and wireframes. Your README could also provide an overview of your planning process.
• This is relatively minor, but I wouldn't include Node.js and jQuery as part of the technologies used, unless you used them in a way that is not immediately apparent. I would add React Router and the shortid package you used to the list of technologies.

Hard Requirements - (Almost) 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. ❌ - this is a quick fix ... please add your deployed URL to that about section.
• You have used git for version control throughout the project.

Grade: Pass 🎉🎉🎉

Roe, excellent work on this project! You did a fantastic job delivering a great React app in a very short sprint. I'm impressed by how you pared down the MVP to something very deliverable, but I hope you continue to work on the features you had on your silver/gold feature plans. I think improving the nav layout is one of the quicker fixes that will pay off the most in terms of functionality. Thanks for all your hard work on this and throughout the course. As always, let me know if you have any questions or concerns about this or anything else.