pdybowski / shop Goto Github PK

add functionality for product button to add that product to a cart (there is a context for that)

we want display list of sports.

each sport card must include:

1. sport name
2. icon representing that sport (can be something - we dont have graphic designer ;P)
3. number of products for this sport

after clicking one of them page should navigate user to the page with selected sport items.
As far as I remember url for such a thing is something like this (but you have to check): /product?sportType={sportType}

route should look like:
/product/{_id}

_id will be taken from a product object

add that link to a carousel item

we should have reusable button component

we need button for 'submit', 'cancel', 'default'

first look:

after open menu:

NOT SURE IF NEEDED:
you will probably have to create a function that will get you a device type and see if its desktop or a mobile see:
https://dev.to/timhuang/a-simple-way-to-detect-if-browser-is-on-a-mobile-device-with-javascript-44j3
... or
you can try using only css for screen width

INFO:

1. submenus should only only display items below (not to the right)

• change styling arrows to point down not right
• items should also be displayed below its parent
• add some white 2px solid border between navigation items

see example:

page should have minHeight set to 100% of a screen

get some products and create a component for them (see image below).
put that component in mainpage

display only items that have more then 3 stars
please limit items displayed to 6
star is a string and max stars is 5

component should be named BestComponent and BestItems

Change filter to find() method in ProductPageContainer.tsx

user should see only 12 products per page

we should display something like this below products:

create a shared component that will be responsible for filtering products by selected sizes and price range

TIP:

1. talk to Tomek and ask what sizes were going to have.
2. props should include callback to filter products by what user selects (ask Piotr if you need any help with understaing how it should look like). this callback should have parameter as products. Your component should filter products by sizes/prices and run that callback passing filtered products there

see example:

create github pages for the ui purposes

typescript throws errors with some required and optional fields

we should display text that is too long shortened and with dots as suffix (search browser by 'ellipsis' IF NEEDED)

add tooltip for that component
tooltip should be full length text

props:

• width
• text

put it inside model/routes.ts file

create base register bage with all validations

validation should check:

• if element was touched
• if the value is valid
  FORM models:
  email
  firstName
  lastName
  password

button to register should be enabled

after clicking button and if operation was succeed we should store token inside localstorage and navigate back to main page

on the navigation there should apear two buttons/text what ever

• go to profile
• log out

User model that will come from api:
email
firstName
lastName
role: 'user' | 'admin'

create new reducer for user data

create component that will notify users about results of some actions. component should be displayed at the center bottom of a screen (not page)

props:

• type
• text

type of notifications:
'ERROR',
'SUCCESS',
'INFO'

example:

add carousel component
props:

• children (props.children) (required)
• number of elements displayed in active view (optional, hardcode value 1)
• interval (optional, hardcode 5000ms)

do what you want - just make it better

fix product containers (look at the button posistion). you can try to make all inside components have fixed height. this will prevent moving elements they way the do now

fix carousel - carousel should move from left to right and reverse depending on what user clicks. by default we should move it from left to right (now its based on opacity)

you can play with navigation styling (take inspiration of something from the internet)

spinner should be in the center. Make sure that we can also change spinner sizes. (we will use it inside buttons so its good to have the ability to set customized styles)

we dont need to hover images in BestItem

images alt text can be just 'picture'

add component that will display typing text.
you can pass string as text. If whole text is typed then you can stop typing ofc and the text should stay

add interval to 1.3s

display all products with their names, prices (we should also be able to remove these products from a list)
display sum of all products added to a cart
display button 'Go to payment'

fill frontend folder with things we had in previouse project

data:
isBestseller
name
description
price
sport: enum (tennis)
type: enum (shoe)
category: enum (man, woman, children)
image
size
brand
isCarousel (temporary)

should include:
price
name
some description
image

can look like this:

email
firstName
lastName
role: 'user' | 'admin'
token

url: 'products/:type'

1. mock some objects ti display (they will come from context later)
2. display products (use Item component)
3. add ability to filter products

create navigation panel with dropdowns and submenus
[elem1] [elem2]
[elem1.1] [elem1.1.1]
[elem1.1.2]
after hover we should display another elements in a tree.
after click we should redirect to custom link

Example:
elem1 (hovered) -> display elem1.x -> display1.1 (hovered) -> display elem1.1.x

each nav element should have possibility to hover and click (but these options are OPTIONAL)

add custom component to display product

props:

• image (optional)
• link (optional)
• title (required)
• description (optional)

(c) - icon from react-icons

text:
2022 ShoppingApp (c)

if its 2023 then display '2022 - 2023'

context model should be the same as we will have in api.

API will reponse with all products

another context should be responsible for adding products to shopping cart (can only include ids)

go though all pages and change buttons to our custom ones (see shared/button/Button.tsx)

mock 3 product objects and add url as link to an image (Iwona has some urls from eobuwie with images)

after hover we should see whats that,
we should be clickable (but just clickable, no more action)

we want display list of brands we have.

each brand card must include:

1. brand name
2. icon representing that brand (should be taken from api - probably need another thing in a model)
3. number of products for this brand

after clicking one of them page should navigate user to the page with selected brand items.
this url is not done so you have to create new filter for brand