- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
Implement Phone catalog as already implemented here but using React.
Static files are available in this repo.
Use Phones API to fetch a list of phones
and Phone Details API то fetch phone details.
(Use actual phoneId
as a last part of the URL before .json
)
- Implement
HomePage
andPhonesPage
available on/
and/phones
accordingly (only with headers for now) - Implement top navigation to switch between pages (active page should be highlighted)
- Add
NotFoundPage
for all the other URLs with the link toHomePage
- Fetch phones from API when
PhonesPage
is opened. - Implement a
Loader
to show it while waiting for the data from server - Implement
PhoneCatalog
component displaying a list of phones and show it on thePhonesPage
- Implement
PhoneDetailsPage
available on/phones/:phoneId
(links from catalog should open the details) - Fetch the details when
PhoneDetailsPage
is opened. UseLoader
- Implement
Phone was not found
state for thePhoneDetailsPage
if there is no phone with a givenphoneId
on the server - Implement
PhoneDetails
component displaying the detailed info about the phone and show it on thePhoneDetailsPage
- Implement ability to switch between images in
PhoneDetails
- Create a
Filter
component with an input to search and select to choose sort order and add it to thePhonesPage
- use filter params in
PhoneCatalog
- use filter params in
- Implement
Basket
component storing an array ofBasketItems
- Each item should have
id
,quantity
andphone
- a link to a phone fromphones
array
- Each item should have
- Implement
Add
button for each phone inPhoneCatalog
- when you add a phone again its quantity should increase in
Basket
- when you add a phone again its quantity should increase in
- Add ability to remove items from the
Basket
with ax
button - Add ability to change the quantity in the
Basket
with-
and+
buttons around the quantity
- Save
Filter
params in the URL usingqueryParams
(?query=moto&sort=age
)- when the page is loaded with
query
andsort
in the URL they should be applied to the filter andPhoneCatalog
- when the page is loaded with
- Add Pagination
- Top
Pagination
should allow to selectperPage
- Bottom
Pagination
should show the info (4-6 of 20) - Save
page
andperPage
in URL so it works together with theFilter
- Top
- Implement
Add
button forPhoneDetails
so you can add a phone to theBasket
from thePhoneDetailsPage
- Add animation to the
PhoneCatalog
- Save the Basket to the
localSotrage
and read it on page load