joelson
/
Ferramente-projeto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Ferramente-projeto/README.md

10 KiB
Raw Blame History

🚀 Ferramenta de Gestão de Projetos

Uma aplicação completa para gerenciamento de projetos com sistema de temporizador, kanban board, organizações e controle de tempo gasto em tarefas.

📋 Índice

✨ Funcionalidades

🔐 Sistema de Autenticação

  • Login via GitHub OAuth
  • Sessões persistentes
  • Controle de acesso baseado em autenticação
  • Logout seguro

🏢 Gestão de Organizações

  • Criar e gerenciar organizações
  • Adicionar/remover membros
  • Controle de permissões (Owner, Admin, Member)
  • Seleção de organização ativa
  • Persistência da organização selecionada

📊 Dashboard Principal

  • Visão geral de projetos ativos
  • Estatísticas em tempo real:
    • Projetos ativos
    • Cards ativos
    • Cards concluídos
    • Horas estimadas vs. horas produzidas
  • Filtros por status e busca por nome
  • Indicadores visuais de progresso

📋 Gestão de Projetos

  • Criar novos projetos
  • Definir datas de início e fim
  • Configurar URLs de repositório
  • Adicionar membros aos projetos
  • Editar informações do projeto
  • Visualizar estatísticas detalhadas

🎯 Sistema Kanban

  • 5 Status: A fazer, Em progresso, Em revisão, Testando, Concluído
  • Drag & Drop: Arrastar cards entre colunas
  • Cores por Status: Identificação visual rápida
  • Ordenação: Reorganizar cards dentro das colunas
  • Criação de Cards: Modal com campos essenciais
  • Edição de Cards: Interface completa para modificação

⏱️ Sistema de Temporizador

  • Controle Único: Apenas um card ativo por vez
  • Temporizador Global: Exibição centralizada no header
  • Controles: Play, Pause, Stop
  • Persistência: Tempo salvo automaticamente no banco
  • Indicadores Visuais: Card ativo destacado
  • Notificações: Feedback ao finalizar atividades
  • Histórico: Visualização de tempo gasto por card

📝 Gestão de Cards

  • Campos Obrigatórios: Nome, descrição, status, horas estimadas
  • Adição Manual de Tempo: Inserir tempo gasto manualmente
  • Histórico de Tempo: Visualizar todos os registros de tempo
  • Edição Completa: Modificar todos os campos
  • Validações: Controle de dados obrigatórios

👥 Gestão de Membros

  • Adicionar usuários aos projetos
  • Visualizar membros com avatares
  • Controle de permissões por projeto
  • Integração com sistema de organizações

📈 Estatísticas e Relatórios

  • Tempo total gasto por projeto
  • Comparação entre horas estimadas e reais
  • Indicadores visuais de progresso
  • Estatísticas por organização

🛠️ Tecnologias Utilizadas

Frontend

  • Next.js 15.4.1 - Framework React
  • React 19.1.0 - Biblioteca de interface
  • TypeScript - Tipagem estática
  • Tailwind CSS - Framework de estilização
  • Radix UI - Componentes acessíveis
  • Lucide React - Ícones
  • Sonner - Notificações

Backend

  • Next.js API Routes - API REST
  • Better Auth - Autenticação
  • Drizzle ORM - ORM para banco de dados
  • PostgreSQL - Banco de dados principal

Banco de Dados

  • Neon Database - PostgreSQL serverless
  • Drizzle Kit - Migrações e schema

Ferramentas

  • ESLint - Linting
  • Prettier - Formatação de código
  • Git - Controle de versão

📋 Pré-requisitos

  • Node.js 18+
  • npm ou yarn
  • PostgreSQL (ou Neon Database)
  • Conta GitHub (para OAuth)

🚀 Instalação

  1. Clone o repositório
git clone <url-do-repositorio>
cd ferramenta-projeto
  1. Instale as dependências
npm install
  1. Configure as variáveis de ambiente
cp .env.example .env.local
  1. Configure o banco de dados
npm run db:generate
npm run db:push
  1. Inicie o servidor de desenvolvimento
npm run dev

⚙️ Configuração

Variáveis de Ambiente

Crie um arquivo .env.local com as seguintes variáveis:

# Database
DATABASE_URL="postgresql://user:password@host:port/database"

# GitHub OAuth
GITHUB_CLIENT_ID="seu_github_client_id"
GITHUB_CLIENT_SECRET="seu_github_client_secret"

# Auth
BETTER_AUTH_URL="http://localhost:3000"
NEXT_PUBLIC_API_URL="http://localhost:3000"

# CORS (opcional)
NEXT_PUBLIC_CORS_ORIGIN="http://localhost:3000"

Configuração do GitHub OAuth

  1. Acesse GitHub Developer Settings
  2. Crie uma nova OAuth App
  3. Configure:
    • Homepage URL: http://localhost:3000
    • Authorization callback URL: http://localhost:3000/api/auth/callback/github
  4. Copie o Client ID e Client Secret para o .env.local

📖 Como Usar

