Desafio Lacrei 🏳️🌈 | Front end ✨ 🌈
Esse projeto envolve em recriar um layout de acordo com o figma para o voluntariado da Lacrei.
✨ Tecnologias utilizadas
- Next JS / React
- Styled Components
- Typescript
- EsLint
- Prettier
- Husky (semantic-commit-emoji, commitlint)
- Cypress
🛠️ Detalhamento técnico
👷 Como rodar
# Clone o repositório e execute `npm install` para instalação de depedências
npm i
# Para executar no servidor local após a instalação das dependências
npm run dev
# Executar `npm run build` para realizar o build do projeto para produção
npm run build
# Executar `npm start` para rodar a aplicação em um servidor local após o build
npm start
# Executar testes do cypress
npm run e2e # O build será realizado, e inicializado um servidor em localhost:3000 e o cypress inicializado!
Template utilizado
Este projeto foi gerado a partir do template de styled-components, usando uma solução de estilo diferente de styled-jsx que também oferece suporte a estilos universais. Isso significa que podemos fornecer os estilos necessários para a primeira renderização no HTML e, em seguida, carregar o restante no cliente. Neste projeto está sendo utilizado styled-components.
Este projeto usa o SWC baseado em Rust em Next.js para melhor desempenho do que o Babel.
Tarefas ✅
- Replicar layout de acordo com figma
- Executar navegação entre as telas
- Fazer deploy da aplicação
- Responsividade (Mobile, Desktop e Widescreen)
- Testes para a aplicação
Desenvolvimento 🖥️
- Next.js
- Styled components
- Typescript
- Lib para Testes
Recursos
Figma: Acesse o figma para ter acesso ao layout
Aplicação: Confira como deve ficar a aplicação após ser finalizada