📝 Checkered

Um aplicativo moderno de anotações com sincronização em tempo real, suporte a múltiplos tipos de conteúdo e interface intuitiva.

✨ Funcionalidades

📝 Tipos de Notas

• Notas de texto - Crie anotações rápidas e simples
• Notas com imagens - Faça upload de imagens
• Desenhos - Crie desenhos à mão livre com canvas interativo
• Listas de tarefas - Organize tarefas com checklists marcáveis
• Preview de links - Cole URLs e veja previews automáticos

🎨 Organização

• Fixar notas - Mantenha notas importantes sempre no topo
• Redimensionar cards - Alterne entre tamanho normal e largo
• Grid responsivo - Layout adaptável para mobile e desktop
• Expandir cards - Pressione e segure para visualização completa

🔄 Sincronização em Tempo Real

• Atualizações automáticas a cada 3 segundos
• Sincronização entre múltiplos dispositivos
• Indicador visual de sincronização
• Updates otimistas para resposta instantânea

🎭 Interface

• Landing page na primeira visita
• Background quadriculado animado
• Animações suaves com Framer Motion
• Design responsivo e moderno
• PWA Ready

🚀 Tecnologias

• Next.js 15 - Framework React com App Router
• React 19 - Biblioteca UI com hooks modernos
• TypeScript - Type safety e melhor DX
• Tailwind CSS 4 - Estilização utilitária
• Framer Motion - Animações fluidas
• MongoDB - Banco de dados NoSQL
• Onest Font - Tipografia moderna

📦 Instalação

# Clone o repositório
git clone <seu-repositorio>

# Instale as dependências
npm install
# ou
yarn install
# ou
pnpm install

⚙️ Configuração

1. Crie um arquivo .env.local na raiz do projeto:

MONGODB_URI=sua_connection_string_do_mongodb

2. Configure seu banco de dados MongoDB (local ou MongoDB Atlas)

🏃 Executando o Projeto

# Modo desenvolvimento
npm run dev

# Build para produção
npm run build

# Iniciar produção
npm start

Abra http://localhost:3000 no navegador.

📁 Estrutura do Projeto

checkered/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/           # NextAuth configuração
│   │   │   ├── notes/          # API REST para notas
│   │   │   └── link-preview/   # API para preview de links
│   │   ├── privacy/            # Política de Privacidade
│   │   ├── terms/              # Termos de Serviço
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── Card.tsx            # Componente de nota
│   │   ├── Input.tsx           # Input de criação
│   │   ├── LandingPage.tsx     # Página inicial
│   │   ├── DrawingCanvas.tsx   # Canvas de desenho
│   │   ├── TasksModal.tsx      # Modal de tarefas
│   │   ├── SyncIndicator.tsx   # Indicador de sync
│   │   └── ...
│   ├── hooks/
│   │   └── useMongoDB.ts       # Hook de sincronização
│   └── lib/
│       └── linkPreview.ts      # Lógica de preview
├── public/
│   ├── manifest.json           # PWA manifest
│   └── ...
└── package.json

🎯 Como Usar

1. Criar nota de texto: Digite no input e pressione Enter ou clique na seta
2. Adicionar imagem/desenho/tarefa: Clique no ícone + ao lado do input
3. Fixar nota: Expanda o card e clique no ícone de pin no menu
4. Redimensionar: Expanda o card e use o switch de tamanho
5. Copiar texto: Toque rápido em uma nota de texto
6. Deletar: Expanda o card e clique no ícone de lixeira

🔧 API Endpoints

• GET /api/notes - Lista todas as notas
• POST /api/notes - Cria uma nova nota
• PUT /api/notes/[id] - Atualiza uma nota
• DELETE /api/notes/[id] - Deleta uma nota
• GET /api/link-preview?url=... - Obtém preview de um link

📱 PWA

O app está configurado como Progressive Web App. Para instalar:

1. Acesse o site no navegador
2. Clique em "Instalar" ou "Adicionar à tela inicial"
3. Use como app nativo!