Codenation - Fashionista E-commerce

Start

    yarn install
    yarn start

Cenário

Segundo o levantamento, da Webshoppers (Ebit / Nielsen), os e-commerces brasileiros faturaram cerca de R$ 53,2 bilhões em 2018. O segmento “Moda e Acessórios” representa 5,6% do faturamento no varejo online, ocupando a segunda posição entre as categorias de produtos com mais pedidos, perdendo apenas para o segmento de eletroeletrônicos.

Oferecer a melhor experiência aos usuários que interagem com os produtos no desktop, e principalmente em dispositivos móveis, é fundamental para se manter vivo e competitivo nesse segmento.

Objetivo

Como um profissional front-end, você será responsável por desenvolver as principais funcionalidades de um e-commerce de moda feminina, o Fashionista, garantindo a melhor experiência possível para os usuários interagirem com os produtos.

Regras

Deve implementar as funcionalidades apresentadas nos wireframes / layouts.
Deve ser mobile first, possuindo uma experiência satisfatória tanto em mobile quanto em desktop.
Deve consumir a API do catálogo de produtos.
O estado global da aplicação deverá ser gerenciado com Redux
Deve ser um SPA (Single Page Application).
Todos os produtos da API devem ser exibidos.
Utilize BEM CSS para escrever os estilos.
Deve-se fazer deploy do projeto, servindo-o no Netlify.
Não utilize frameworks CSS como Bootstrap, Foundation e afins.

Requisitos obrigatórios

Para cada item do catálogo de produtos as seguintes informações devem estar na página:
- Imagem
- Nome
- Preço
- Status “Em promoção”
- Preço promocional (se disponível)
- Tamanhos disponíveis
- Selo “Promoção”
Deve ser possível adicionar itens por tamanho no carrinho de compras.
Deve ser possível visualizar os itens adicionados no carrinho de compras, exibindo imagem, nome, preço e quantidade.
Deve ser possível remover itens do carrinho de compras.

Requisitos opcionais

O carrinho de compras deve persistir entre reloads de página.
Alguns produtos não tem todos os tamanhos disponíveis, mostre apenas os tamanhos disponíveis em estoque.
Implemente a funcionalidade de busca em tempo real.

Propriedades de um produto (referência):

{
    "name": "Nome do produto",
    "style": "Código de categoria",
    "code_color": "Código de categoria + código de cor",
    "color_slug": "slug da cor do produto",
    "color": "Nome da cor do produto",
    "on_sale": "booleano - Se o produto está em promoção",
    "regular_price": "preço sem promoção",
    "actual_price": "preço com promoção",
    "discount_percentage": "% de desconto da promoção",
    "installments": "quantidade de parcelas",
    "sizes": [
        {
            "available": "booleano - indica se o tamanho está disponível",
            "size": "nome do tamanho",
            "sku": "código do produto + código do tamanho (para adicionar no carrinho)"
        }
    ]
}

Fonte SVG

unDraw

ValchanOficial/EcommerceFashionista