Log inSign up
diegoivo
diegoivotodo-app
Public
Like
todo-app
Code
5
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Search
README.md

CONVERSION UX - Gerenciador de Tarefas

Uma plataforma moderna e intuitiva para gerenciar tarefas com máxima eficiência, seguindo a identidade visual da Conversion UX.

✨ Recursos

  • 🎨 Design Moderno: Interface limpa seguindo a identidade visual da Conversion UX
  • 🔐 Autenticação Segura: Login via Google OAuth através do LastLogin
  • 📋 Gerenciamento Completo: Criar, editar, completar e excluir tarefas
  • 📅 Calendário Integrado: Definir datas de vencimento para tarefas
  • 🎯 Sistema de Prioridades: Alta, média e baixa prioridade com indicadores visuais
  • 📂 Categorização: Organize por trabalho, pessoal, urgente ou ideias
  • 📊 Dashboard: Estatísticas e resumo de produtividade
  • 🔍 Filtros Avançados: Filtre por status, categoria e prioridade
  • 📱 Responsivo: Funciona perfeitamente em desktop e mobile

🏗️ Estrutura do Projeto

├── backend/
│   ├── index.ts             # Servidor Hono com API REST
│   └── README.md
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Componente principal
│   │   ├── LandingPage.tsx  # Página inicial
│   │   ├── TodoList.tsx     # Lista de tarefas
│   │   └── TodoForm.tsx     # Formulário de tarefas
│   ├── index.html           # Template HTML
│   ├── index.tsx            # Entry point React
│   └── README.md
├── shared/
│   ├── types.ts             # Tipos TypeScript compartilhados
│   └── README.md
└── README.md

🚀 API Endpoints

  • GET / - Página inicial (landing page ou app)
  • GET /api/todos - Buscar tarefas do usuário
  • POST /api/todos - Criar nova tarefa
  • PUT /api/todos/:id - Atualizar tarefa
  • DELETE /api/todos/:id - Excluir tarefa

🔧 Tecnologias

  • Backend: Hono.js + TypeScript
  • Frontend: React 18.2.0 + TypeScript
  • Estilização: CSS customizado + TailwindCSS
  • Armazenamento: Val Town Blob Storage
  • Autenticação: LastLogin (Google OAuth)
  • Hospedagem: Val Town

🎨 Design System

Cores

  • Azul Principal: #4F7CFF
  • Azul Hover: #3B5FE6
  • Fundo: #fafafa
  • Cards: #ffffff
  • Bordas: #e5e7eb

Componentes

  • Botões: Estilo conversion-button com hover effects
  • Inputs: Estilo conversion-input com focus states
  • Cards: Estilo conversion-card com sombras sutis
  • Logo: Ícone "C" com badge BETA

📋 Funcionalidades das Tarefas

Campos da Tarefa

  • Título: Obrigatório, descrição principal
  • Descrição: Opcional, detalhes adicionais
  • Prioridade: Alta (🔴), Média (🟡), Baixa (🟢)
  • Categoria: Trabalho (💼), Pessoal (👤), Urgente (🚨), Ideias (💡)
  • Data de Vencimento: Opcional, com indicador de atraso
  • Status: Pendente ou Concluída

Recursos Avançados

  • Ordenação Inteligente: Por status, prioridade e data
  • Filtros: Por status e categoria
  • Indicadores Visuais: Cores por prioridade, alertas de atraso
  • Estatísticas: Contadores de tarefas e progresso

🔐 Autenticação

Utiliza o LastLogin para autenticação segura via Google OAuth:

  • Login automático via header X-LastLogin-Email
  • Logout através de /auth/logout
  • Dados isolados por usuário no blob storage

📱 Responsividade

  • Desktop: Layout em grid com sidebar
  • Tablet: Layout adaptativo
  • Mobile: Layout em coluna única
  • Componentes: Todos otimizados para touch

🚀 Como Executar

  1. Abra o arquivo /backend/index.ts
  2. Execute como HTTP trigger
  3. Acesse a URL gerada
  4. Faça login com sua conta Google
  5. Comece a gerenciar suas tarefas!

📈 Métricas

O dashboard exibe:

  • Total de tarefas
  • Tarefas concluídas
  • Tarefas pendentes
  • Percentual de conclusão
  • Distribuição por prioridade
Code