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

377 lines
10 KiB
Markdown
Raw Permalink 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](#-funcionalidades)
- [Tecnologias Utilizadas](#-tecnologias-utilizadas)
- [Pré-requisitos](#-pré-requisitos)
- [Instalação](#-instalação)
- [Configuração](#-configuração)
- [Como Usar](#-como-usar)
- [Estrutura do Projeto](#-estrutura-do-projeto)
- [API Endpoints](#-api-endpoints)
- [Deploy](#-deploy)
## ✨ 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**
```bash
git clone <url-do-repositorio>
cd ferramenta-projeto
```
2. **Instale as dependências**
```bash
npm install
```
3. **Configure as variáveis de ambiente**
```bash
cp .env.example .env.local
```
4. **Configure o banco de dados**
```bash
npm run db:generate
npm run db:push
```
5. **Inicie o servidor de desenvolvimento**
```bash
npm run dev
```
## ⚙️ Configuração
### Variáveis de Ambiente
Crie um arquivo `.env.local` com as seguintes variáveis:
```env
# 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](https://github.com/settings/developers)
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**
```bash
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
```bash
# 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.**
Reference in New Issue View Git Blame Copy Permalink