Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leandrucarvalho/desafio-woovi-frontend
https://github.com/leandrucarvalho/desafio-woovi-frontend
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/leandrucarvalho/desafio-woovi-frontend
- Owner: leandrucarvalho
- Created: 2024-07-15T22:39:22.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-07-26T14:03:38.000Z (4 months ago)
- Last Synced: 2024-08-02T15:07:13.809Z (3 months ago)
- Language: TypeScript
- Homepage: https://desafio-woovi-frontend.vercel.app
- Size: 159 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-woovi-challenge - Woovi Frontend Engineer Challenge - Woovi Frontend Engineer Challenge [leandrucarvalho](https://github.com/leandrucarvalho) (Challenges Frontend)
README
# Projeto de Formulário de Pagamento
Este projeto é uma [réplica](https://www.figma.com/design/hv1LgD7oNrtlmfWgKBG6PF/Woovi-Desafio-Front?node-id=1-100&t=8e8S8BqGhbskgN2d-0) web desenvolvida utilizando React, Next.js e Material-UI. A aplicação consiste em formulários para pagamento com Pix e cartão de crédito, além de uma navegação entre diferentes telas por meio de URLs.
## Link do desafio no vercel
[Desafio Front End Woovi](https://desafio-woovi-frontend.vercel.app/)
## Estrutura do Projeto
- **Componente Header**: Responsável por exibir o cabeçalho da página com um logotipo e uma mensagem personalizada.
- **Componente DataCard**: Contém o formulário de dados do cartão de crédito, incluindo campos para nome completo, CPF, número do cartão, vencimento, CVV e número de parcelas.
- **Componente Footer**: Exibe um rodapé fixo com um ícone de segurança e o logotipo da Woovi.
## Navegação
A navegação entre as diferentes telas da aplicação é realizada diretamente através das URLs:
- **Página Inicial**: [http://localhost:3001/](http://localhost:3001/)
- Página principal da aplicação.
- **Página Pix Credit Card**: [http://localhost:3001/pix-credit-card](http://localhost:3001/pix-credit-card)
- Página contendo um formulário para pagamento via Pix.
- **Página Pix Credit Card 2**: [http://localhost:3001/pix-credit-card2](http://localhost:3001/pix-credit-card2)
- Página contendo um formulário para pagamento da entrada via cartão de crédito.
## Instalação e Execução
Para executar este projeto localmente, siga os passos abaixo:
1. Clone o repositório:
```bash
git clone https://github.com/leandrucarvalho/desafio-woovi-frontend
```
2. Instale as dependências:
```bash
cd desafio-woovi-frontend
npm install
```
3. Inicie o servidor de desenvolvimento:
```bash
npm run dev
```
4. Acesse a aplicação no navegador através de [http://localhost:3001](http://localhost:3001).
## Tecnologias Utilizadas
- **React**: Biblioteca JavaScript para construção de interfaces de usuário.
- **Next.js**: Framework React para renderização do lado do servidor e geração de sites estáticos.
- **Material-UI**: Biblioteca de componentes de interface de usuário para React.
- **TailwindCSS**: Framework CSS para estilização rápida e responsiva.
## Contato
Para mais informações, dúvidas ou sugestões, entre em contato pelo e-mail: [[email protected]](mailto:[email protected]).