search

ArinolaMordi / site-week2-project2-student-store-starter

CURRENT - 2023 SITE Starter Code for Student Store Assignment
0 stars 0 forks source link

Feedback Week 3: Student Store #2

Open nokolo99 opened 1 year ago

nokolo99 commented 1 year ago

Naming

Naming Style

Good working on keeping naming style consistent. I only saw one instance of where you did not.

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/About%20Us/About%20Us.css#L11-L25

See how .About and .AboutLetter have the first letter capitalized while .aboutBody does not. Keep on working towards getting the naming consistent 100% across the board.

Naming Choice

Overall you have shown strong choice in variable names. However in the following code:

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/PlusMinusButton/PlusMinusButton.jsx#L11-L18

you have functions handleClick and handleDecrement. Renaming handleClick to handleIncrement makes it more clear what that specific function does and is complementary to the name handleDecrement.

Styling

Your style is also something that has improved since week 1. Two small little things that I just want you to be aware of:

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/App/App.css#L1-L17

In this snippet of code, the starting brackets { have a lot of space between them and the name of the class. I suspect you misunderstood what I said when I mentioned that ending brackets should be aligned. This feedback was specific to the ending tags of html files. Instead, in this case you would want the start bracket to directly follow the class name like you did in several other instance:

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/About%20Us/About%20Us.css#L1-L9

Finally, watch out for unintentional indents. You can see in

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/Footer/Footer.css#L1-L14

everything except .footer is indented by one tab.

Complexity

Complex Functions

You demonstrated a ton of technical complexity this week! Keep this up.

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/App/App.jsx#L23-L49

In the example code, you have two complex functions handleAddItemToCart and handleRemoveItemFromCart that required you to add and remove items for your cart. This involved checking if the item was already in the cart beforehand, actually performing the desired action, and ensuring the shopping cart is updated with the correct values. These are the type of complex functions that you will utilizing a lot more of in your own capstone project.

Complex React Code

This week I saw an increased use of complex react syntax like in the following. This makes the code easier to read and understand. It also helps you become a more proficient programmer! Keep looking for ways to incorporate more complex react functions!

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/SideBar/SideBar.jsx#L53-L66

Repeating Code

Checkout.jsx and ShoppingCart.jsx utilized a lot of the same code

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/Checkout/Checkout.jsx#L9-L28

https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/ShoppingCart/ShoppingCart.jsx#L10-L29

One thing we encourage in software engineering is minimizing the use of repeat code. Since these lines of code are exactly identical, it is encouraged to find a way to reduce this repeat code. One way of doing this is by created a shared Utils file that houses this shared code that can be used in both locations.

Nits

What is a Nit? The meta definition is:

A minor complaint, of little importance. Often in the context of a code review. e.g. a typo in a comment, or a little extra whitespace.

Some minor nits I have for you:

  1. In Checkout.jsx you had an unused variable cost. Try not to include unused variables in your final code https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/Checkout/Checkout.jsx#L21-L24
  2. Reminder to not include empty files in your final code. Checkout.css is an empty file. However, good job of not creating another necessary css file to complement PlusMinusButton.jsx since it was not necessary
  3. Reminder not to have repeating class names in your css file https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/Contact%20Us/Contact%20Us.css#L5-L13
  4. Reminder to not include commented out lines of code in your final code https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/ProductGrid/ProductGrid.jsx#L8 https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/SideBar/SideBar.css#L1-L10 https://github.com/ArinolaMordi/site-week2-project2-student-store-starter/blob/45841bc37771d26c90a7dd036ec4db0514859c8f/student-store-ui/src/components/Home/Home.css#L1-L11
jose-esquivel commented 1 year ago

Great work so far!

However, I agree with Nneka's feedback.

In addition, I would like to see these suggestions in your next project:

Commits

  1. Making smaller, more frequent commits: this can make it easier to reviewers understand the changes you made and help make the feedback you receive better.
  2. Make the commit messages more descriptive: this way we can browse through your commit history and understand at a glance the changes you made. You can use this guide as a reference: https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/
    • For example: instead of using the message "made change to ShoppingCart.js", you use something more descriptive like: "implement remove product function in ShoppingCart.js"

Code format

Consider installing a code formatting extension like prettier and use it to format your code before committing. These tools can make it easier for you to ensure that your code is properly formatted.

Additionally, you can read on javascript style guidelines to learn about the specifics.