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.

Areas for Growth:

There are still a couple instances of console.log() that should be removed from deployed code.
A few instances where code could be a bit DRY-er -- for instance, you can set multiple state variables in one this.setState(), and also chain certain higher-order array methods together, such as .map and .sort. Also, instead of calling process.env.REACT_APP_KEY multiple times or the base API URL, you can save those as variables in App.js and pass them down to components that need them as props. Also, if a component does not have its own state, it can be slightly more concise to write it as a functional component instead of class-based.
With the number of component files in this app, consider organizing your components into individual folders along with their stylesheets. This will make that components directory a little more digestible.

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 application truly highlights the best of what we've learned throughout the frontend unit. What you've accomplished here with React is great -- I see good use of component life cycle methods, state/props logic, conditional rendering/styling, and React Router (including the history prop), as well as a solid approach to breaking down the UI with React components. Underneath that, there is also great evidence of strong programming skills, such as how you write API calls with promises, parse and handle data that returns from API calls, as well as all the great CSS you wrote from scratch to create the gorgeous UI.

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 movie 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.
I couldn't see whether you worked on a development branch beyond the layout one we made in office hours, but for further feature development and for future projects, definitely continue to make use of 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 get in the habit of doing.

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:

This one of the best UIs I've seen in a student project. It is polished, professional, modern, and frankly looks like a real product, and one that I could spend hours on. :)
I'm so impressed that you wrote all this CSS from scratch -- you clearly have very strong skills at designing and implementing attractive user interfaces and intuitive user experiences!

Areas for Growth

One small UI feature that I think could be an easy fix is making sure the actor cards/movie cards that populate on a detail view are all of uniform height. I noticed that the ones with no image are shorter than the others, and assigning them a fixed height or letting them stretch to fill the the height of their row will make that feature look even more polished.
When you get a chance, I would love to see you customize the favicon and title of your page (all in the public folder). This is my favorite site that generates custom favicons as well as a site manifest.

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:

The application works perfectly without errors or bugs observed.
Every feature is fully implemented, and presents a complete application with a unique and engaging concept that delivers on functionality.

Areas for Growth:

When there are no results found (I tried searching for 'asdf'), it would be great if there were some sort of message that prompts the user to try a different search term.
I noticed that when clicking on a movie search result, the "No image found" error message flashes before API data loads. It's awesome that you wrote out this error handling code, and a cool next feature to work on could be adding a 'loading' feature or div that shows while data is returning, and doesn't flash the "No image found" message until the component has finished loading.

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.
Excellent documentation. Your README is so detailed and thorough, and the screenshots make it so engaging! In particular, I love that you showed off your involved planning process -- those wireframes, feature plans and user stories are very well-thought-out.

Areas for Growth:

I didn't see a "Technologies Used" section on the README. 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 (where your deployed URL is), you can also add 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.

Hard Requirements - Complete:

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

Grade: Pass 🎉🎉🎉

Tabitha, excellent work on this project. I'm so impressed by how much time and effort you put into the planning and execution of this amazing application. The UI is just stunning, and there is also a solid, well-written React application underneath that shows off the best of what we've learned about programming and frontend development. Thank you for all your hard work on this project and throughout the course, and I'm excited to see your continued growth and success! As always please let me know if you have any questions or concerns about this or anything else in our course.

Hi Esin!

Sorry for the late reply on this. I really wanted to express my gratitude for the awesome feedback and suggestions. I really didn't expect it to be so in depth and specific. I will definitely be revisiting and making some changes. Thanks for all your help throughout this course!

Best,

Tabitha

On Sun, Aug 9, 2020 at 5:16 PM Esin Saribudak notifications@github.com wrote:

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.

Areas for Growth:

There are still a couple instances of console.log() that should be removed from deployed code.

