Skip to content

thiagooshiro/weather-control

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
backend
backend
 
 
frontend
frontend
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
docker-compose.dev.yml
docker-compose.dev.yml
 
 
docker-compose.yml
docker-compose.yml
 
 

Repository files navigation

🌤️ Weather Control

React Node.js PostgreSQL Express Material-UI

🌍 Aplicação Full-Stack de Previsão do Tempo

Plataforma moderna que permite visualizar previsões climáticas baseadas na localização do usuário ou buscas por cidade/país.

📋 Sobre o Projeto

O Weather Control é uma aplicação full-stack desenvolvida para demonstrar habilidades em desenvolvimento moderno com React, Node.js e PostgreSQL. A plataforma oferece uma experiência completa de previsão do tempo com autenticação de usuários, geolocalização automática e histórico de buscas.

🎯 Objetivo

Desenvolver uma aplicação que demonstre:

  • Arquitetura bem estruturada entre frontend e backend
  • Boas práticas em desenvolvimento web moderno
  • Integração com APIs externas
  • Autenticação segura com JWT
  • Performance otimizada com cache
  • Testes abrangentes
  • UX/UI moderna e responsiva

✨ Funcionalidades Principais

🔐 Sistema de Autenticação

  • Registro e login de usuários
  • Autenticação JWT segura
  • Proteção de rotas no frontend
  • Validação de dados de entrada
  • Rate limiting para segurança

🌤️ Previsão do Tempo

  • Dados em tempo real da OpenWeatherMap API
  • Busca automática baseada na geolocalização
  • Busca manual por cidade ou país
  • Previsão de 5 dias com detalhes completos
  • Interface intuitiva com Material-UI

📍 Geolocalização

  • Detecção automática da localização atual
  • Geocoding reverso (coordenadas → cidade)
  • Tratamento de erros robusto
  • Fallback para busca manual

📚 Histórico de Buscas

  • Armazenamento das últimas 5 buscas por usuário
  • Prevenção de duplicatas inteligente
  • Interface interativa para refazer buscas
  • Scroll automático para melhor UX

⚡ Performance e Segurança

  • Cache em memória para otimização
  • Rate limiting por tipo de endpoint
  • Validação rigorosa de dados
  • Headers de segurança configurados

🛠️ Stack Tecnológica

Frontend

  • React 19.1.1 - Biblioteca principal
  • Vite 7.1.6 - Build tool e dev server
  • Material-UI 7.3.2 - Componentes de interface
  • React Router DOM 7.9.1 - Roteamento
  • Axios 1.12.2 - Cliente HTTP
  • Context API - Gerenciamento de estado

Backend

  • Node.js 18+ - Runtime JavaScript
  • Express 5.1.0 - Framework web
  • PostgreSQL 15+ - Banco de dados
  • Sequelize 6.37.7 - ORM
  • JWT - Autenticação
  • bcryptjs - Criptografia de senhas

APIs Externas

  • OpenWeatherMap - Dados climáticos e geocoding reverso

Desenvolvimento

  • Jest 30.1.3 - Framework de testes
  • ESLint - Linting de código
  • Git - Controle de versão

🚀 Como Executar o Projeto

Pré-requisitos

  • Node.js (versão 18 ou superior) - ou
  • Docker e Docker Compose - recomendado
  • PostgreSQL (versão 15 ou superior) - se não usar Docker
  • npm ou yarn - se não usar Docker
  • Chave da API OpenWeatherMap

1. Clone o Repositório

git clone https://github.com/thiagooshiro/weather-control.git
cd weather-control

🐳 Execução com Docker (Recomendado)

2. Configuração das Variáveis de Ambiente

# Copiar arquivo de exemplo
cp .env.example .env

# Editar com suas configurações
# Windows: notepad .env
# Linux/Mac: nano .env
# Ou use seu editor preferido (VS Code, etc.)

3. Executar com Docker Compose

# Produção
docker-compose up -d

# Desenvolvimento
docker-compose -f docker-compose.dev.yml up -d

4. Acessar a Aplicação

🔧 Execução Manual (Sem Docker)

2. Configuração do Backend

# Navegar para o backend
cd backend

# Instalar dependências
npm install

# Configurar variáveis de ambiente
cp .env.example .env
# Editar o arquivo .env com suas configurações

# Criar banco de dados
createdb weathercontrol

# Sincronizar banco de dados
npm run sync-db

# Executar em modo de desenvolvimento
npm run dev

3. Configuração do Frontend

# Navegar para o frontend (em outro terminal)
cd frontend

# Instalar dependências
npm install

# Executar em modo de desenvolvimento
npm run dev

4. Acessar a Aplicação

📁 Estrutura do Projeto

weather-control/
├── frontend/                 # Aplicação React
│   ├── src/
│   │   ├── components/       # Componentes reutilizáveis
│   │   ├── contexts/         # Context API
│   │   ├── hooks/            # Custom hooks
│   │   ├── pages/            # Páginas da aplicação
│   │   ├── services/         # Serviços e APIs
│   │   └── App.jsx           # Componente principal
│   ├── package.json
│   └── README.md
├── backend/                  # API Node.js
│   ├── config/               # Configurações
│   ├── controllers/          # Controladores
│   ├── middleware/           # Middlewares
│   ├── models/               # Modelos do banco
│   ├── routes/               # Rotas da API
│   ├── services/             # Serviços externos
│   ├── tests/                # Testes
│   ├── index.js              # Ponto de entrada
│   ├── package.json
│   └── README.md
├── .gitignore
└── README.md                 # Este arquivo

