{"id":26472700,"url":"https://github.com/samuel-amaro/test-chat2desk","last_synced_at":"2026-04-17T02:33:26.228Z","repository":{"id":254852641,"uuid":"847735938","full_name":"Samuel-Amaro/test-chat2desk","owner":"Samuel-Amaro","description":"Este projeto foi desenvolvido como parte de um teste técnico para a posição de Front-End Developer na Chat2Desk. A implementação foca em cumprir todos os requisitos solicitados, com especial atenção à usabilidade, responsividade e integração com a API.","archived":false,"fork":false,"pushed_at":"2024-08-26T13:34:24.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T21:49:30.621Z","etag":null,"topics":["basic-auth","nextjs14","react","typescript"],"latest_commit_sha":null,"homepage":"https://test-chat2desk.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Samuel-Amaro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-26T12:56:56.000Z","updated_at":"2024-08-26T13:34:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"6748e68d-5511-49ab-ac7d-7844a6a7fe09","html_url":"https://github.com/Samuel-Amaro/test-chat2desk","commit_stats":null,"previous_names":["samuel-amaro/test-chat2desk"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Samuel-Amaro/test-chat2desk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Ftest-chat2desk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Ftest-chat2desk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Ftest-chat2desk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Ftest-chat2desk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Samuel-Amaro","download_url":"https://codeload.github.com/Samuel-Amaro/test-chat2desk/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Samuel-Amaro%2Ftest-chat2desk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31912500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basic-auth","nextjs14","react","typescript"],"created_at":"2025-03-19T21:44:23.822Z","updated_at":"2026-04-17T02:33:26.194Z","avatar_url":"https://github.com/Samuel-Amaro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chat2Desk - Teste Técnico de Front-End Developer\n\n## Descrição do Projeto\n\nEste projeto é uma aplicação simples desenvolvida com Next.js e React para a visualização de uma lista de contatos e seus detalhes. A aplicação integra-se com a API pública JSONPlaceholder para buscar os dados dos contatos e implementa um fluxo de autenticação básico utilizando Basic Auth HTTP.\n\n## Resultado Do Test\n\n[Resultado Teste](https://test-chat2desk.vercel.app/)\n\n## Funcionalidades Implementadas\n\n### 1. Autenticação\n\n- **Fluxo de Autenticação**: Foi implementado um sistema de autenticação usando Basic Auth HTTP. As credenciais de login estão estáticas no código.\n- **Credenciais de Acesso:**\n  - **Usuário**: `user`\n  - **Senha**: `pass`\n- **Persistência da Sessão:** As informações de login são mantidas ativas enquanto o navegador estiver aberto. Se o navegador for fechado, será necessário realizar o login novamente. No entanto, fechar as guias do aplicativo não requer uma nova autenticação.\n\n### 2. Páginas e Rotas\n\n- **Página Inicial (Login)**:\n\n  - A tela inicial da aplicação é o modal de login fornecido pelo browser, onde o usuário deve informar as credenciais para acessar o sistema.\n\n- **Página Home (Lista de Contatos):**\n\n  - Após o login, a página home é exibida, com uma lista de contatos obtidos da API `https://jsonplaceholder.typicode.com/users.`\n  - Cada contato mostra o nome, e-mail, e uma miniatura da foto. Se a foto não estiver disponível, as iniciais do nome do contato são exibidas.\n\n- **Página de Detalhes do Contato:**\n  - Ao clicar em um contato, o usuário é redirecionado para a página de detalhes (rota `/contact/[id]`), onde informações adicionais sobre o contato são exibidas.\n  - A página de detalhes utiliza o endpoint `https://jsonplaceholder.typicode.com/users/{id}` para buscar as informações específicas de cada contato.\n\n### 3. Integração com API\n\n- **API Pública:** A aplicação faz chamadas à API pública `JSONPlaceholder`.\n- **Endpoints Utilizados:**\n  - `/users` para obter a lista de usuários.\n  - `/users/{id}` para obter os detalhes de um usuário específico.\n\n### 4. Estilização e Responsividade\n\n- A aplicação foi estilizada de forma simples, com foco na usabilidade e clareza.\n- **Responsividade:** A interface foi projetada para ser responsiva, garantindo uma boa experiência em dispositivos de diferentes tamanhos.\n- **Design:** As páginas utilizam uma paleta de cores suave e fontes claras para melhorar a legibilidade e a aparência visual.\n\n## Dependencies\n\nThe following dependencies are required for this project:\n\n- Next.JS App Router 14\n- React 18\n- TypeScript\n- ESLint\n- Prettier\n\n## Como Executar o Projeto\n\n### 1. Pré-requisitos\n\n- Node.js instalado na máquina.\n- Gerenciador de pacotes npm ou yarn.\n\n### 2. Instalação\n\n- Clone o repositório:\n\n  ```bash\n    git clone https://github.com/Samuel-Amaro/test-chat2desk.git\n  ```\n\n- Navegue até o diretório do projeto:\n\n  ```bash\n    cd test-chat2desk\n  ```\n\n- Instale as dependências:\n\n  ```bash\n     npm install\n     # or\n     yarn install\n  ```\n\n### 3. Executando a Aplicação\n\n- Para iniciar o servidor de desenvolvimento:\n\n```bash\n  npm run dev\n  # or\n  yaarn dev\n```\n\n### 4. Testando a Aplicação\n\n1. A aplicação estará disponível em http://localhost:3000.\n2. Insira as credenciais de login (usuário: `user`, senha: `pass`).\n3. Navegue pela lista de contatos e visualize os detalhes de cada contato.\n\n### Considerações Finais\n\nEste projeto foi desenvolvido como parte de um teste técnico para a posição de Front-End Developer na Chat2Desk. A implementação foca em cumprir todos os requisitos solicitados, com especial atenção à usabilidade, responsividade e integração com a API.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-amaro%2Ftest-chat2desk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuel-amaro%2Ftest-chat2desk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuel-amaro%2Ftest-chat2desk/lists"}