Skip to content

Conversation

@AhmadSaadeddin1987
Copy link

@AhmadSaadeddin1987 AhmadSaadeddin1987 commented Jan 14, 2026

@AhmadSaadeddin1987 AhmadSaadeddin1987 force-pushed the Ahmad-w3-React-Assignment branch from 6886964 to 77bcd75 Compare January 14, 2026 23:39
@sycons sycons self-requested a review January 18, 2026 16:04
@sycons sycons self-assigned this Jan 18, 2026
Copy link

@sycons sycons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following were implemented:

  • Copy over the assets folder to your ecommerce/src folder ✅
  • A context that stores the id of all of the favourites of the user (not the whole object) ✅
  • Heart clicked on product list page and product details page updates the favourites array in the context ✅
  • Create a useFetch custom hook to reuse logis for loading and error states ✅
  • Deploy app somewhere (like netlify) and add link to PR ✅

Requested improvements:

  • Favourites page should list the products user has favourited
  • Navigation bar at the top should handle routing between / and /favourites
  • Fix linting error in FavouritesContext.jsx. I've added comment on the file. You can also run npm run lint to view the linting errors.

return (
<nav className="navbar">
<h1>Ecommerce</h1>
</nav>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no links here for the home and favourites pages here. The user needs a way to navigate to these pages.

Please have a look at how it works in the live version:
https://hyf-react-w3-example.netlify.app/


<Routes>
<Route path="/" element={<Products />} />
<Route path="/product/:id" element={<ProductDetail />} />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Route for favourites page is missing.

import { FavouritesContext } from "../context/FavouritesContext";
import heartSolid from "../assets/heart-solid.svg";

function Favourites() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component does not get rendered in the app at all.

@@ -0,0 +1,21 @@
import { createContext, useState } from "react";

export const FavouritesContext = createContext();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please fix this linting error "Fast refresh only works when a file only exports components. Move your React context(s) to a separate file."

More info: https://dev.to/md_belayethossain_56e787/fast-refresh-only-works-when-a-file-only-exports-components-why-does-this-problem-occur-and-how-1b4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants