My Clock App ⌚🖥

🖥 Projeto

Esse projeto é um pequeno dashboard pessoal inspirado no Momentum Dashboard, uma extensão para Chrome que muda o jeito como você vê novas abas do navegador.

💡 Motivação

A principal motivação foi estudar ReactJS, então conheci o Momentum Dashboard e me baseei nele para fazer a minha versão com essa tecnologia.

⚙️ Tecnologias

• ReactJS
• Styled Components
• Fetch API

✏ Layout

👁 Ver layout

📝 Duplicar layout

🛠 Funcionalidades

• Exibir hora no formato 24h
• Exibir mensagem dinâmica com base na hora do dia
• Exibir dia do ano
• Exibir clima
• Buscar imagens aleatórias do Unsplash e exibir pequena descrição
• Exibir uma frase aleatória

👨‍💻 Tasks técnicas

• Criar interface base
  • Grid
  • Separar components
• Exibir hora
  • Criar state para hora e atualizar a cada segundo
  • Formatar hora
• Calcular dia do ano
• Mensagem dinâmica com base na hora do dia
  • Criar função para recuperar hora do dia ('morning', 'afternoon', 'night')
  • Exibir ícone dinâmico com base na hora do dia
    • Criar componente switch para os icones
• Exibir clima usando a API do Open Weather Map com base na geolocalização atual
  • Criar função para recuperar latitude e longitude atual
  • Fazer requisição e recuperar temperatura e código do ícone
  • Exibir ícones dinâmicos com base no clima e hora do dia
    • Criar componente switch para os ícones
• Buscar imagens aleatórias usando API do Unsplash e uma descrição da imagem
  • Fazer requisição no useEffect e recuperar valor para um state
  • Passar URL da imagem via props para componente principal
  • Recuperar URL no Styled Compoents e colocar no background: url()
  • Exibir descrição da imagem
    • Criar função para converter descrição para title case
• Encontrar API para buscar de frases