Project 2 Feedback

Code Quality - Excelling

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.
Comments throughout your files make it easier for people unfamiliar with your codebase to understand what the code is doing!
Way to use React Hooks for lightweight functional components throughout! Your components are very concise and easy to follow as a result.

Areas for Growth:

Be sure to delete (rather than just comment out) any console.logs left in your code!
Deployed code should not have console.errors either -- replace it eventually with error handling that displays user-facing error messages, so that users know when something went wrong on the app's end and can refresh or navigate away.

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:

Project meets all the technical requirements laid out for the project and goes beyond, delivering a stellar MVP. Way to use React, React Router, the Youtube package, and Hooks to create a technically impressive project.
Great use of Git for version control. I see a great history of commits as well as use of git branches for development! Love seeing those pull requests merged onto master!!
Your application shows deep understanding of React and skill with programming in JavaScript -- from all the different ways you parsed and handled data, to managing state and props, to unidirectional data flow, to conditional rendering, you've truly utilized the best that React has to offer to create a technically impressive and feature-rich application.
Great use of local storage, and I also love that you set up the user login/signup page for when you are able to build an authentication backend!

Areas for Growth:

Your GitHub repo shows a good history of commits, but (and this is relatively minor) work on both the consistency of your commit message formatting as well as their content. Commit messages should be concise yet descriptive , and consistently structured -- 'some updates' is not ideal, though we've all had messages like that at one point or another. 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.

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 simply one of the best UIs I've seen in a student project-- ever!!! It is polished, professional, modern, and frankly looks like a real movie website! 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! There are so many small touches that make the application feel very carefully designed and styled, and it's truly a joy to use!
Excellent job implementing media queries for page responsiveness! Your application looks great and is fully functional on all the screen sizes I tested. I'm also impressed that you wrote this from scratch too!
I love the logo, the sophisticated color scheme that lets the movie posters shine, and the user experience is fantastic as well.

Areas for Growth

I would add your own custom favicon to your application as well to complete the UI and make it feel like a full-fledged product!

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 mostly without any errors or bugs observed.
Project presents a complete application, where every feature is fully implemented!
Features work as expected, and are well-designed and well-implemented.

Areas for Growth:

A couple of errors do log to the console that I would look into ... it looks like your index.html is still trying to load logo192.png, which is one of the default logos that come with a bootstrapped React app. Be sure to delete that reference in the <head> of your HTML file.
One small bug I noticed -- the local storage feature, which is amazing, successfully adds movies to the watchlist, but when I try to clear the watchlist, the app spins and does not redirect successfully. The watchlist is cleared though, which I noticed after navigating away and navigating back to the page. How might you fix this?

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! In particular, I love that you showed off your involved planning process -- those wireframes, feature plans and user stories are very well-thought-out. I also love the code sample that you shared. Just add a Contribution Guidelines section to your README to complete it!

Areas for Growth:

Add the deployed URL and a short description to the top of your repo!
I would change the name of the images directory to planning, as it includes your planning documents!
In the About section of your README, I would say it's a Single Page Application (SPA), which is what React is ... we simulate multiple pages and navigation by using React Router.
Please delete any extraneous files that come with the bootstrapped React app, such as the README inside searchapp, and any other unused files/stylesheets.

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

TK, you did such an outstanding job with this project. I can tell how hard you worked on it by how feature-rich, well-designed, and thoughtfully-programmed it is, and I'm so impressed how much you were able to get done in one short week! This project truly synthesizes everything we learned in the first two units of our course, and does a brilliant job showcasing your coding and design skills. I've included a few minor areas of growth above, but this project is incredible and will look amazing on your portfolio. Congratulations on passing project 2 with flying colors, and looking forward to seeing your continued success and growth in our course!

Hi Esin. Thank you so much for your very detailed feedback! I've read through them and will apply changes soon.

On Wed, May 13, 2020 at 8:28 AM Esin Saribudak notifications@github.com wrote:

Project 2 Feedback Code Quality - Excelling

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.

Comments throughout your files make it easier for people unfamiliar with your codebase to understand what the code is doing!

Way to use React Hooks for lightweight functional components throughout! Your components are very concise and easy to follow as a result.

Areas for Growth:

Be sure to delete (rather than just comment out) any console.logs left in your code!

Deployed code should not have console.errors either -- replace it eventually with error handling that displays user-facing error messages, so that users know when something went wrong on the app's end and can refresh or navigate away.

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:

Project meets all the technical requirements laid out for the project and goes beyond, delivering a stellar MVP. Way to use React, React Router, the Youtube package, and Hooks to create a technically impressive project.

Great use of Git for version control. I see a great history of commits as well as use of git branches for development! Love seeing those pull requests merged onto master!!

Your application shows deep understanding of React and skill with programming in JavaScript -- from all the different ways you parsed and handled data, to managing state and props, to unidirectional data flow, to conditional rendering, you've truly utilized the best that React has to offer to create a technically impressive and feature-rich application.

Great use of local storage, and I also love that you set up the user login/signup page for when you are able to build an authentication backend!

Areas for Growth:

Your GitHub repo shows a good history of commits, but (and this is relatively minor) work on both the consistency of your commit message formatting as well as their content. Commit messages should be concise yet descriptive , and consistently structured -- 'some updates' is not ideal, though we've all had messages like that at one point or another. 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.

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 simply one of the best UIs I've seen in a student project-- ever!!! It is polished, professional, modern, and frankly looks like a real movie website! 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! There are so many small touches that make the application feel very carefully designed and styled, and it's truly a joy to use!

Excellent job implementing media queries for page responsiveness! Your application looks great and is fully functional on all the screen sizes I tested. I'm also impressed that you wrote this from scratch too!

I love the logo, the sophisticated color scheme that lets the movie posters shine, and the user experience is fantastic as well.

Areas for Growth

I would add your own custom favicon to your application as well to complete the UI and make it feel like a full-fledged product!

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 mostly without any errors or bugs observed.

Project presents a complete application, where every feature is fully implemented!

Features work as expected, and are well-designed and well-implemented.

Areas for Growth:

A couple of errors do log to the console that I would look into ... it looks like your index.html is still trying to load logo192.png, which is one of the default logos that come with a bootstrapped React app. Be sure to delete that reference in the of your HTML file.

One small bug I noticed -- the local storage feature, which is amazing, successfully adds movies to the watchlist, but when I try to clear the watchlist, the app spins and does not redirect successfully. The watchlist is cleared though, which I noticed after navigating away and navigating back to the page. How might you fix this?

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! In particular, I love that you showed off your involved planning process -- those wireframes, feature plans and user stories are very well-thought-out. I also love the code sample that you shared. Just add a Contribution Guidelines section to your README to complete it!

Areas for Growth:

Add https://i.imgur.com/QQ7RsfR.gif the deployed URL and a short description to the top of your repo!

I would change the name of the images directory to planning, as it includes your planning documents!

In the About section of your README, I would say it's a Single Page Application (SPA), which is what React is ... we simulate multiple pages and navigation by using React Router.

Please delete any extraneous files that come with the bootstrapped React app, such as the README inside searchapp, and any other unused files/stylesheets.

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

TK, you did such an outstanding job with this project. I can tell how hard you worked on it by how feature-rich, well-designed, and thoughtfully-programmed it is, and I'm so impressed how much you were able to get done in one short week! This project truly synthesizes everything we learned in the first two units of our course, and does a brilliant job showcasing your coding and design skills. I've included a few minor areas of growth above, but this project is incredible and will look amazing on your portfolio. Congratulations on passing project 2 with flying colors, and looking forward to seeing your continued success and growth 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/ttidesign/GA-Project-2/issues/3, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOXHZGR7FSC2QZWOQ7AYAUDRRK4BFANCNFSM4M73JVYA .

ttidesign / GA-Project-2