Jay Khatri

Latest comments

• 

  Carlos Torres•60

  @devtorrescarlosSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  I liked the way I approached the challenge using customs hooks and Tailwind CSS, I plan to improve the performance and cleanliness of my code in upcoming projects.

  What challenges did you encounter, and how did you overcome them?

  The challenge I found most difficult was changing the interface to increment and decrement the quantities. Then, I thought about using conditionals to render the UI.

  What specific areas of your project would you like help with?

  I need to improve the performance of the application in general.

  

  Shopping Cart React and Tailwind

  #react#tailwind-css#vite

  1

  10
  

  Jay Khatri•4,270

  @khatri2002Posted 30 days ago

  Hi @devtorrescarlos!

  The developed solution looks good! Below are a few suggestions for improvement:

  ---

  1) "Add to Cart" Button Not Fully Clickable

  Currently, the button structure is as follows:

  <>
    <img src="/images/icon-add-to-cart.svg" alt="cart-icon" />
    <button className="..." onClick={...}>Add To Cart</button>
  </>
  

  Only the text Add To Cart is wrapped inside the <button>, making it clickable. The icon is outside the button, so clicking on it does nothing.

  Bad UX: Users expect the entire button (including the cart icon) to be clickable.

  ✅ Wrap Everything Inside <button>

  The entire button, including the icon and text, should be inside the <button> element:

  <button className="..." onClick={...}>
    <img src="/images/icon-add-to-cart.svg" alt="cart-icon" />
    Add To Cart
  </button>
  

  Now, clicking anywhere inside the button (text or icon) will trigger the event. This improves usability and user experience (UX).

  2) Use Different Images for Different Screen Sizes

  You're only rendering the desktop image for all screen sizes, even though separate images are provided for desktop, tablet, and mobile.

  Use <picture> for Responsive Images

  The <picture> element allows you to specify different images for different screen resolutions.

  <picture>
    <source srcSet="/images/item-mobile.jpg" media="(max-width: 640px)" />
    <source srcSet="/images/item-tablet.jpg" media="(max-width: 1024px)" />
    <img src="/images/item-desktop.jpg" alt="product-image" />
  </picture>
  

  How this works:

  • If the screen width is ≤ 640px, the mobile image loads.
  • If the screen width is ≤ 1024px, the tablet image loads.
  • Otherwise, the desktop image loads.

  Why use <picture>?

  • Optimizes performance by loading only the necessary image.
  • Ensures the right image is shown for different devices.

  ---

  Everything else looks great! Keep up the awesome work! 🚀

  Marked as helpful

  0
• 

  SURAJ KUMAR SANTRA•110

  @Batman-0001Submitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  i am proud of the fact that even if i am a beginner at react still i have build something like this project from scratch.

  What challenges did you encounter, and how did you overcome them?

  i faced challenges while making the modal but used react-modal for easy implementation.

  What specific areas of your project would you like help with?

  i can have some help in making the app responsive.

  

  Product Cart Project

  #accessibility#react#vite

  1

  20
  

  Jay Khatri•4,270

  @khatri2002Posted 30 days ago

  Hi @Batman-0001!

  The developed solution isn't deployed, and hence not visible at all. It looks like you've used GitHub Pages for deployment, but since your project is built with React, it won’t work as expected just by serving index.html.

  GitHub Pages Doesn't Handle React

  GitHub Pages only serves static files (index.html, CSS, JS), but React needs to handle routes and dynamic content after being built.

  Deploy to a Suitable Platform

  For React projects, use platforms like:

  • Netlify → https://www.netlify.com/
  • Vercel → https://vercel.com/

  ---

  Hope that helps! Let me know if you need any additional help! Keep up the great work! 🚀

  1
• 

  Luis•270

  @luisv79Submitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  In this project, I was able to apply concepts such as the use of reusable components, Props for passing information, States with useState, Effects with useEffect, Events in React, and Bootstrap for the design.

  What challenges did you encounter, and how did you overcome them?

  The correct use of React properties gave me a lot of problems with connecting the components, but with persistence and searching the documentation I was able to resolve it.

  What specific areas of your project would you like help with?

  Always good advice and guidance to improve and learn is always welcome.

  

  product list with cart react javascript css html

  #react

  2

  20
  

  Jay Khatri•4,270

  @khatri2002Posted 30 days ago

  Hi @luisv79!

  The developed solution looks great! However, it's very clear that the images are not getting loaded.

  Issue: Incorrect Image Path in data.json

  You're using relative paths like:

  {
    "image": "./src/assets/images/image-waffle-thumbnail.jpg"
  }
  

  This might work in the development environment, but it will break in production because of how React handles static assets when building the application.

  Solution: Move Images to the public Folder

  If you want to keep the images accessible via direct URLs, you should move them to the public folder.

  1. Move the images to the public folder:

  /public
      /images
          image-waffle-thumbnail.jpg
  

  2. Update data.json with the correct URL:

  {
    "image": "/images/image-waffle-thumbnail.jpg"
  }
  

  Why This Works

  • React does not process the public folder during build, meaning files stay available as-is.
  • Files in public are directly accessible via / paths like:

    https://your-app.com/images/image-waffle-thumbnail.jpg
    

  ---

  Hope that helps! Let me know if you need any additional help! Keep up the great work! 🚀

  0
