Este Projeto e a resolução de um desafio tecnico proposto pela Dot Lib, o desafio consiste em criar uma uma interface frontend para um sistema de gerenciamento de bulas de medicamentos, e possivel visualizar os medicamentos, pesquisar por nome e laboratorio, alem de uma pagina com detalhes de um medicamento e links para downloads das bulas. Desenvolvi este projeto utilizando Vite, React, Typescript, Css e consumindo uma API.
Para desenvolver e executar esta aplicação, é necessário configurar um ambiente com as seguintes ferramentas:
Node.js: A aplicação é desenvolvida em Node.js, uma plataforma de tempo de execução JavaScript, e é necessária para executar o código.
Certifique-se de instalar e configurar essas ferramentas em seu ambiente de desenvolvimento antes de iniciar o projeto.
Clone este repositório:
git clone git@github.com:ElieltonRamos/teste-desenvolvedor-frontend.git
Navegue até o diretório do projeto:
cd teste-desenvolvedor-frontend
Inicie a API:
npx json-server api/dotlib.json -s ./api/public
Em outro terminal Instale as dependências:
cd frontend-bulario && npm install
Inicie o servidor de desenvolvimento:
npm run dev
O projeto conta com testes que verificam o funcionamento do frontend, existem testes para verificar se a aplicação esta renderizando corretamente, se a busca por medicamentos esta funcionando, se a pagina de detalhes de um medicamento esta funcionando e se os links para download das bulas estão funcionando.
Para executar os testes siga os seguintes passos:
Abra o terminal na raiz do projeto
Execute o comando:
cd frontend-bulario && npm test
Verifique a saida dos testes no seu terminal
Para utilizar a aplicação, acesse o endereço http://localhost:5173 em seu navegador.
A aplicação exibe uma lista de medicamentos, com opções de pesquisa por nome e laboratório. Clique em um medicamento para ver detalhes e links para download das bulas. A aplicação também conta com um botão de voltar para a pagina inicial. A aplicação é responsiva e se adapta a diferentes tamanhos de tela. A aplicação conta com testes que verificam o funcionamento do frontend.
A seguir esta explicada a estrutura de pastas do projeto
project-api-talker-manager/ : A pasta raiz do projeto.
├── api/ : Pasta com os arquivos da API.
│ ├── public/ : Pasta com os arquivos estáticos da API.
│ ├── dotlin.json : Arquivo com os dados dos medicamentos.
├── frontend-bulario/ : Pasta com os arquivos do frontend.
├── public/ : Pasta imagens do readme.
├── README.md : Arquivo com a documentação do projeto.
├── .github/ : Pasta com arquivos de configuração do GitHub.
Elielton Ramos
Código Aberto (Open Source)
Este projeto é de código aberto e está disponível para toda a comunidade. Fique à vontade para explorar, clonar e contribuir para o projeto.
Agradeço a Dot Lib pela oportunidade de participar do processo seletivo e desenvolver este projeto.