Full Stack JavaScript Developer

Project: Components, Props, State, and useEffect, Custom Hooks, User Inputs

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

Add a product with a POST request

To make the project feel more like a real store, add a form that lets the user create a new product. When the form is submitted, send a POST request to https://dummyjson.com/products/add with the product details such as title, price, description, and category, then display the newly created product in the catalog.