Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pax-primavera/web-exemplo
Front-end em React.js padronizado
https://github.com/pax-primavera/web-exemplo
css driverjs framer-motion jest reactjs testing-library toastify
Last synced: 11 days ago
JSON representation
Front-end em React.js padronizado
- Host: GitHub
- URL: https://github.com/pax-primavera/web-exemplo
- Owner: pax-primavera
- Created: 2024-10-23T20:10:52.000Z (28 days ago)
- Default Branch: v1
- Last Pushed: 2024-11-08T16:27:01.000Z (12 days ago)
- Last Synced: 2024-11-08T16:44:29.567Z (12 days ago)
- Topics: css, driverjs, framer-motion, jest, reactjs, testing-library, toastify
- Language: JavaScript
- Homepage:
- Size: 1.77 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Example
Este é um projeto de exemplo desenvolvido utilizando React e CSS, destinado ao uso exclusivo em desktop. O projeto inclui uma página de login com autenticação, utilizando mock para simular a API.
## Tabela de Conteúdos
- [Recursos](#recursos)
- [Tecnologias Utilizadas](#tecnologias-utilizadas)
- [Instalação](#instalação)
- [Execução do Projeto](#execução-do-projeto)
- [Testes](#testes)
- [Estrutura do Projeto](#estrutura-do-projeto)
## Recursos
- Página de login com validação de CPF e senha.
- Mensagens de feedback utilizando `react-toastify`.
- Tutorial interativo utilizando `driver.js`.
- Animações sutis de transição na interface utilizando `framer-motion`.
- Testes automatizados utilizando `Jest` e `Testing Library`.
## Tecnologias Utilizadas
- **React**: Biblioteca para construção da interface de usuário.
- **CSS**: Framework CSS para estilização rápida e responsiva.
- **React Toastify**: Biblioteca para exibição de mensagens de feedback.
- **Driver.js**: Biblioteca para criação de tutoriais interativos e guias.
- **Framer Motion**: Biblioteca para animações suaves e interações dinâmicas.
- **Jest**: Framework de testes para JavaScript.
- **React Testing Library**: Biblioteca para testes de componentes React.
## Instalação
1. Clone o repositório:
```bash
git clone https://github.com/seu-usuario/web-example.git
cd web-example
```
## Testes
Para executar os testes, utilize o comando:
```bash
npm test
```
## Estrutura do Projeto
```
web-example/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ └── Driver
│ │ ├── LoginButton
│ │ ├── LoginCard
│ │ ├── Logo
│ │ ├── PasswordInput
│ │ ├── TextInput
│ │ ├── Toast
│ ├── fonts/
│ ├── manual/
│ │ ├── login/
│ │ │ ├── index.js
│ ├── pages/
│ │ └── Login.js
│ │ ├── Login.css
│ ├── services/
│ │ ├── get/
│ │ │ ├── Login.js
│ │ └── post/
│ │ ├── Login.js
│ │ ├── url.js
│ ├── tests/
│ │ └── Login.test.js
│ ├── App.js
│ ├── index.js
│ └── styles.css
└── package.json
```