Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rickreisme/DesafioFrontEndWoovi
Esse é o repositório da minha versão do teste/desafio da vaga de front-end jr. da Woovi.
https://github.com/rickreisme/DesafioFrontEndWoovi
Last synced: 2 months ago
JSON representation
Esse é o repositório da minha versão do teste/desafio da vaga de front-end jr. da Woovi.
- Host: GitHub
- URL: https://github.com/rickreisme/DesafioFrontEndWoovi
- Owner: rickreisme
- Created: 2024-07-11T01:15:14.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-16T23:36:15.000Z (6 months ago)
- Last Synced: 2024-08-02T15:07:15.422Z (5 months ago)
- Language: TypeScript
- Homepage: https://desafio-front-end-woovi.vercel.app
- Size: 327 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-woovi-challenge - Desafio Woovi Frontend - Woovi Frontend Engineer Challenge [Rick Reis](https://github.com/rickreisme/) (Challenges Frontend)
README
# Challenge Front-End Jr Woovi
Este é o repositório da minha versão do teste/desafio para a vaga de front-end jr. da Woovi.
## Tecnologias Utilizadas
- Vite React + TypeScript
- Material UI (MUI)
- react-router-dom
- react-hook-form
- vitest
- testing-library## Descrição do Desafio
O desafio consiste na replicação de um design fornecido, conforme as seguintes especificações:
- Implementação em React.
- Abordagem Mobile First para garantir responsividade em todos os dispositivos.
- Utilização de uma biblioteca de UI, preferencialmente Material-UI devido à integração com Woovi.
- Consideração de todos os casos de borda para uma experiência de usuário consistente.## Navegação do Projeto
- **Página Inicial (/**): Página que exibe as opções de pagamento em Pix à vista ou parcelamento de Pix + Cartão para o cliente.
- **Página de QR Code (/qr-code e /qr-code-parc)**: Página que exibe o QR Code para pagamento da entrada do valor.
- **Página de Formulário do Cartão (/cartao)**: Página que exibe o formulário para o cliente preencher os dados do cartão para pagar as demais parcelas do valor.## Executando o Projeto
### Pré-requisitos
- Node.js
### Instalação
1. Clone o repositório:
```bash
git clone https://github.com/seu-usuario/nome-do-repositorio2. Navegue até o diretório do projeto e instale as dependencias com o comando:
```bash
npm install3. Execute o projeto com o comando:
```bash
npm run dev4. A aplicação estará disponível em http://localhost:5173 no ambiente de desenvolvimento.