Read it in English

O Opea Empresas é uma página web que lista empresas fictícias e seus detalhes (nome, cnpj e email) em formato de uma tabela responsiva. Esta página foi desenvolvida para um teste técnico de desenvolvedor Front End na Opea Capital - uma plataforma que facilita e agiliza operações de crédito.

Para este teste técnico foram utilizadas as seguintes tecnologias:

• Setup inicial do projeto
• Implementação de GET request da API para listagem em tela
• Desenvolvimento da interface:
  • Componente Header
  • Componente barra de busca
  • Componente de tabela para listagem das empresas
  • Componente Botão Adicionar Empresa
  • Componente Modal para gerenciamento das empresas (Adicionar, Editar ou Deletar empresa do banco de dados)
• Funcionalidades:
  • Criação das demais requests do CRUD (POST, PUT e DELETE)
  • Validação do formulário com react-hook-form e yup
  • Implementação de POST de empresas
  • Vínculo da Modal à edição de empresas
  • Implementação do PUT de empresas
  • Implementação do DELETE de empresas
  • Re-renderização automática de componentes após requests
  • Implementação da busca com o endpoint fornecido pela API
• Verificação de responsividade
• Acessibilidade para leitores de tela e navegação via Tab
• Tags meta para SEO

Minha meta de desenvolvimento foi manter o design da aplicação fiel ao design proposto pela Opea, seguindo o conceito de desenvolvimento pixel-perfect. No entanto, considerando que não havia style-guide no Figma e visando uma melhor experiência ao usuário, modifiquei o mínimo possível os seguintes pontos:

• Adição de efeitos de :hover e :focus aos elementos que possuem interação;
• Estilização do ícone de lupa na barra de pesquisa para uso como botão do tipo submit para a busca;
• Adição do botão Editar para cada linha da tabela, para acessibilidade visual e facilidade de uso;
• Uso de tabIndex e atributos WAI-ARIA para melhor acessibilidade;
• Pequeno rodapé apenas para indicação de autoria de desenvolvimento.

Para não destoar do design proposto, mantive as fontes do tamanho previsto, porém sugiro não utilizar tanto as fontes de tamanho 12px para conteúdos textuais em tela, a não ser em casos pontuais. A fonte 12px pode prejudicar a acessibilidade visual. No entanto, a página mantém ativa a possibilidade de zoom para uma melhor experiência do usuário nesse quesito.

Outro ponto que eu particularmente teria feito diferente foi o filtro de busca. Normalmente, eu faço o filtro diretamente nos dados já carregados no front-end da aplicação para não aumentar a quantidade de requisições ao banco de dados. Porém, visto que na documentação do teste foi indicado um endpoint específico, optei por implementar utilizando o endpoint para respeitar aos requisitos do teste.

Uma sugestão de implementação futura para melhoria de conforto visual é a implementação de um dark mode.

🔼 Voltar ao topo

Opea Empresas is a web page for listing fictitious companies/clients and their details (name, registration number and email) in a responsive table. This page was developed as a code test for a Frontend Developer position at Opea Capital - a platform which makes credit operations easier and faster.

I have used the following technologies in this code test:

• Initial setup of the project
• GET request from the API for listing clients
• UI development:
  • Header component
  • Search bar component
  • Table component for listing the clients
  • Add Company Button component
  • Dialog component for managing the companies (add, update and/or delete from database)
• Features and functionalities:
  • Creation of other CRUD requests (POST, PUT and DELETE)
  • Form validation with react-hook-form e yup
  • POST company implementation
  • Link Dialog to company edition
  • PUT company implementation
  • DELETE company implementation
  • Automatic re-render of components after requests
  • Search implementation using the API endpoint given
• Check responsivity
• Screen readers and tab navigation accessibility
• Meta tags for SEO

My goal was to keep the page design the more faithful to the Figma design sent by Opea, following the pixel-perfect development concept.However, since there was no style-guide on Figma and aiming to a better user experience, I have slightly changed the following points:

• Add :hover and :focus effects on interactive elements;
• Search icon styling for using it as submit button for the search bar;
• Add an Edit button for each row in the table for better visual accessibility and user experience;
• Use of tabIndex and WAI-ARIA attributes for better accessibility;
• A small footer to indicate development authorship.

I have kept the font-size the same as indicated on Figma, but I suggest not using the 12px size so much on text content, unless in specific points. The 12px font-size may turn visual accessibility worse, but the page allows zooming for better user experience.

Particularly, I would have done the Search funcionality by filtering the data that is already loaded in the Frontend, without making so many requests to the database. But since the test documentation had a specific endpoint for search requests, I have chosen to implement the filter by using this endpoint, respecting the test requirements.

Another suggestion is implementing a dark mode for better sight comfort.

🔼 Back to top

Developed with 🧡 by @sucodelarangela 🍊