🔧 Configuração Detalhada

Variáveis de Ambiente (Backend)

# Banco de Dados
DB_NAME=weathercontrol
DB_USER=postgres
DB_PASSWORD=minhasenha123
DB_HOST=localhost
DB_PORT=5432
DB_DIALECT=postgres

# JWT
JWT_SECRET=meu_jwt_secret_super_seguro_aqui_123456

# OpenWeatherMap API
OPENWEATHER_API_KEY=sua_chave_da_api_openweathermap

# Servidor
PORT=5001
NODE_ENV=development

Chave da API OpenWeatherMap

  1. Acesse OpenWeatherMap
  2. Crie uma conta gratuita
  3. Gere uma API key
  4. Adicione no arquivo .env do backend

🧪 Testes

Backend

cd backend
npm test                # Executar todos os testes
npm run test:watch      # Modo watch
npm run test:coverage   # Com coverage

Frontend

cd frontend
npm test                # Executar testes
npm run test:watch      # Modo watch

📊 Funcionalidades Detalhadas

🔐 Autenticação

  • Registro: Nome, email e senha (mín. 6 caracteres)
  • Login: Email e senha
  • JWT: Token com expiração de 30 dias
  • Proteção: Rotas protegidas no frontend
  • Validação: Email único e senha segura

🌤️ Clima

  • Tempo atual: Temperatura, umidade, vento, pressão
  • Previsão: 5 dias com dados detalhados
  • Ícones: Representação visual do clima
  • Idioma: Dados em português brasileiro
  • Cache: 10 minutos para otimizar performance

📍 Geolocalização

  • Automática: Detecção da localização atual
  • Geocoding: Coordenadas → nome da cidade
  • Fallback: Busca manual em caso de erro
  • Permissões: Tratamento de permissões negadas

📚 Histórico

  • Armazenamento: Últimas 5 buscas por usuário
  • Prevenção: Duplicatas por cidade/país
  • Atualização: Dados atualizados automaticamente
  • Interface: Cards clicáveis para refazer busca

🔒 Segurança

Backend

  • JWT Tokens com expiração
  • Criptografia de senhas com bcryptjs
  • Rate Limiting por endpoint
  • Validação rigorosa de dados
  • CORS configurado
  • Headers de segurança

Frontend

  • Proteção de rotas com ProtectedRoute
  • Validação de formulários
  • Sanitização de dados
  • Tratamento de erros sem vazar informações

⚡ Performance

Otimizações

  • Cache em memória para dados climáticos
  • Rate limiting para prevenir abuso
  • Lazy loading de componentes
  • Debounce em buscas
  • Compressão de respostas

Métricas

  • Tempo de resposta < 200ms (cache hit)
  • Throughput de 100 req/min
  • Uso de memória otimizado
  • Bundle size otimizado

🎨 Interface do Usuário

Design

  • Material-UI para componentes
  • Responsivo para mobile e desktop
  • Tema moderno e intuitivo
  • Loading states em todas as operações
  • Feedback visual para ações do usuário

Experiência

  • Navegação intuitiva entre páginas
  • Formulários com validação em tempo real
  • Mensagens de erro amigáveis
  • Scroll automático para melhor UX
  • Estados de loading claros

📈 Arquitetura

Frontend (React)

src/
├── components/     # Componentes reutilizáveis
├── contexts/       # Estado global (AuthContext)
├── hooks/          # Lógica reutilizável
├── pages/          # Páginas da aplicação
├── services/       # Comunicação com API
└── App.jsx         # Roteamento principal

Backend (Node.js)

backend/
├── controllers/    # Lógica de negócio
├── middleware/     # Middlewares personalizados
├── models/         # Modelos do banco
├── routes/         # Definição de rotas
├── services/       # Serviços externos
└── index.js        # Servidor principal

🚀 Deploy

Requisitos de Produção

  • Node.js 18+
  • PostgreSQL 15+
  • PM2 (recomendado)
  • Nginx (proxy reverso)

Variáveis de Ambiente (Produção)

NODE_ENV=production
PORT=5001
DB_HOST=meu_host_producao
DB_PASSWORD=senha_super_segura_producao
JWT_SECRET=jwt_secret_super_seguro_producao
OPENWEATHER_API_KEY=minha_chave_producao_openweathermap

🤝 Contribuição

Como Contribuir

  1. Fork o repositório
  2. Crie uma branch para sua feature
  3. Implemente suas mudanças
  4. Adicione testes
  5. Execute todos os testes
  6. Commit suas mudanças
  7. Push para a branch
  8. Abra um Pull Request

Padrões de Código

  • ESLint configurado
  • Conventional Commits para mensagens
  • Testes obrigatórios para novas features
  • Documentação atualizada

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Desenvolvedor

Weather Control Team - Desenvolvido para demonstrar habilidades em desenvolvimento full-stack moderno.

🎯 Projeto Completo e Funcional

Todos os requisitos implementados com boas práticas de desenvolvimento

📁 Repositório • 🐛 Issues • 🔀 Pull Requests

React + Node.js + PostgreSQL + OpenWeatherMap API

Weather Control - 2025

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages