https://github.com/keyllian7/form-processing-front

Last synced: over 1 year ago
JSON representation

Host: GitHub
URL: https://github.com/keyllian7/form-processing-front
Owner: Keyllian7
License: mit
Created: 2024-11-08T00:18:05.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-11-24T17:49:44.000Z (over 1 year ago)
Last Synced: 2024-11-24T18:29:04.044Z (over 1 year ago)
Language: JavaScript
Size: 8.2 MB
Stars: 2
Watchers: 1
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Form Processing Frontend 💻

Layout •
Descrição •
Funcionalidades •
Instalação •
Colaboradores

Aplicação frontend em React para envio e acompanhamento de solicitações de suporte, com gestão de status pelos administradores.

📱 Visite o Projeto

🎨 Layout

Image Form
Image Adm
Image Login

📄 Descrição

Este projeto implementa o frontend do sistema Form-Processing, permitindo que usuários e administradores interajam com a API para envio e acompanhamento de formulários.
- Usuário: Cria e envia solicitações relatando problemas, além de acompanhar o status de suas requisições.
- Admin: Acessa uma interface para gerenciar as solicitações, atualizando o status e resolvendo problemas.

O frontend foi desenvolvido utilizando React para criar uma interface moderna e responsiva. Diversas bibliotecas adicionais foram utilizadas para otimizar a experiência do usuário e a comunicação com a API, como:

- axios para requisições HTTP
- dompurify para sanitização de HTML e proteção contra ataques XSS
- jwt-decode para decodificação de tokens JWT
- react-router-dom para gerenciamento de rotas no React
- react-google-recaptcha para integração do Google reCAPTCHA.
- recharts para criação de gráficos em React.

Este projeto foi desenvolvido como parte do trabalho da A3, focando em melhorar a comunicação e gestão de solicitações, com uma interface intuitiva que complementa o backend robusto.

💻 Funcionalidades

- Interface para criação e envio de formulários detalhados.
- Validação de dados no lado do cliente (ex.: número de telefone e formato de e-mail).
- Feedback visual para ações do usuário (ex.: mensagens de erro/sucesso).
- Navegação entre telas de forma dinâmica usando React Router.
- Comunicação em tempo real com a API para atualização do status das solicitações.

🚀 Instalação

Para clonar o repositório e instalar as dependências:

Pré-requisitos

- Node.js
- npm ou yarn
- Visual Studio Code (Opcional)
- bash, zsh, fish ou um shell de terminal de sua escolha

Passo a Passo

1. Clone o repositório:
```bash
git clone https://github.com/Keyllian7/Form-Processing-Front.git
```
2. Acesse o projeto e instale as dependências:
```bash
cd Form-Processing-Front
npm install dos seguintes pacotes
axios
date-fns
dompurify
form
jwt-decode
react
react-dom
react-google-recaptcha
react-hook-form
react-router-dom
react-scripts
recharts
sockjs-client
web-vitals
```
3. Execute o projeto em modo de desenvolvimento:
```bash
npm start
```
4. Abra no navegador: O frontend estará disponível em http://localhost:3000.