- If you work alone follow the React task guideline
- If you work in a team follow the Work in a team guideline
- Install Prettier Extention and use this VSCode settings to enable format on save. Implement Products catalog following this design.
Use products
and product details
tо fetch data (use actual productId
as a last part of the URL before .json
).
If you want to change any API data for the phones you can update the files in the /public/api
folder, and use you project link as a BASE_API_URL
.
Store the Cart in the localStorage
- Create
pages
,components
andhelpers
folders to structure your app - Use
scss
files per component - Use component names as BEM block names with all the other BEM rules applied
- Add
<header>
with links to all the pages- The
Logo
and theNav
are aligned left - The
Favorites
and theCart
are aligned right
- The
- Use
NavLink
to highlight current page inHeader
- Add
<footer>
- Footer content is limited to the same width as the page content
- Add the link to the Github repo
- (*) Implement
Back to top
button
- Create
HomePage
available at/
with just a titleHome page
- Fetch products from API
- Each product has a
type
:phone
,tablet
oraccessory
price
is given beforediscount
discount
is give in percents%
age
is used to sort byNewest
id
is required to fetch product details
- Each product has a
- Create
ProductsSlider
component and use it inHot prices
block- Create
getHotPriceProducts
method fetching products with discount from API sorted by absolute discount value (not percentage given in API) - For now do all the filtering and sorting on client side
- Create
ProductCard
component to use it everywhere and adddata-cy="cardsContainer"
attribute to the container of these elements - Add ability to use
<
and>
buttons to scroll products.
- Create
- Add
Brand new
block usingProductsSlider
- Create
getBrandNewProducts
method fetching products without a discount from the API starting from the most expensive
- Create
- Add
Shop by category
block with the links to/phones
,/tablets
and/accessories
. Adddata-cy="categoryLinksContainer"
to links container. - Replace the
Home page
title with slider and use for picture element of this slider- User can change pictures with buttons infinitely
- (*) Swipe pictures every 5 seconds
- Create
PhonesPage
available at/phones
with a<h1>
titleMobile phones
- Create
getPhones
API call fetching the products with thetype
:phone
- Create
- Add
ProductsList
withdata-cy="productList"
attribute showing all thephones
- Implement a
Loader
to show it while waiting for the data from server - Add ability to sort the products by
age
(Newest
,value="age"
),name
(Alphabetically
,value="name"
) andprice
(Cheapest
,value="price"
) using<select>
element.- (*) save sort order in the URL
?sort=age
and apply it after the page reload
- (*) save sort order in the URL
- Add
Pagination
usingdata-cy="pagination"
for it's components container andItems on page
using<select>
element with4
,8
,16
andall
options. Add attributesdata-cy="paginationLeft"
anddata-cy="paginationRight"
to pagination buttons- It should limit the products you show to the user
- Read the description for more detailed explanation
- Hide all the pagination elements if there are a few items (less than 1 smallest page size)
- (*) Save
?page=2&perPage=8
in the URL and apply them after the page reload
- Create
TabletsPage
page with<h1>
titleTablets
available at/tablets
working the same way asPhonesPage
- Create
getTablets
method fetching the products withtype
:tablet
- Create
- Create
AccessoriesPage
with<h1>
titleAccessories
page available at/accessories
working the same way asPhonesPage
- Create
getAccessories
method fetching the products withtype
:accessory
- Implement
NoResults
component displayed if there are no products available containing text<Category name> not found
- Create
- Create
ProductDetailsPage
available at/product/:productId
ProductCard
should be a link to the details page
- Fetch phone details from API taking the
phoneId
from the URL- Use
Loader
when fetching the details
- Use
- Show the details on the page
- Hide
Available colors
andSelect capacity
for now About
section withdata-cy="productDescription"
should contain just a description (without any subheaders)- Choose
Tech specs
you want to show
- Hide
- Add ability to choose a picture
- Implement
You may also like
block with products chosen randomly- create
getSuggestedProducts
method fetching the suggested products
- create
- Add
Back
button withdata-cy="backButton"
attribute working the same way as a BrowserBack
button - Add
Breadcrumbs
at the top withdata-cy="breadCrumbs"
attribute in elements container- The last part is a plain text all the other ones are links
- Implement
CartPage
storing an array ofCartItems
- Each item should have
id
,quantity
and aproduct
- Each item should have
Add to cart
button inProductCart
should add a product to theCart
- If the product is already in the
Cart
the button should sayAdded to cart
- Implement
Cart
helper storing the items in memory and having all the required methods. Later on it will interact with the API - Add ability to remove items from the
Cart
with ax
button. Adddata-cy="cartDeleteButton"
attribute to the<button>
element. - Add message
Your cart is empty
when there are no products in theCart
- Add ability to change the quantity in the
Cart
with buttons containing symbols-
and+
around the quantity. - Total amount and quantity should be calculated automatically. The element showing the quantity should have
data-cy="productQauntity"
attribute. Checkout
button should show the messageWe are sorry, but this feature is not implemented yet
after clicking.- (*) Show the total quantity near the
Cart
icon in the header. - (*) Save the
Cart
to thelocalSotrage
on each change and read it on page load.
- Create
FavoritesPage
it should show theProductsList
with all the favorite products - Add ability to add/remove favorite products by pressing a hart and add
data-cy="addToFavorite"
attribute to this<button>
element. - (*) Show the favorites count near the
Favorites
icon in the header
- Add a
Search
component with an input into the<header>
to filter products - It should be shown only at
/phones
,/tablets
,/accessories
and/favorites
with an appropriate text - The
x
sign withdata-cy="searchDelete"
attribute appears when the query is not empty and clears the search - It should work with pagination and sorting
- (*) Add
debounce
to the search field - (*) Save
Search
params in the URL usingqueryParams
(?query=moto
) and apply them on page load - (*) Implement
NoSearchResults
component and show it when there are no products matching the query
- Add
NotFoundPage
containing textPage not found
for all the other URLs with the link toHomePage
- Implement
Phone was not found
state for thePhoneDetailsPage
if there is no phone with a givenphoneId
on the server