dashartt / belezanaweb-test-front

Desafio consiste em um checkout simples contendo 3 passos (carrinho, pagamento e sucesso)

🚀 Bem vindo ao projeto Belezanaweb Test Front!

Introdução

O teste consiste em um checkout simples contendo 3 passos (carrinho, pagamento e sucesso) de acordo com esse layout

Shopping cart	Payment	Post purchase

Tecnologias utilizadas

Frontend:

• React c/ Typescript
• TailwindCSS
• React-router-dom

Critérios do projeto

Requerimentos:

• Pixel perfect (nesse link, você pode inspecionar para ver espaçamentos, fonte, tamanho, etc)
• A aplicação precisa ser responsiva, utilizando o conceito de mobile-first. Use sua imaginação para entregar uma experiência boa no desktop.

Observações:

1. Carrinho:

   • Consuma o esse endpoint e liste os itens, bem como o resumo;

2. Pagamento:

   • Exiba um form com campos de cartão de crédito com validação em cada campo;
   • Habilite o botão de Finalizar Pedido apenas se o form estiver válido;

3. Sucesso:

   • Todo o conteúdo deverá ser exibido a partir dos dados persistidos;

O que iremos avaliar:

• Organização do código;
• Mensagens e mudanças nos commits;
• Composição/reutilização de componentes;
• Testes unitários;
• O motivo de ter escolhido cada tech da stack;

---

👨‍💻 Rodando o projeto👨

Como rodar?

1. Clone o repositório com o comando:
   git clone [email protected]:jonatasqueirozlima/belezanaweb-test-front.git;
2. Entre na pasta do repositório:
   cd belezanaweb-test-front
3. Inicie a aplicação com o comando:

• docker-compose up -d --build

3. Acessar a seguinte URL:
   http://localhost:3000/

---

🥷 Próximos passos

• Adicionar validações no formulário de pagamento
• Controle de rotas, impedir que acesse /post-purchase sem antes realizar /payment
• Testes unitários