• 

  P

  Masseh•240

  @Masseh2025Submitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  The thing I'm most proud of is that I succeeded in finally completing this project after a week. One thing I would do differently would be to start off small and test things relating to the project instead of starting off big then getting confused when somethings not working.

  What challenges did you encounter, and how did you overcome them?

  I overcame a filtering error. I overcame it by testing out differn't solutions and debugging it.

  What specific areas of your project would you like help with?

  Any feedback is helpful even if it's small and does not matter as much.

  

  Product List With Cart

  #react#typescript#vite#tailwind-css

  2

  20
  

  Jay Khatri•4,270

  @khatri2002Posted 30 days ago

  Hi @Masseh2025!

  The developed solution looks great! The responsiveness is handled very well! Great job on that!

  Here are a few suggestions for improvement:

  ---

  1) Avoid Code Repetition in DesertItem.tsx

  Currently, the same structure is being repeated multiple times just to display different images for desktop, tablet, and mobile resolutions:

  Your Current Code

  <div className="md:hidden">
      <img src={image.mobile} />
      <div>
          <ShoppingCartButton ... />
      </div>
  </div>
  
  <div className="hidden lg:flex">
      <img src={image.tablet} />
      <div>
          <ShoppingCartButton ... />
      </div>
  </div>
  
  <div className="hidden lg:flex">
      <img src={image.desktop} />
      <div>
          <ShoppingCartButton ... />
      </div>
  </div>
  

  The layout is identical in all cases, only the image changes. Repeating the same structure multiple times is not a good practice and makes the code harder to maintain.

  Solution: Use the <picture> Element

  The <picture> element allows you to define different images for different screen resolutions without repeating the layout.

  Updated Code Using <picture>

  <picture>
      <source media="(min-width: 1024px)" srcSet={image.desktop} />
      <source media="(min-width: 768px)" srcSet={image.tablet} />
      <img src={image.mobile} alt="Dessert Item" />
  </picture>
  
  <div>
      <ShoppingCartButton ... />
  </div>
  

  Benefits of This Approach

  • Eliminates code repetition
  • More efficient and readable
  • Improves performance, as the browser only loads the required image instead of hiding elements with CSS.

  2) Use button Instead of div for "Add to Cart"

  Currently, you have used a div element for the "Add to Cart" button and attached a click event to it.

  • div is not an interactive element by default.
  • Keyboard users cannot focus on it, meaning they can't press Enter or Space to trigger the action.
  • Screen readers do not recognize it as a button, making it less accessible.

  Use a button Instead

  Alternative: Making div Work Like a Button

  If you still want to use a div, then you should:

  • Add role="button" to indicate it’s clickable.
  • Add tabIndex="0" so keyboard users can focus on it.
  • Handle onKeyDown for Enter and Space keys.

  This makes the div function like a button, but using a button is still the best practice.

  ---

  Great job so far! Keep up the amazing work! 🚀

  Marked as helpful

  1
• 

  Tushar Jetagi•240

  @TusharJetagiSubmitted about 1 month ago

  

  Random Advice Generator App

  1

  00
  

  Jay Khatri•4,270

  @khatri2002Posted about 1 month ago

  Hi @TusharJetagi!

  The developed solution looks great! However, I have a minor but important suggestion regarding semantic HTML.

  ---

  Using a div Instead of a button for Click Action

  Currently, you have wrapped the icon-dice image inside a div element and assigned the click event to it:

  This works functionally, but using a button element would be more appropriate.

  Why Should You Use a button Instead?

  1. Semantic HTML & Accessibility

     • The button element is designed for interactive actions (clicking, submitting, toggling).
     • Screen readers automatically recognize buttons and announce them properly to visually impaired users.
     • A div is not inherently interactive, so users relying on assistive technologies may struggle to navigate.

  2. Keyboard Accessibility

     • Buttons can be focused using the Tab key and triggered with the Enter or Space keys.
     • A div cannot be focused or triggered by default, making it less user-friendly for keyboard users.
     • If you stick with a div, you would have to manually handle keyboard events, which is unnecessary.

  3. Built-in Click Behavior

     • The button element has default click behavior, reducing the need for extra JavaScript.
     • div elements require additional event listeners and JavaScript to mimic the same behavior.

  ---

  Great work so far! Keep up the amazing work! 🚀

  Marked as helpful

  1
• 

  P

  Fawaz Iwalewa•330

  @fawaziwalewaSubmitted about 1 month ago

  

  Advice generator app NextJS

  #next#tailwind-css

  1

  30
  

  Jay Khatri•4,270

  @khatri2002Posted about 1 month ago

  Hi @fawaziwalewa!

  The developed solution looks great! However, I have a minor but important suggestion regarding error handling.

  Currently, the function doesn't handle errors when calling the API:

  const generateAdvice = async () => {
      const response = await fetch("https://api.adviceslip.com/advice");
      const data = await response.json();
      setAdvice({ id: data.slip.id, advice: data.slip.advice });
  }
  

  Potential Issues:

  • If the API request fails, the app will crash or show an empty screen.
  • If the server returns an error response (e.g., 500, 404, etc.), the app won’t notify the user.
  • The user may face an awkward pause, waiting for advice that never comes.

  The best practice is to:

  • Use try...catch to handle fetch errors.
  • Check response.ok to ensure the server returned a valid response.
  • Provide a user-friendly error message instead of leaving the app stuck.

  Updated Function with Error Handling

  const generateAdvice = async () => {
      try {
          const response = await fetch("https://api.adviceslip.com/advice");
          
          if (!response.ok) {
              throw new Error(`Error: ${response.status} - ${response.statusText}`);
          }
  
          const data = await response.json();
          setAdvice({ id: data.slip.id, advice: data.slip.advice });
      } catch (error) {
          console.error("Failed to fetch advice:", error);
          alert("Oops! Something went wrong. Please try again later.");
      }
  };
  

  ---

  Great work! Keep up the amazing work! 🚀

  1