Full Stack JavaScript Developer

Project: Components, Props, State, and useEffect

Build a small product catalog app that fetches a list of products and displays them with custom styling. This project will practice the following concepts:

  • useState to store fetched product data
  • useEffect to load product data when the component first renders
  • component composition and props to render product details in child components
  • rendering a list with map and key
  • writing custom CSS to make the UI look polished

Project requirements

  1. Create a parent component that fetches product data from an open API when it first renders.
  2. Store the fetched product list in state using useState.
  3. Render a child component for each product, passing data through props.
  4. Show a loading indicator while the product data is being fetched.
  5. Add custom CSS so the product cards look visually appealing.

Data source

Use this public product API endpoint:

  • https://dummyjson.com/products

This endpoint returns a JSON object with a products array.

What to show for each product card

Each product card should include:

  • id
  • title
  • price
  • description
  • category
  • thumbnail

Bonus idea

If you want to make the project feel more like a real store, add a simple cart button and a cart count. If you want to try a POST request, you can also explore https://dummyjson.com/products/add for creating a new product.