↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

fashionista-ecommerce

eCommerce TypeScript

Fashionista E-commerce

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)"
			}
		]
}

Deploy

A recomendação é para que o deploy seja feito no netilify (gratuito) ou serviço similar – https://www.netlify.com/

Requisitos:

  • Node v13.8.0 – ou superior, instalado em seu computador.
  • Create React App


↑