A few instances where code could be a bit DRY-er -- for instance, you can set multiple state variables in one this.setState(), and also chain certain higher-order array methods together, such as .map and .sort. Also, instead of calling process.env.REACT_APP_KEY multiple times or the base API URL, you can save those as variables in App.js and pass them down to components that need them as props. Also, if a component does not have its own state, it can be slightly more concise to write it as a functional component instead of class-based.

With the number of component files in this app, consider organizing your components into individual folders along with their stylesheets. This will make that components directory a little more digestible.

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 application truly highlights the best of what we've learned throughout the frontend unit. What you've accomplished here with React is great -- I see good use of component life cycle methods, state/props logic, conditional rendering/styling, and React Router (including the history prop), as well as a solid approach to breaking down the UI with React components. Underneath that, there is also great evidence of strong programming skills, such as how you write API calls with promises, parse and handle data that returns from API calls, as well as all the great CSS you wrote from scratch to create the gorgeous UI.

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 movie container' or 'Refactor API call'. This is my favorite article https://chris.beams.io/posts/git-commit/ on how to write good commit messages and why it should be a focus for developers.

I couldn't see whether you worked on a development branch beyond the layout one we made in office hours, but for further feature development and for future projects, definitely continue to make use of 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 get in the habit of doing.

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:

This one of the best UIs I've seen in a student project. It is polished, professional, modern, and frankly looks like a real product, and one that I could spend hours on. :)

I'm so impressed that you wrote all this CSS from scratch -- you clearly have very strong skills at designing and implementing attractive user interfaces and intuitive user experiences!

Areas for Growth

One small UI feature that I think could be an easy fix is making sure the actor cards/movie cards that populate on a detail view are all of uniform height. I noticed that the ones with no image are shorter than the others, and assigning them a fixed height or letting them stretch to fill the the height of their row will make that feature look even more polished.

When you get a chance, I would love to see you customize the favicon and title of your page (all in the public folder). This http://favicon.io is my favorite site that generates custom favicons as well as a site manifest.

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:

The application works perfectly without errors or bugs observed.

Every feature is fully implemented, and presents a complete application with a unique and engaging concept that delivers on functionality.

Areas for Growth:

When there are no results found (I tried searching for 'asdf'), it would be great if there were some sort of message that prompts the user to try a different search term.

I noticed that when clicking on a movie search result, the "No image found" error message flashes before API data loads. It's awesome that you wrote out this error handling code, and a cool next feature to work on could be adding a 'loading' feature or div that shows while data is returning, and doesn't flash the "No image found" message until the component has finished loading.

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.

Excellent documentation. Your README is so detailed and thorough, and the screenshots make it so engaging! In particular, I love that you showed off your involved planning process -- those wireframes, feature plans and user stories are very well-thought-out.

Areas for Growth:

I didn't see a "Technologies Used" section on the README. 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 (where your deployed URL is), you can also add 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.

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

Tabitha, excellent work on this project. I'm so impressed by how much time and effort you put into the planning and execution of this amazing application. The UI is just stunning, and there is also a solid, well-written React application underneath that shows off the best of what we've learned about programming and frontend development. Thank you for all your hard work on this project and throughout the course, and I'm excited to see your continued growth and success! As always please let me know if you have any questions or concerns about this or anything else in our course.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/TabithaMaud/project-movie-app/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP4MSKRDQP7Y2T6LQF3LJS3R74G3LANCNFSM4PZMCASA .

Hi Tabitha!

It's my pleasure, and I'm really glad you found the feedback useful! Your project was a phenomenal expression of all your hard work in this course, and I can't wait to see what you do next. :)

Best,

Esin

On Tue, Aug 18, 2020 at 10:48 AM Tabitha Perry notifications@github.com wrote:

Hi Esin!

Sorry for the late reply on this. I really wanted to express my gratitude for the awesome feedback and suggestions. I really didn't expect it to be so in depth and specific. I will definitely be revisiting and making some changes. Thanks for all your help throughout this course!

Best,

