Projeto: Wearism (Fashionista E-commerce)

E-commerce de moda feminina. @codenation

Demo

Sobre o projeto ⭐️

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.

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.

Principais funcionalidades: 📌

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

Requisitos obrigatórios: 📌

• Para cada item do catálogo de produtos as seguintes informações devem estar na página: :heavy_check_mark:

• 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. :heavy_check_mark:

• Deve ser possível visualizar os itens adicionados no carrinho de compras, exibindo imagem, nome, preço e quantidade. :warning:

Requisitos opcionais: 😉

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

Wireframe: 😻

Os layouts abaixo servem de referência visual das funcionalidades, sintam-se livres para segui-las ou implementá-las com base em outras referências, desde que atenda às regras e aos requisitos obrigatórios.

Desktop & mobile

Para ter acesso, basta clicar aqui.

Cores e tipografia:

Veja aqui as principais cores da aplicação.

Fluxograma do sistema:

Para ver o fluxo em detalhes, clique aqui

Resultado: :heavy_check_mark:

O projeto foi realizado seguindo as especificações solicitadas a cima.

Obs.: Algumas especificações precisam ser melhores desenvolvidas.

Como instalar e rodar ? 🚀

Pré-requisitos:

1. Ter o Node js instalado e junto dele a NPM;

2. Clonar o repositório em sua máquina, usando comando abaixo em seu terminal:

  git clone https://github.com/Alessandra-Nastassja/PROJECT-WEARISM.git

3. Agora basta instalar as dependências do seu projeto, digitando no terminal:

  npm install

4. E por ultimo dar o comando para rodar seu projeto:

  npm start

Obs: O projeto irá abrir em seu navegador, rodando no http://localhost:3000

Tecnologias usadas: 🖥️

Front-end

• React;
• React Redux
• React Router;
• React Hooks;

• Formik;

  ---

  Referências: 📑

  • Como funciona o Json server
  • Fazendo queries com Json server