https://github.com/valchanoficial/ecommercefashionista
:dress: Codenation - Fashionista E-commerce
https://github.com/valchanoficial/ecommercefashionista
bem-css codenation mobile-first reactjs redux spa
Last synced: 3 months ago
JSON representation
:dress: Codenation - Fashionista E-commerce
- Host: GitHub
- URL: https://github.com/valchanoficial/ecommercefashionista
- Owner: ValchanOficial
- Created: 2020-04-29T23:14:18.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-25T15:21:14.000Z (almost 5 years ago)
- Last Synced: 2025-01-04T15:38:01.399Z (5 months ago)
- Topics: bem-css, codenation, mobile-first, reactjs, redux, spa
- Language: JavaScript
- Homepage: https://valchan-ecommerce-fashionista.netlify.app
- Size: 66.4 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Codenation - Fashionista E-commerce
[](https://app.netlify.com/sites/valchan-ecommerce-fashionista/deploys)
## Start
```js
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):
```json
{
"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](https://undraw.co/illustrations)