Tabitha

On Sun, Aug 9, 2020 at 5:16 PM Esin Saribudak notifications@github.com wrote:

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.

Areas for Growth:

There are still a couple instances of console.log() that should be removed from deployed code.

A few instances where code could be a bit DRY-er -- for instance, you can set multiple state variables in one this.setState(), and also chain certain higher-order array methods together, such as .map and .sort. Also, instead of calling process.env.REACT_APP_KEY multiple times or the base API URL, you can save those as variables in App.js and pass them down to components that need them as props. Also, if a component does not have its own state, it can be slightly more concise to write it as a functional component instead of class-based.

With the number of component files in this app, consider organizing your components into individual folders along with their stylesheets. This will make that components directory a little more digestible.

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 application truly highlights the best of what we've learned throughout the frontend unit. What you've accomplished here with React is great -- I see good use of component life cycle methods, state/props logic, conditional rendering/styling, and React Router (including the history prop), as well as a solid approach to breaking down the UI with React components. Underneath that, there is also great evidence of strong programming skills, such as how you write API calls with promises, parse and handle data that returns from API calls, as well as all the great CSS you wrote from scratch to create the gorgeous UI.

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 movie container' or 'Refactor API call'. This is my favorite article https://chris.beams.io/posts/git-commit/ on how to write good commit messages and why it should be a focus for developers.

I couldn't see whether you worked on a development branch beyond the layout one we made in office hours, but for further feature development and for future projects, definitely continue to make use of 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 get in the habit of doing.

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:

This one of the best UIs I've seen in a student project. It is polished, professional, modern, and frankly looks like a real product, and one that I could spend hours on. :)

I'm so impressed that you wrote all this CSS from scratch -- you clearly have very strong skills at designing and implementing attractive user interfaces and intuitive user experiences!

Areas for Growth

One small UI feature that I think could be an easy fix is making sure the actor cards/movie cards that populate on a detail view are all of uniform height. I noticed that the ones with no image are shorter than the others, and assigning them a fixed height or letting them stretch to fill the the height of their row will make that feature look even more polished.

When you get a chance, I would love to see you customize the favicon and title of your page (all in the public folder). This http://favicon.io is my favorite site that generates custom favicons as well as a site manifest.

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:

The application works perfectly without errors or bugs observed.

Every feature is fully implemented, and presents a complete application with a unique and engaging concept that delivers on functionality.

Areas for Growth:

When there are no results found (I tried searching for 'asdf'), it would be great if there were some sort of message that prompts the user to try a different search term.

I noticed that when clicking on a movie search result, the "No image found" error message flashes before API data loads. It's awesome that you wrote out this error handling code, and a cool next feature to work on could be adding a 'loading' feature or div that shows while data is returning, and doesn't flash the "No image found" message until the component has finished loading.

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.

Excellent documentation. Your README is so detailed and thorough, and the screenshots make it so engaging! In particular, I love that you showed off your involved planning process -- those wireframes, feature plans and user stories are very well-thought-out.

Areas for Growth:

I didn't see a "Technologies Used" section on the README. 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 (where your deployed URL is), you can also add 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.

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

Tabitha, excellent work on this project. I'm so impressed by how much time and effort you put into the planning and execution of this amazing application. The UI is just stunning, and there is also a solid, well-written React application underneath that shows off the best of what we've learned about programming and frontend development. Thank you for all your hard work on this project and throughout the course, and I'm excited to see your continued growth and success! As always please let me know if you have any questions or concerns about this or anything else in our course.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/TabithaMaud/project-movie-app/issues/1, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AP4MSKRDQP7Y2T6LQF3LJS3R74G3LANCNFSM4PZMCASA

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/TabithaMaud/project-movie-app/issues/1#issuecomment-675559655, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMUN52OFL3IM6NUM42CTT43SBKPGDANCNFSM4PZMCASA .

TabithaMaud / project-movie-app