1. Primeiro Acesso

  1. Acesse http://localhost:3000
  2. Clique em "Entrar com GitHub"
  3. Autorize o acesso à sua conta GitHub
  4. Você será redirecionado para o dashboard

2. Criar Organização

  1. No dashboard, clique em "Organizações"
  2. Clique em "Nova Organização"
  3. Preencha nome e descrição
  4. Clique em "Criar"

3. Criar Projeto

  1. Selecione uma organização
  2. Clique em "Novo Projeto"
  3. Preencha os dados do projeto
  4. Clique em "Criar"

4. Gerenciar Cards

  1. Acesse um projeto
  2. Clique em "Novo Card" para criar
  3. Preencha nome, descrição, status e horas estimadas
  4. Use drag & drop para mover cards entre colunas

5. Usar o Temporizador

  1. Clique no botão ▶️ em qualquer card
  2. O temporizador aparecerá no header
  3. Use ⏸️ para pausar e ▶️ para retomar
  4. Use ⏹️ para finalizar e salvar o tempo

6. Editar Cards

  1. Clique em qualquer card para editar
  2. Modifique os campos necessários
  3. Adicione tempo manualmente se necessário
  4. Visualize o histórico de tempo na aba "Tempo"

📁 Estrutura do Projeto

src/
├── app/                          # App Router (Next.js 13+)
│   ├── (controle)/              # Rotas protegidas
│   │   ├── dashboard/           # Dashboard principal
│   │   ├── organizations/       # Gestão de organizações
│   │   └── project/[id]/        # Página do projeto
│   ├── api/                     # API Routes
│   │   ├── auth/                # Autenticação
│   │   ├── createCard/          # Criar cards
│   │   ├── getProject/          # Buscar projetos
│   │   ├── organizations/       # Gestão de organizações
│   │   ├── saveTimeSpent/       # Salvar tempo
│   │   ├── updateCard/          # Atualizar cards
│   │   └── users/               # Gestão de usuários
│   ├── login/                   # Página de login
│   └── page.tsx                 # Página inicial
├── components/                  # Componentes reutilizáveis
│   ├── ui/                      # Componentes base (Radix UI)
│   └── *.tsx                    # Componentes customizados
├── context/                     # Contextos React
│   ├── authContext.tsx          # Contexto de autenticação
│   ├── organizationContext.tsx  # Contexto de organizações
│   └── timerContext.tsx         # Contexto do temporizador
├── db/                          # Configuração do banco
│   ├── index.ts                 # Conexão com banco
│   └── schema.ts                # Schema do banco
├── lib/                         # Utilitários e configurações
├── types/                       # Tipos TypeScript
└── utils/                       # Funções utilitárias

🔌 API Endpoints

Autenticação

  • POST /api/auth/signin - Login
  • POST /api/auth/signout - Logout
  • GET /api/auth/get-session - Verificar sessão

Organizações

  • GET /api/organizations - Listar organizações
  • POST /api/organizations - Criar organização
  • PUT /api/organizations/[id] - Editar organização
  • DELETE /api/organizations/[id] - Remover organização
  • GET /api/organizations/[id]/members - Listar membros
  • POST /api/organizations/[id]/members - Adicionar membro
  • DELETE /api/organizations/[id]/members/[userId] - Remover membro

Projetos

  • GET /api/getProject - Listar projetos
  • POST /api/getProject - Criar projeto
  • GET /api/getProject/[id] - Buscar projeto específico

Cards

  • POST /api/createCard - Criar card
  • PUT /api/updateCard - Atualizar card
  • PUT /api/updateCardStatus - Atualizar status
  • PUT /api/updateCardOrder - Atualizar ordem

Tempo

  • POST /api/saveTimeSpent - Salvar tempo gasto
  • GET /api/getTimeSpentHistory/[cardId] - Histórico de tempo

Usuários

  • GET /api/users - Listar usuários

🚀 Deploy

Vercel (Recomendado)

  1. Conecte o repositório ao Vercel

  2. Configure as variáveis de ambiente:

    • DATABASE_URL
    • GITHUB_CLIENT_ID
    • GITHUB_CLIENT_SECRET
    • BETTER_AUTH_URL
    • NEXT_PUBLIC_API_URL

  3. Deploy automático

git push origin main

Outras Plataformas

O projeto pode ser deployado em qualquer plataforma que suporte Next.js:

  • Netlify
  • Railway
  • Heroku
  • DigitalOcean App Platform

🛠️ Comandos Úteis

# Desenvolvimento
npm run dev              # Iniciar servidor de desenvolvimento
npm run build            # Build para produção
npm run start            # Iniciar servidor de produção
npm run lint             # Executar ESLint

# Banco de dados
npm run db:generate      # Gerar migrações
npm run db:push          # Aplicar migrações
npm run db:studio        # Abrir Drizzle Studio

🤝 Contribuição

  1. Fork o projeto
  2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
  3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
  4. Push para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

📄 Licença

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

🆘 Suporte

Para suporte, abra uma issue no repositório ou entre em contato através dos canais disponíveis.

Desenvolvido com ❤️ para facilitar a gestão de projetos e controle de tempo.