Para rodar o projeto é necessário ter o Node instalado, assim como o NPM. Execute o seguinte comando no terminal para instalar as dependências:
npm install
ou
yarn
Execute o seguinte comando para rodar o projeto localmente:
npm run dev
ou
yarn dev
ou
pnpm dev
Abra http://localhost:3000 no seu navegador para visualizar o site.
Execute o seguinte comando para compilar o projeto:
npm run build
ou
yarn build
ou
pnpm build
Isso irá gerar os arquivos buildados na pasta .next
.
Execute o seguinte comando para testar o código do projeto:
npm run test
ou
yarn test
ou
pnpm test
Objetivo: Criar uma página inicial de e-commerce. Requisitos: Apresentar produtos de API da agência, modal de detalhes ao clicar em cards. Funcionalidades:
Expansão e Manutenção: Estrutura facilita expansão e manutenção futura. Modal de Detalhes:
Conteúdo: Exibe detalhes do produto. Fechamento: Opções de fechamento incluem botão "X", clique externo e tecla "ESC".
Design para dispositivos móveis. Objetivo: Adaptar o menu para diferentes tamanhos de tela. Funcionalidade: Garante navegação eficaz em smartphones e tablets. Adaptação: Ajusta layout e interação para melhor usabilidade. Aprimoramento: Melhora a experiência do usuário em dispositivos móveis.
Styled-Components: Aplicados para estilização condicional de botões e elementos. Objetivo: Adaptação visual com base em estados ou condições. Flexibilidade: Estilos alterados dinamicamente conforme situação. Melhoria Estética: Contribui para uma aparência coesa e agradável. Renderização Condicional: Elementos da página exibidos conforme condições específicas. Otimização: Evita informações desnecessárias, otimizando a experiência do usuário.
O projeto foi organizado para adicionar novas páginas usando "react-router-dom". Pode usar a "context-api" ou até mesmo o Redux para projetos complexos.
Destaques:
Estrutura flexível para adicionar páginas via "react-router-dom". Gerenciamento de estado com "context-api" e opção de Redux. Modularidade garante expansão tranquila e evita conflitos. Pronto para evoluir e incorporar tecnologias futuras.
Realizado com muito carinho ❤️, espero que gostem do resultado.