Criação de Usuário

O objetivo é avaliar sua capacidade de implementar uma interface fiel ao design, com atenção aos detalhes, qualidade de código e boas práticas de desenvolvimento.

Tecnologias Utilizadas

Este projeto utiliza as seguintes tecnologias e bibliotecas:

• React com Context API e React Hooks
• React Query para gerenciamento de estado assíncrono
• React Router DOM para navegação entre páginas
• React Hook Form para manipulação de formulários
• Zod para validação de dados
• Tailwind CSS para estilização
• ShadcnUI para componentes de interface
• Axios para requisições HTTP
• Vite como bundler
• TypeScript para tipagem estática
• ESLint e Prettier para linting e formatação de código
• Vercel para deploy do projeto
• JSON Server para simulação de uma API RESTful

Telas

Listagem de usuários

Modal de Inclusão/Edição de Usuário

Resposta após a inclusão de usuário

Criação do Projeto

Para este teste, você deve criar um projeto front-end utilizando React com a biblioteca ShadcnUI e Tailwind CSS. O objetivo é construir uma interface CRUD que siga rigorosamente o design fornecido. Use preferencialmente o create-next-app ou Vite, conforme sua familiaridade.

Construção da Interface

Implemente uma interface CRUD com os seguintes elementos:

1. Tela de Listagem
   • Exiba uma lista de registros.
   • Inclua um botão para adicionar novo item.
2. Modal de Inclusão
   • Ao clicar em "adicionar" ou "editar" um item da lista, abra um modal (usando ShadcnUI).
   • O modal pode exibir dados ou permitir edição rápida.
   • Atenção: a interface deve seguir rigorosamente o design enviado via Figma. Cores, espaçamentos, fontes, responsividade e estrutura devem ser respeitados.
3. Estilo e Componentes
   • Utilize apenas a biblioteca ShadcnUI para os componentes (botões, inputs, modais, etc.).
   • Faça a personalização visual usando Tailwind CSS, sem outras bibliotecas de UI ou CSS externas.
4. Publicação
   • Suba o projeto em um ambiente de testes acessível (como Vercel, Netlify, Render ou outro de sua escolha).

Como Clonar e Iniciar o Projeto

Siga os passos abaixo para clonar e executar o projeto localmente:

1. Clone o repositório:

   git clone git@github.com:Joaopsguimaraes/challenge-crud-users.git

2. Navegue até o diretório do projeto:

   cd challenge-crud-users

3. Instale as dependências:

   npm install

4. Inicie o servidor de desenvolvimento:

   npm run dev

5. Abra o navegador e acesse: http://localhost:5173

Autor