Olá, sejam bem-vindos! Neste repositório foi construída uma Landing Page utilizando React (com Next.js) para o front-end e Express para o back-end.
Node.js
|
Express
|
NextJs
|
Clique para expandir
- Clone o projeto
git clone git@github.com:edmcorrea/landing-page-nextjs.git- Entre primeiro no diretório do projeto Landing Page
cd landing-page-nextjs- Entre no diretório Back-End do projeto
cd backend- Instale as dependências
npm installClique para expandir
Crie a conta no link: https://sendgrid.com/
-
Dentro da sua conta no SendGrid crie um Sender Verification acessando: Settings > Sender Authentication > Single Sender Verification e insira as informações solicitadas corretamente.
-
Ainda dentro da sua conta SendGrid crie uma API Keys acessando: Settings > API Key > Create API Key e insira as informações solicitadas corretamente.
-
Após criada a API Key, copie a chave e guarde, pois será utilizada na etapa seguinte.
-
Dentro do diretório backend, renomeie o arquivo .env.example para .env e insira a chave copiada anteriormente em SENDGRID_API_KEY. Além disso, insira o email informado da etapa Sender Verification em FROM_EMAIL.
-
Exemplo de arquivo
.enva ser utilizado:
APP_PORT=3001
SENDGRID_API_KEY=[INSIRA_AQUI_SUA_API_KEY_DO_SENDGRID]
FROM_EMAIL=[INSIRA_AQUI_SEU_EMAIL_UTILIZADO_NO_SENDGRID]Clique para expandir
- Execute a aplicação Back-end no Terminal que manteve aberto.
npm run dev- Em um novo Terminal, entre no diretório Front-End
cd howhow-project- Instale as dependências
npm install- Execute a aplicação Front-end
npm run devInicializado o servidor (terminal Back-End), a aplicação estará rodando no seguinte caminho: http://127.0.0.1:3001 ou http://localhost:3001 e a rota existente é apenas a /contact, responsável pela mensageria da aplicação.
Por sua vez, a aplicação Front-End estará rodando no caminho: http://127.0.0.1:3000 ou http://localhost:3000, desse modo, podendo ser também navegada.
O servidor Back-End em execução é responsável pela utilização do Formulário de Contato presente no final da página Front-End (http://localhost:3000). Nele, assim que um usuário insere os dados solicitados, o servidor é responsável por encaminhar essa mensagem para o e-mail cadastrado no site do SendGrid.
-
Replicação do site Howhow + Melhorias:Devido ao pouco tempo para a construção da página, e assim pouco tempo para fazer o seu Design no Figma, optou-se por fazer uma réplica do site da Howhow, implementando algumas melhorias e sugestões de implementação. -
Linguagem de Estilização:Por não informar a linguagem de estilização no teste técnico, optou-se por utilizar a linguagem de extensão do CSS, o SASS, por possuir maior domínio.
-
Implementação de novas rotas de navegação:A página tem um grande potencial de crescimento e melhorias contínuas. -
Implementação do Banco de Dados Back-End:Visto que a Howhow ẃ uma empresa com grandes potenciais e uma gama de clientes, uma implementação de página completa trará muitos holofotes aos clientes (Empresas e influenciadores). -
Estilização com Tailwindcss:A implementação padrão em estilização de projetos do NextJs é o Tailwindcss. Vale a pena agregar valores nessa linguagem, pois sua praticidade e simplicidade são notáveis. Além disso, a documentação da linguagem é clara e acessível. -
Página de Testemunhos:Devido a grande presença online da empresa, ela também possui muitos clientes satisfeitos. Com isso, o componente Testemunhos pode ser melhor aproveitado utilizando a mesma lógica porém com mais clientes espalhados no Mapa.
Se você tiver algum feedback, por favor nos deixe saber por meio de edm.correa@hotmail.com