Sneakers e-commerce React & Tailwind

Community feedback

• 

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 3 months ago

  Hi again Paul,

  Nice project! I really like the overall look of the site. It’s clear that a lot of effort went into it, and for your 5th, it's amazing.

  Here's some feedback and a few bugs I noticed:

  Checkout/Cart Updates: When clicking the + and - buttons in the cart, the cart updates without adding to the cart button. You might want to look into this.

  Main Image & Sub-Images Sync: There seems to be a slight delay with the main image lagging behind the sub-images. This could use some tweaking.

  Cart Visibility: In my opinion, the cart is a bit hard to see. Adding a stronger shadow might improve visibility, although this depends on the design intent because don't remember this project myself.

  Cart Auto-Close: Consider using useRef in JavaScript to make the cart close automatically. This would enhance usability.

  Animations: Adding an animation to the cart would make it look amazing. While not a necessity, it could enhance the user experience. I think the previous feedback was a little harsh.

  Responsiveness: The site is fully responsive, which is great! As an extra touch, you could add an animation to the burger menu because that would make it amazing.

  SCSS as a Bonus: As a total bonus, you might want to look into SCSS. I wish I had learned it at the same time as Tailwind CSS. It could be overkill, but it offers powerful features that might benefit your project. Tailwind CSS is faster, but SCSS, even if I'm new to it, is such an amazing tool.

  Overall, your project looks really good! I hope you find this feedback helpful.

  Best, Teodor

  Marked as helpful

  0

  ---

  

  paulDev•480

  @dev-paulLPosted 3 months ago

  @TedJenkler Hi again Ted,

  Thank you for the feedback, I'm not sure what you mean in the "Checkout/Cart Updates".

  The images glitch sometimes that's true, I had to improvise how the gallery works and I'm not sure that I did it the right way.

  You can access the original design folder, I left it in my repo. I agree with both of you about the animations and hover effects, but they are coming soon haha

  I will read more about useRef and SCSS 😉

  Thanks, Paul

  1

  

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 3 months ago

  @dev-paulL, I believe the image glitch might be challenging to fix, so I don't have a quick solution for it. Honestly, I haven't worked on this exact project (only on a larger version), so I'm not entirely sure about the specific requirements for this project, but I would assume it has something to do with useEffect and state.

  Regarding the checkout functionality, when you click the "+" button, an item is added to the cart, and clicking "-" subtracts an item. Typically, when I use Redux, I have a main state for the cart, and the "+" and "-" buttons use useState locally within the component. When you add an item to the cart, the local state triggers a dispatch to update the main cart state.

  ! --> In your case, you should consider using useContext to manage a more global cart state while using useState locally for the counter. This approach would be more realistic for an e-commerce application. It's a valuable skill to showcase, as it demonstrates to recruiters that you know how to build an e-commerce site. Once the economy improves, this will definitely help you land a job.

  Hope this clears up what I meant and makes my feedback more valuable.

  Best, Teodor

  0

  

  paulDev•480

  @dev-paulLPosted 3 months ago

  @TedJenkler

  I haven't delved into Redux yet (I’ve only read about it after your feedback on my older projects) mainly because the challenges I work on are relatively simple and small. However I’m sure it will be useful for my future projects.

  You mentioned "In your case, you should consider using useContext to manage a more global cart state while using useState locally for the counter." I was actually listening to something similar during lunch. They suggested switching to useReducer for more complex logic and sophisticated state management. Currently, I have a function in my context that retrieves the quantity of an item passed as a parameter. When I click the + and - buttons, it updates the item quantity in the cart. Is this what you were referring to? I'm not entirely sure if I understand, sorry about that.

  1

  

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 3 months ago

  @dev-paulL,

  Here’s an example:

  Counter: Manages item quantity and updates with "+" and "-" buttons.

  Cart Update: The cart updates only when the "Add to Cart" button is clicked, using the current counter value.

  // Context call()

  const incrementCounter = () => setCounter(counter + 1);

  const decrementCounter = () => setCounter(counter - 1);

  const addToCart = () => { // Add counter and product details to context state addItemToCart({ name: "Sample Item", price: 10.00, quantity: counter }); };

  return (

  <div> <button onClick={incrementCounter}>Increment</button> <button onClick={decrementCounter}>Decrement</button> <button onClick={addToCart}>Add to Cart</button> </div> );

  This ensures the cart only updates when you click "Add to Cart," not with each counter change. Hope this example was helpful.

  Marked as helpful

  1

  

  paulDev•480

  @dev-paulLPosted 3 months ago

  @TedJenkler Oh, okay, I understand now. I thought the user should be able to increment and decrement items in the cart, like in the 'desserts with cart' challenge, or add them. I remember being confused while developing, especially about having a button that was mostly there for aesthetics (because in the other challenge the "Add to cart" button disappeared).

  This example was really helpful, and everything you said before now makes sense. This is how I wanted to do it at the start of the development, before I got confused 😅.

  Thank you! Best, Paul

  I'm still not sure what they want us to do in the challenge since it just says "Add items to the cart"

  1

  

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 3 months ago

  Hi again @dev-paulL,

  Next time, trust your instincts and focus on best practices and your own ideas. This approach will demonstrate your problem-solving skills.

  I’m currently remaking an Entertainment web app because improving on a basic challenge is a great way to learn real-life problem solving. I find that working on such projects is particularly valuable for learning how to solve clients' non-explicit problems.

  0
• 

  BettoRaite•120

  @BettoRaitePosted 3 months ago

  Things I do not like. (Note, have never done the challenge):

  • Where is hover? No offense, but it looks very rigid.

  Fix Add transition to:

  1. Navbar links.
  2. Cart pop-up.
  3. Slide select.
  4. Profile pic.

  • Attribution is too close to the main content.

  Fix

  1. Add margin to the top of attribute or bottom of the main content.

  Overall looks good, padding is nice, gap between navbar links is nice, the structure of the page seems to be pleasing, good job!

  0

  ---

  

  paulDev•480

  @dev-paulLPosted 3 months ago

  @BettoRaite Hi 👋 You are right, this looks very rigid and this is because there are no animations and transitions yet! (As I wrote in the readme 'Hover effects and animations coming soon').

  I added the footer just before submitting and yeah it looks way too close especially on smaller devices, thank you for your feedback.

  I will fix this 😉

  0

  

  paulDev•480

  @dev-paulLPosted 3 months ago

  @BettoRaite I added animations and transitions, what do you think now?

  0

  

  BettoRaite•120

  @BettoRaitePosted 3 months ago

  @dev-paulL Looks much better. Well done! I love how you made the cart appear on mobile(insane), also tapping animation and the navbar links, it's just beautiful!

  Some issues I have encountered are:

  • width overflow, both mobile(320px) and pc.
  • attribution(prob you know.)

  1

  

  paulDev•480

  @dev-paulLPosted 3 months ago

  @BettoRaite Thanks for the feedback! 👋 I just fixed the issues, I think. I also added a hover effect on the arrows.

  Next up, I’m planning to improve the carousel (it's not a carousel atm) with better animations. I'm also looking to animate the cart items numbers going up/down when you change the quantity.

  0