Projeto Lacrei Saúde - Desafio

Este é um projeto desenvolvido como parte de um desafio técnico para demonstrar habilidades em desenvolvimento web utilizando Next.js e styled-components. O objetivo é criar uma interface moderna, responsiva e acessível, seguindo as diretrizes fornecidas pela Lacrei Saúde.

Deploy

O projeto está sendo executado em produção e pode ser acessado através do link: https://desafio-lacrei-saude-ten.vercel.app/

📋 Visão Geral

O projeto consiste em uma aplicação web que inclui:

• Header: Com logotipo responsivo e links para diferentes seções, incluindo uma nova página dedicada ao desafio.
• Footer: Personalizado com esquema de cores em verde e branco, contendo links de navegação, informações de contato e ícones de redes sociais.
• Página de Desafio: Explica o contexto do desafio e as habilidades aplicadas no projeto.

🚀 Tecnologias Utilizadas

• Next.js: Framework React para renderização híbrida (SSR e SSG).
• TypeScript: Superconjunto do JavaScript que adiciona tipagem estática ao código.
• Styled-components: Biblioteca para estilização de componentes utilizando CSS-in-JS.
• React Icons: Biblioteca para ícones baseados em React.

📦 Estrutura do Projeto

A estrutura do projeto segue a organização abaixo:

.
├── cypress
│   └── e2e
│       └── desafio.cy.cs
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── src
│   ├── components
│   │   ├── CallToAction.tsx
│   │   ├── Footer.tsx
│   │   └── Header.tsx
│   ├── pages
│   │   ├── api
│   │   │   └── hello.ts
│   │   ├── desafio.tsx
│   │   ├── index.tsx
│   │   ├── _app.tsx
│   │   └── _document.tsx
│   └── styles
│       └── globals.css
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

🔧 Configuração e Execução

Siga os passos abaixo para configurar e executar o projeto em sua máquina local:

1. Clone o repositório:

   git clone https://github.com/juliano340/desafio_lacrei_saude.git

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

   desafio_lacrei_saude

3. Instale as dependências:

   npm install

4. Inicie o servidor de desenvolvimento:

   npm run dev

5. Acesse o projeto no navegador:

   Abra http://localhost:3000 no seu navegador para visualizar o projeto.

🛠️ Funcionalidades

• Responsividade: O projeto foi desenvolvido com foco em dispositivos móveis e telas de diferentes tamanhos.
• Navegação: Links de navegação no header e footer, incluindo a página de desafio.
• Estilização Dinâmica: Uso de styled-components para criar componentes estilizados e reutilizáveis.

✨ Personalização

• Cores: O esquema de cores foi ajustado para utilizar verde e branco.
• Tipografia: A fonte Nunito foi integrada e aplicada globalmente.

💡 Inspirações

Este projeto foi inspirado pelas diretrizes de design e experiência de usuário da Lacrei Saúde.

📄 Licença

Este projeto é apenas para fins educacionais e de demonstração. Sinta-se à vontade para utilizá-lo como referência.

🧪 Testes End-to-End (E2E) com Cypress

Este projeto inclui testes end-to-end (E2E) usando o Cypress. Esses testes simulam interações do usuário com a interface do projeto e garantem que todas as partes da aplicação funcionem corretamente de ponta a ponta.

O teste que foi criado verifica se a página "Desafio" é carregada com sucesso após a inicialização do projeto.

Executando os Testes E2E

Após executar o projeto, conforme indicado acima, para executar os testes do Cypress sem a interface gráfica, você pode usar o seguinte comando no terminal:

npx cypress run

Este comando irá rodar todos os testes definidos na pasta cypress/e2e em modo headless, ou seja, sem abrir uma janela do navegador.

Especificando Testes e Navegadores

• Para rodar um teste específico, use o seguinte comando:

  npx cypress run --spec "cypress/e2e/desafio.cy.ts"

• Para rodar os testes em um navegador específico, como o Chrome, use:

  npx cypress run --browser chrome

Relatórios e Resultados

Após a execução, o Cypress gerará relatórios que mostram quais testes passaram ou falharam. Se necessário, você pode configurar o Cypress para gerar vídeos ou capturas de tela dos testes.

Os testes E2E com Cypress ajudam a garantir que toda a aplicação funcione conforme esperado do ponto de vista do usuário final, validando o comportamento em diferentes navegadores e situações.

📱 Responsividade

Este projeto foi desenvolvido com foco em responsividade, garantindo que a aplicação funcione bem em dispositivos de diferentes tamanhos de tela, desde desktops até smartphones.

Como a Responsividade foi Implementada

• Media Queries: Foram utilizadas media queries para ajustar o layout e os estilos dos componentes em diferentes larguras de tela.
• Design Mobile-First: O design foi criado com a abordagem mobile-first, garantindo que a experiência em dispositivos móveis seja priorizada.

Demonstrando a Responsividade

Você pode testar a responsividade da aplicação de várias maneiras:

1. Ferramentas de Desenvolvedor do Navegador: Utilize as ferramentas de desenvolvedor do seu navegador (como o Chrome DevTools) para simular diferentes tamanhos de tela e testar a responsividade do layout.

2. Dispositivos Reais: Acesse a aplicação em diferentes dispositivos, como smartphones e tablets, para ver como o layout se adapta.

3. Teste de Redimensionamento: No navegador, redimensione a janela manualmente para observar como os componentes se reorganizam e se adaptam ao espaço disponível.

A responsividade é fundamental para garantir uma boa experiência de usuário em qualquer dispositivo, e este projeto foi cuidadosamente desenvolvido para atender a esse requisito.

---

Desenvolvido com 💚 por Juliano Pereira