Esta é uma resolução ao desafio Time Tracking Dashboard por Frontend Mentor.
Usuários devem ser capazes de:
- Exibir o layout ideal para o usuário dependendo do tamanho da tela do seu dispositivo
- Exibir hover states para todos os elementos interativos da página
- Mudar entre os status Diários, Semanais e Mensais
| Tela Desktop (1280px) | Tela Tablet (768px) | Tela Celular (375px) |
|---|---|---|
 |
 |
 |
- URL para o Site: Cloudfare Pages
- Marcação semântica HTML
- Propriedades personalizadas CSS
- CSS Grid
- Flexbox
- React
- Sass
Considerando que este foi meu primeito projet solo com React – à parte dos exercícios e desafios de vídeo-aulas de React – Eu aprendi muito! Eu especialmente busquei aplicar uma estrutura de arquivos para manter tudo muito organizado, o que foi algo novo para mim também.
Não há um grande desafio em usar o React com este projeto, mas esta era a intenção, já que se eu pegasse algo muito difícil, eu não seria capaz de focar em solidificar o básico. Mas eu adicionei alguns desafios, como gerar os componentes card dinamicamente, o qual o mais desafiador foi criar seus diferentes planos de fundo dinamicamente.
Eu baseei a estrutura de arquivos nesta vídeo-aula, a qual mostra uma ótima forma de organizar tudo, na minha opinião.