> For the complete documentation index, see [llms.txt](https://shopify-1.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shopify-1.gitbook.io/react/exercises/1.-productlist-light.md).

# 1. ProductList light

In this first exercise, your goal is to create a ligter version of the admin product list page which will:

* list the products of a Shopify store
* allow you to filter by product title

You will apply what you've learnt in these courses:

* [Stateless components](https://github.com/shopify/react/tree/2fb346599c5d7e9d0fed4b8351ed9d6c6cd8300e/Exercises/LightProductList/Introduction/2.%20Components/2.1%20-%20Stateless%20Components/README.md)
* [Stateful components](https://github.com/shopify/react/tree/2fb346599c5d7e9d0fed4b8351ed9d6c6cd8300e/Exercises/LightProductList/Introduction/2.%20Components/2.2%20-%20Stateful%20Components/README.md)
* [Styling components](https://github.com/shopify/react/tree/2fb346599c5d7e9d0fed4b8351ed9d6c6cd8300e/Exercises/LightProductList/Introduction/2.%20Components/2.3%20-%20Styling%20Components/README.md)

**Here is the end result of the exercise:**

![Final product](https://366599030-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEGRfOxS6iFE8GUqpjc%2F-LEGRjwPuGTTScW_73Bs%2F-LEGRrvyTVCmOAEVt6-q%2Fintroduction.gif?generation=1528227398491953\&alt=media)

You think the exercise is too hard and think we should add steps to this exercise? Send us a message on Slack: #rnd-education-react