Desafio Frontend

Este é o frontend do sistema desenvolvido para o desafio técnico, projetado para ser moderno e elegante, com foco em uma interface intuitiva para gerenciar clientes. Ele consome o backend implementado no projeto correspondente.

Tecnologias Utilizadas

• React com Vite para um setup rápido e leve.
• React Router Dom para gerenciar as rotas.
• React Icons e React Toastify para ícones e notificações.
• React Confirm Alert para exibição de alertas customizáveis.
• React Input Mask para formatação de campos como CPF, telefone e CEP.
• CSS Customizado com animações e transições para uma experiência moderna.

Estrutura do Projeto

src
├── assets
├── components
│   └── ClienteForm.jsx
├── context
│   └── AuthContext.jsx
├── pages
│   ├── ClientesPage.jsx
│   ├── ClientesPage.css
│   ├── LoginPage.jsx
│   └── LoginPage.css
├── App.css
├── App.jsx
├── index.css
├── main.jsx

Configuração Inicial

Requisitos

• Node.js: v18.17.1
• npm: v9.6.7

Variáveis de Ambiente

Crie um arquivo .env na raiz do projeto e adicione o seguinte conteúdo:

VITE_API_URL=https://desafio-backend-production-bcb7.up.railway.app

Obs.: No ambiente de produção (Vercel), as variáveis de ambiente foram configuradas diretamente na interface de deployment.

Como Rodar o Projeto

1. Clone o repositório:

   git clone https://github.com/MarcosCast/desafio-frontend.git
   cd desafio-frontend

2. Instale as dependências:

   npm install

3. Execute o servidor de desenvolvimento:

   npm run dev

4. Acesse o frontend localmente em: http://localhost:5173.

Deploy

O projeto está hospedado no Vercel e pode ser acessado no link abaixo:

Desafio Frontend - Vercel

Funcionalidades

Páginas

1. Login Page:

   • Autenticação com usuários de diferentes permissões (Admin e Usuário).
   • Animações e design com keyframes para uma experiência moderna.
   • Validação básica de credenciais.

2. Clientes Page:

   • Listagem dos clientes cadastrados.
   • Botão para criar, editar ou excluir clientes (dependendo da permissão do usuário).
   • Ordenação dinâmica por colunas (ex.: Nome, CPF).
   • Visualização de informações detalhadas como telefone, e-mails e endereços.
   • Ícones e animações para ações.

Componente Reutilizável

• ClienteForm: Um formulário customizável para criar ou editar clientes, com validação de campos (ex.: CPF, CEP e e-mails).

Context API

O projeto utiliza o Context API para gerenciamento de autenticação, armazenando os dados do usuário logado e permitindo logout de forma fácil.

Melhorias Futuras

• Refatorar o gerenciamento de estado (ex.: Redux ou Context API com Reducers).
• Melhorar a comunicação entre os componentes usando Props ou Context.
• Expandir a funcionalidade para um sistema de gerenciamento completo, incluindo:
  • Paginação para a listagem de clientes.
  • Relatórios exportáveis (PDF/Excel).
  • Gráficos analíticos.

Licença

Este projeto foi desenvolvido como parte de um desafio técnico e não possui licença especificada.