amazon-hacking · gabrielmatsan · May 28, 2025 · May 25, 2025 · May 25, 2025 · May 28, 2025
diff --git a/README-EN.md b/README-EN.md
@@ -0,0 +1,103 @@
+# 🌊 Weather Sync
+
+> Intelligent flood monitoring system with real-time notifications
+
+<div align="center">
+  <img src="https://img.shields.io/badge/Amazon%20Hacking-2025-orange?style=for-the-badge&logo=amazon" alt="Amazon Hacking 2025">
+  <img src="https://img.shields.io/badge/Axis-Climate-green?style=for-the-badge" alt="Climate Axis">
+  <img src="https://img.shields.io/badge/Status-In%20Development-yellow?style=for-the-badge" alt="Status">
+</div>
+
+## 📋 About the Project
+
+**Weather Sync** is an innovative solution developed during Amazon Hacking 2025 (Climate Axis) for intelligent monitoring of urban floods. The system allows users to track critical weather conditions in their favorite neighborhoods and receive instant alerts via email and WhatsApp when there is a risk of flooding.
+
+### 🎯 Key Features
+
+- 🌧️ **Real-Time Monitoring** - Continuous tracking of weather conditions
+- 📍 **Favorites System** - Add neighborhoods of interest for personalized monitoring
+- 📧 **Email Notifications** - Automatic alerts about critical conditions
+- 📱 **SMS via WhatsApp** - Instant notifications on your cell phone
+- 🚨 **Intelligent Alerts** - System that identifies flood risk patterns
+- 🎨 **Intuitive Interface** - Responsive and user-friendly dashboard
+
+## 🏗️ Architecture
+
+### Server
+- **Runtime**: [Bun](https://bun.sh/) - Ultra-fast JavaScript runtime
+- **Framework**: [Elysia](https://elysiajs.com/) - High-performance TypeScript web framework
+
+### Website
+- **Framework**: [React](https://react.dev/) - Library for user interfaces
+- **Build Tool**: [Vite](https://vitejs.dev/) - Modern and fast build tool
+- **Package Manager**: [npm](https://www.npmjs.com/) - Package manager
+
+### Infrastructure
+- **Monorepo**: [Turborepo](https://turbo.build/) - High-performance build system
+- **Package Manager**: [pnpm](https://pnpm.io/) - Efficient package manager
+- **Deploy**: [Pulumi](https://www.pulumi.com/) - Infrastructure as code
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+```bash
+# Install Node.js and npm
+# Download from: [https://nodejs.org/](https://nodejs.org/)
+```
+
+#### Install Bun
+```bash
+curl -fsSL https://bun.sh/install | bash
+```
+
+#### Install pnpm
+```bash
+npm install -g pnpm
+````
+
+### Installation
+
+- Clone the repository
+
+- Install the dependencies
+
+```bash
+pnpm install
+```
+
+### Configure the environment variables
+
+#### Copy the example files
+
+```bash
+cp .env.example .env
+```
+
+#### Configure your API keys
+#### - Weather API
+#### - Email credentials
+#### - WhatsApp token
+#### - Database settings
+
+
+Run the project
+
+```bash
+pnpm run dev
+```
+
+```
+📁 Project structure
+weather-sync/
+├── apps/
+│ ├── server/ # API Elysia + Bun
+│ └── website/ # React + Vite
+├── packages/
+│ ├── shared/ # Shared types and utilities
+│ └── config/ # Project settings
+├── infra/ # Pulumi settings
+├── turbo.json # Turborepo configuration
+├── package.json
+└── pnpm-workspace.yaml
+```
diff --git a/README.md b/README.md
@@ -0,0 +1,102 @@
+# 🌊 Weather Sync
+
+> Sistema inteligente de monitoramento de enchentes com notificações em tempo real
+
+<div align="center">
+  <img src="https://img.shields.io/badge/Amazon%20Hacking-2025-orange?style=for-the-badge&logo=amazon" alt="Amazon Hacking 2025">
+  <img src="https://img.shields.io/badge/Eixo-Climático-green?style=for-the-badge" alt="Eixo Climático">
+  <img src="https://img.shields.io/badge/Status-Em%20Desenvolvimento-yellow?style=for-the-badge" alt="Status">
+</div>
+
+## 📋 Sobre o Projeto
+
+O **Weather Sync** é uma solução inovadora desenvolvida durante o Amazon Hacking 2025 (Eixo Climático) para monitoramento inteligente de enchentes urbanas. O sistema permite que usuários acompanhem condições meteorológicas críticas em seus bairros favoritos e recebam alertas instantâneos via email e WhatsApp quando há risco de alagamentos.
+
+### 🎯 Principais Funcionalidades
+
+- 🌧️ **Monitoramento em Tempo Real** - Acompanhamento contínuo das condições meteorológicas
+- 📍 **Sistema de Favoritos** - Adicione bairros de interesse para monitoramento personalizado
+- 📧 **Notificações por Email** - Alertas automáticos sobre condições críticas
+- 📱 **SMS via WhatsApp** - Notificações instantâneas no seu celular
+- 🚨 **Alertas Inteligentes** - Sistema que identifica padrões de risco de enchente
+- 🎨 **Interface Intuitiva** - Dashboard responsivo e amigável
+
+## 🏗️ Arquitetura
+
+### Server
+- **Runtime**: [Bun](https://bun.sh/) - JavaScript runtime ultrarrápido
+- **Framework**: [Elysia](https://elysiajs.com/) - Framework web TypeScript de alta performance
+
+### Website  
+- **Framework**: [React](https://react.dev/) - Biblioteca para interfaces de usuário
+- **Build Tool**: [Vite](https://vitejs.dev/) - Ferramenta de build moderna e rápida
+- **Package Manager**: [npm](https://www.npmjs.com/) - Gerenciador de pacotes
+
+### Infraestrutura
+- **Monorepo**: [Turborepo](https://turbo.build/) - Sistema de build de alta performance
+- **Package Manager**: [pnpm](https://pnpm.io/) - Gerenciador de pacotes eficiente
+- **Deploy**: [Pulumi](https://www.pulumi.com/) - Infraestrutura como código
+
+## 🚀 Começando
+
+### Pré-requisitos
+
+```bash
+# Instalar Node.js e npm
+# Baixe em: https://nodejs.org/
+```
+
+#### Instalar Bun
+```bash
+curl -fsSL https://bun.sh/install | bash
+```
+
+#### Instalar pnpm
+```bash
+npm install -g pnpm
+````
+
+### Instalação
+
+- Clone o repositório
+
+- Instale as dependências
+
+```bash
+pnpm install
+```
+
+### Configure as variáveis de ambiente
+
+#### Copie os arquivos de exemplo
+
+```bash
+cp .env.example .env
+```
+
+#### Configure suas chaves de API
+#### - API de clima
+#### - Credenciais de email
+#### - Token do WhatsApp
+#### - Configurações do banco de dados
+
+Execute o projeto
+
+```bash
+pnpm run dev
+```
+
+```
+📁 Estrutura do Projeto
+weather-sync/
+├── apps/
+│   ├── server/           # API Elysia + Bun
+│   └── website/          # React + Vite
+├── packages/
+│   ├── shared/           # Tipos e utilitários compartilhados
+│   └── config/           # Configurações do projeto
+├── infra/                # Configurações Pulumi
+├── turbo.json           # Configuração Turborepo
+├── package.json
+└── pnpm-workspace.yaml
+```
diff --git a/apps/website/src/App.tsx b/apps/website/src/App.tsx
@@ -3,23 +3,21 @@ import { Routes, Route } from "react-router-dom";
 import Login from "./Login";
 import Register from "./Register";
 import Home from "./Home";
-import LandingPage from "./LandingPage"; 
+import LandingPage from "./LandingPage";
+import PostLoginLanding from "./PostLoginLanding";
+import Dashboard from "./Dashboard";
 
 export default function App(): JSX.Element {
   return (
-    <div > {/* Container do Bootstrap para centralizar */}
-
-      {/*<nav className="nav justify-content-center mb-4 navbar-climate">
-        <Link to="/login" className="nav-link">Login</Link>
-        <Link to="/register" className="nav-link">Registrar</Link>
-        <Link to="/home" className="nav-link">Dados</Link> {/* Adicione um link para a Home *
-      </nav>*/}
+    <div>
       <Routes>
-         <Route path="/" element={<LandingPage />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/register" element={<Register />} />
-      <Route path="/home" element={<Home />} />
-      <Route path="*" element={<p className="text-danger p-4">Página não encontrada</p>} />
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/welcome" element={<PostLoginLanding />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="*" element={<p className="text-danger p-4">Página não encontrada</p>} />
       </Routes>
     </div>
   );

diff --git a/apps/website/src/Dashboard.tsx b/apps/website/src/Dashboard.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import logoWeatherSync from "./assets/logo-weather-sync.png";
+
+export default function Dashboard(): JSX.Element {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("userName");
+    navigate("/login");
+  };
+
+  return (
+    <div className="min-vh-100" style={{ backgroundColor: '#e6f7ff' }}>
+      {/* Header Section */}
+      <div className="container-fluid text-white py-5" style={{ backgroundColor: '#1890ff' }}>
+        <div className="container">
+          <div className="row justify-content-center text-center">
+            <div className="col-lg-8">
+              <div className="mb-4">
+                <img 
+                  src={logoWeatherSync} 
+                  alt="Weather Sync Logo" 
+                  className="img-fluid mb-3"
+                  style={{ maxHeight: '100px', width: 'auto' }}
+                />
+              </div>
+              <h1 className="display-4 fw-bold mb-4 text-white">Dashboard Meteorológico</h1>
+              <p className="lead fs-5 mb-0">
+                Visualize dados e estatísticas do clima das suas regiões favoritas
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Coming Soon Section */}
+      <div className="container py-5">
+        <div className="row justify-content-center">
+          <div className="col-lg-8">
+            <div className="card border-0 shadow-lg">
+              <div className="card-body text-center p-5">
+                <div className="mb-4">
+                  <span className="display-1">🚧</span>
+                </div>
+                <h3 className="fw-bold mb-3" style={{ color: '#1890ff' }}>
+                  Dashboard em Desenvolvimento
+                </h3>
+                <p className="text-muted fs-5 mb-4">
+                  Estamos trabalhando para trazer recursos incríveis para você acompanhar 
+                  o clima de forma ainda mais detalhada e intuitiva.
+                </p>
+
+                <div className="row g-3 mb-4">
+                  <div className="col-md-4">
+                    <div className="card border-0" style={{ backgroundColor: '#f8f9fa' }}>
+                      <div className="card-body p-3">
+                        <h6 className="fw-semibold" style={{ color: '#1890ff' }}>
+                          📊 Gráficos Interativos
+                        </h6>
+                        <small className="text-muted">
+                          Visualize tendências climáticas
+                        </small>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="col-md-4">
+                    <div className="card border-0" style={{ backgroundColor: '#f8f9fa' }}>
+                      <div className="card-body p-3">
+                        <h6 className="fw-semibold" style={{ color: '#1890ff' }}>
+                          🌡️ Análises Detalhadas
+                        </h6>
+                        <small className="text-muted">
+                          Dados meteorológicos completos
+                        </small>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="col-md-4">
+                    <div className="card border-0" style={{ backgroundColor: '#f8f9fa' }}>
+                      <div className="card-body p-3">
+                        <h6 className="fw-semibold" style={{ color: '#1890ff' }}>
+                          📈 Previsões Avançadas
+                        </h6>
+                        <small className="text-muted">
+                          Alertas personalizados
+                        </small>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="d-flex flex-column flex-sm-row justify-content-center gap-3">
+                  <button
+                    className="btn btn-lg fw-semibold"
+                    style={{ backgroundColor: '#1890ff', borderColor: '#1890ff', color: 'white' }}
+                    onClick={() => navigate("/welcome")}
+                  >
+                    🏠 Voltar ao Início
+                  </button>
+
+                  <button
+                    className="btn btn-outline-secondary btn-lg fw-semibold"
+                    style={{ borderColor: '#1890ff', color: '#1890ff' }}
+                    onClick={() => navigate("/home")}
+                  >
+                    ⚙️ Configurar Bairros
+                  </button>
+
+                  <button
+                    className="btn btn-outline-danger btn-lg fw-semibold"
+                    onClick={handleLogout}
+                  >
+                    🚪 Sair da Conta
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="py-4" style={{ backgroundColor: '#262626', color: '#fff' }}>
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-md-6">
+              <p className="mb-0">
+                <strong>Weather Sync</strong> - Seu companheiro meteorológico
+              </p>
+            </div>
+            <div className="col-md-6 text-md-end">
+              <small className="text-muted">
+                © 2025 Weather Sync. Todos os direitos reservados.
+              </small>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}