Aplicação web feita em React + TypeScript que exibe os dados do clima atual e a previsão para os próximos cinco dias. É possível buscar pelo nome da cidade, usar a localização atual e alternar entre tema claro e escuro. O fundo muda de acordo com o clima, e possui histórico das últimas 5 pesquisa.

• node_modules/

  • Pastas padrão do projeto Vite

• src/

  • É onde ficam os arquivos de código do projeto
  • api/
    • Pasta com a URL básica da API para exportação
  • components/
    • Pasta para guardar os componentes do projeto. Cada subpasta possui o index.tsx com o componente propriamente, um "nomeComponente".test.tsx com dois testes e um style.module.css com o CSS
  • Componentes:
    • CurrentWeather
    • Forecast
    • ForecastDay
    • Header
    • HistoryList
    • SearchForm
  • contexts/
    • Contextos gerais da aplicação separados por conteúdo
      • HistoryContext.tsx
      • ThemeContext.tsx
      • WeatherContext.tsx
  • hooks/
    • Hooks para os componentes
      • useHistory.tsx
      • useTheme.tsx
      • useWeather.tsx
  • interfaces/
    • Tipagens TypeScript para os dados
      • ICurrenteWeather.tsx
      • IForecast.tsx

• App.tsx/

  • Recebe as importações dos componentes e reune tudo em App

• main.ts/

  • Arquivo que recebe o App e exibe a aplicação

• .env

  • Arquivo com a apikey da aplicação

• Outros arquivos

  • index.html

    • Página HTML principal

  • package.json / package-lock.json

    • Arquivos de configuração e dependências do projeto

  • tsconfig.json / tsconfig.app.json / tsconfig.node.json

    • Arquivos de configuração do TypeScript

  • vite.config.ts

    • Arquivo de configuração do Vite

  • vitest-setup.js

    • Arquivo de configuração do Vitest

  • eslint.config.js

    • Configurações do ESLint

  • .prettierrc

    • Informações para o Prettier executar

  • .gitignore

  • .prettierignore

  • README.md

• HTML e CSS
• TypeScript
• React
• Vite
• Vitest
• Prettier
• Lint
• Axios
• Dotenv

• OpenWeatherMap

• Detecção automática de localização.
• Tema escuro/claro.
• Imagem de fundo dinâmica integrada com o clima atual.