App is adaptive for all devices.
- Folders
pages
,components
,images
,api
,const
,video
andstore
were created for better structuring my app Scss
files were added for each component
- Routing was implemented at App component
- Was adde
<header>
with links to all the pages- The
Logo
and theNav
are aligned left - The
Favorites
and theCart
are aligned right
- The
- Was created underline current page in
Header
- Was added
<footer>
- Was added the link to the Github repo
- Was implemented
Back to top
button
HomePage
is available at/
HomePage
containsHeader
,Main
andFooter
Main
includesTopBanners
,HotPrices
,Categories
,NewModels
- Products are fetched from json file 'products.json'
- Each product has a
type
:oil
,gel
orscrub
price
is given beforediscount
discount
is give in percents%
id
is required to fetch product details
- Each product has a
Hot prices
block was implemented like 'carousel' of product`s cards- All the filtering and sorting are doing on client side
Card
component is used everywhere where it is needs- Was added ability to use
<
and>
buttons to scroll products.
- Block
NewModels
andMayLike
also are using 'carousel' such as inHot prices
block - Was added
Categories
block with the links to/oils
,/gels
and/scrubs
.
- Was created
OilsPage
available at/oils
with a<h1>
titleOil
- Was created
ProductsList
which can showing all theoils
- Was added ability to sort the products by
name
(Alphabetically
,value="name"
) andprice
(Cheapest
,value="price"
) using<select>
element. Pagination
was created using for it's components container andItems on page
using<select>
element with4
,8
,16
andall
options.- all the pagination elements are hidden if there are a few items (less than 1 smallest page size)
- Was created
GelPage
page with<h1>
titleGel
available at/gels
working the same way asOilsPage
- Was created
ScrubssPage
with<h1>
titleScrub
page available at/scrubs
working the same way asOilsPage
- Was implemented
NotFound
component displayed if there are no products available containing text<Category name> not found
- Was implemented
ProductDetailsPage
was created available at/product/:productId
ProductCard
has link to the details page
- Was added ability to choose a picture
- Implemented
You may also like
block with products chosen randomly
- Was implemented
CartPage
storing an array ofCartItems
- Each item has
id
,quantity
and aproduct
- Each item has
Add to cart
button inProductCart
is adding a product to theCart
- If the product is already in the
Cart
the button showsAdded to cart
- Was added ability to remove items from the
Cart
with ax
button. - Was added ability to show message
Your cart is empty
when there are no products in theCart
- Was added ability to change the quantity in the
Cart
with buttons containing symbols-
and+
around the quantity. - Total amount and quantity are calculating automatically.
Checkout
button is showing the messageWe are sorry, but this feature is not implemented yet
after clicking.- The total quantity is showing near the
Cart
icon in the header.
FavoritesPage
was created and it has ability to show theProductsList
with all the favorite products- Was added ability to add/remove favorite products by pressing a hart.
- The favorites count is showing near the
Favorites
icon in the header
- VS Code
- ESlint
- Stylelint
- redux
- react-router-dom
- typescript
- react-dom
- JS
- HTML
- SASS
- redux-toolkit
- material ui
- Node v14.18.2 and higher
- NPM v6.14.12 and higher
- Fork and clone this repository
- Run
npm install
in your terminal - Run
npm start