Sertton é um aplicativo e-commerce voltado para o nicho de peças de carroceria para veículos de transporte de grande porte.
Por ser um e-commerce, o usário pode procurar a peça desejada, adicionar ao carrinho e efetuar a compra por meio de um checkout externo ao aplicativo.
O objetivo da construção desse projeto é atender a demanda da empresa Sertton Industrial em potencializar suas vendas ao possuir uma maior presença online e facilitar a vida dos seus clientes que preferem utilizar um aplicativo mobile em vez de um site web.
O aplicativo consome via API Rest os dados da loja virtual da Sertton Industrial desenvolvida e mantida pela Yampi, uma plataforma de e-commerce completa.
Tela home
|
Tela de lista de produtos
|
Tela de detalhes de produto
|
Tela de carrinho
|
Tela de lista de pedidos
|
- Deve ser possível listar todos os produtos que possuem estoque maior que 0
- Cada produto deve exibir:
- nome
- imagem
- preço
- código sku
- marca
- descrição
- As exibição dos dados do produto deve se adaptar ao espaço que ele ocupa na tela
- Deve ser possível dar zoom na imagem do produto
- Deve ser possível selecionar um único SKU de um produto antes de adicioná-lo ao carrinho
- A seleção do SKU deve ser com base nas variações disponíveis para o produto. Ex: Se o usuário escolher Material: Inox e Tamanho: Médio, seleciona o SKU que atende essas características
- Caso o produto não tenha variação, o SKU é o próprio produto em si.
- Deve ser possível filtrar produtos por:
- nome
- categoria
- o filtro deve conter apenas uma categoria
- marca
- o filtro pode conter mais de uma marca
- Deve ser possível filtrar utilizando de forma simuntânea os filtros listado acima
- Deve ser possível pesquisar um produto pelo nome em mais de uma tela
- Deve ser possível ordenar produtos por ordem alfabética, seja o inverso (Z-A) ou não (A-Z)
- Deve ser possível calcular cusot de frete de um produto com base no CEP do usuário
- Deve ser possível o usuário calcular o frete antes de ir para o checkout
- Deve ser exibido para o usuário uma tabela de preço para cada transportadora especifica
- Deve ser exibido para o usuário uma tabela de preço para cada transportadora especifica
- Deve haver uma tela própria para o carrinho
- Deve ser possível inserir um produto no carrinho
- Deve ser possível alterar a quantidade do produto que está no carrinho
- Deve ser possível remover um produto no carrinho
- Deve ser possível remover todos os produtos do carrinho de uma vez
- Não deve ser posível inserir produtos repetidos no carrinho
- Não deve ser possível alterar a quantidade maior que o estoque permitido
- Não deve ser possível alterar a quantidade menor para menor que 1
- Todos os produtos do carrinho devem ser removidos se o usuário for redirecionado para o checkout
- Os produtos do carrinho devem ser persistidos de modo que o usuário possa acessá-los novamente mesmo que ele feche e abre o aplicativo novamente
- O produto no carrinho deve dizer a respeito a um do seus SKU, que por sua vez são definidos pelas variações escolhidas pelo usuário. Ex.: variações: material: Inox e tamanho: Médio definem o SKU que contém essas características
- Deve ser possível cadastrar o
e-maildo cliente/lead na telaHome - Não deve ser possível inserir o
e-mailde um cliente/lead já cadastrado
- Deve ser possível o usuário entrar em contato com alguém da
Serttonvia whatsapp ou e-mail
- Deve ser possível listar todos os pedidos do usuário
- A lista de pedidos deve ser com base no CPF ou CNPJ utilizado para fazer o pedido
- Cada pedido deve exibir:
- número,
- status (pago, aguardando pagamento ou cancelado),
- produtos, onde cada produto exibe:
- nome
- total de desconto,
- total a pagar (considerando o desconto)
- tipo de pagamento (cartão de crédito, pix ou boleto), sendo que:
- Se for por pix, permitir o usuário acessar o QR Code gerado pelo pedido
- Se for por boleto, permitir o usuário acessar o pdf do boleto gerado pelo pedido
- [] Deve ser possível o usuário arquivar o pedido de forma que não seja possível mais acessá-lo no aplicativo
- Deve ser exibido ao usuário informações sobre a empresa Sertton, termos e condições, política de devolução de produto
- Todos os produtos não devem ser carregados todos de uma vez mas conforme o usuário desce a tela para visualizar mais produtos
- Devem ser exibidos banners que capturem a atenção do cliente
- Devem ser exibidos coleções de produtos que compartilham o mesmo tema ou categoria
- Deve ser possível adicionar um produto ao carrinho sem o usuário precisar ver a tela de detalhes desse produto
- O botão de carrinho deve seguir as regras da funcionalidade de carrinho
Este projeto foi desenvolvido usando as seguintes tecnologias:
✔️ React Native para desevolvimento do applicativo mobile para ambas as plataformas Android e IOS
✔️ Tamagui Para a estilização e utilização de componentes acessíveis
✔️ Expo Para facilitar o processo de desenvolvimento em React Native
✔️ EAS Para automatizar o processo de deploy
✔️ Zod - para a implementação de validação de dados
✔️ Dayjs - Para a manipulação de datas
✔️ MMKV - Para a manipulação do local storage do dispositivo do usuário
✔️ Zustand - Para fazer o gerenciamento de estados complexos
✔️ Phosphor icons - Para exibição de ícones acessíveis
✔️ Yampi Api Rest - Para consumir os dados da loja virtual da Setton Industrial
✔️ Yampi Checkout - Para viabilizar o processo de checkout do usuário do fora do aplicativo
Para mais detalhes acerca das dependências do projeto, como versões específicas, veja o arquivo package.json
Antes de baixar o projeto você necessecitará ter instalado na sua máquina as seguintes ferramentas:
Além disto é bom ter um editor para trabalhar com o código, como o VSCode
Além disto é crucial configurar as variáveis de ambiente em um arquivo chamado
.envantes de executar a aplicação. veja o arquivo .env.example para ver quais variáveis devem ser configuradas
# Clone este repositório
$ git clone https://github.com/JohnPetros/sertton.git
# Acesse a pasta do projeto
$ cd sertton
# Instale as dependências
$ npm install
# Gere o código nativo necessário para executar todas as dependências
$ npm build
# Execute a aplicação em modo de desenvolvimento
$ npm start
Você irá precisar um emulador de android para ver o aplicativo funcionando. Porém você pode gerar o expo development build do projeto e executá-lo tanto no emulador quanto no seu dispositivo físico.
# Gere o development build do projeto
$ eas build --profile development --platform androidBaixe a build gerado na plataforma do EAS no emulador ou no dispositivo seu dispositivo físico e execute npm start novamente
Veja a documentação para mais detalhes a respeito do expo development build
# Execute os testes
$ npm run test# Fork este repositório
$ git clone https://github.com/JohnPetros/sertton.git
# Cria uma branch com a sua feature
$ git checkout -b minha-feature
# Commit suas mudanças:
$ git commit -m 'feat: Minha feature'
# Push sua branch:
$ git push origin minha-feature
Você deve substituir 'minha-feature' pelo nome da feature que você está adicionando
Veja a minha lista de emojis para cada tipo de commit que eu estou utilizando para manter a consistência entre as mensagens de commit
Você também pode abrir um nova issue a respeito de algum problema, dúvida ou sugestão para o projeto. Ficarei feliz em poder ajudar, assim como melhorar este projeto
O design do projeto foi feita utilizando a ferramenta Figma que pode ser acessada por esse link.
Esta aplicação está sob licença do MIT. Consulte o Arquivo de licença para obter mais detalhes sobre.
Feito com 💜 por John Petros 👋🏻