ana-brajao / project-frontend

Project

Sejam bem vindos ao meu projeto.

Instalando dependências

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

Rodando localmente

Para rodar o projeto React execute o comando npm start ou yarn start. Esse comando irá iniciar o servidor de desenvolvimento e abrirá o projeto no navegador padrão.

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.

Compilar o projeto

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.

Testar o código

Execute o seguinte comando para testar o código do projeto:

npm run test
ou
yarn test
ou
pnpm test

Esses comandos irão baixar e instalar todas as dependências listadas no arquivo package.json do projeto.

Dependências: axios, react-modal, framer-motion

Desenvolvido em ReactJS

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:

Componentização: Projeto organizado em componentes separados por seções.

Expansão e Manutenção: Estrutura facilita expansão e manutenção futura. Modal de Detalhes:

Acionamento: Clicar em cards do carrossel de produtos.

Conteúdo: Exibe detalhes do produto. Fechamento: Opções de fechamento incluem botão "X", clique externo e tecla "ESC".

Menu Responsivo:

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.

Estilização Condicional e Renderização:

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.

Resumo

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.