/instabuy-ps

Ecommerce para a instabuy

Primary LanguageTypeScript

Instabuy

Processo seletivo Desenvolvedor Front-End Instabuy

Ver aplicação

Requisitos

  • Home screen

    Essa é a tela que será montada ao acessar a raiz do projeto.

    • mostrar os banners
    • mostrar os produtos
      • Cada célula de produto deverá conter: imagem, nome e preço.

  • Product screen

    Essa é a tela que será montada ao clicar em algum produto.

    • mostrar as informações do produto
      • nome
      • preço
      • imagens
      • descricao
      • botão de adicionar ao carrinho.

Extras

  • Busca por categoria
  • Busca por nome, usando o input do header

Rodando o projeto local

Para rodar o projeto, clone o este repositório

  git clone git@github.com:yurigarrido/instabuy-ps.git

instale as dependências

  npm install

incie o servidor local

  npm run dev

Demonstração





  • Home image

    image





  • Product Screen image

    image





  • Search by text image

    image





  • Search by category image

    image





  • Cart image

    image

Funcionalidades

  • listagem de produtos

  • listagem de produtos por categoria

  • listagem de produtos encontrados com base no texto do input

  • carrinho

    • adiconar e remover do carrinho
    • valor total dos items no carrinho
    • alterar a quantidade de items no carrinho direto pelo carrinho

  • responsividade

Ferrmantas utilizadas

  • git
  • github
  • vite
  • react
  • stitches ( css in js )
  • keen-slider ( sliders and carrousel)
  • react hot toast ( toasts )
  • react query
  • axios
  • phosphor-react ( icons )
  • radix
  • typescript
  • vercel ( deploy )