Projeto de Gerenciamento de Projetos e Tarefas

Este é um projeto de gerenciamento de projetos e tarefas utilizando Next.js, com autenticação, gerenciamento de projetos e tarefas, e integração com backend. O projeto também inclui funcionalidades para o upload de imagens e melhorias visuais.

Índice

• Índice
• Configuração Inicial
• Autenticação
• Gerenciamento de Projetos e Tarefas
• Conexão com o Backend
• Integração Frontend e Backend
• Armazenamento de Imagens
• Melhoria Visual e UX
• Funcionalidades Extras (Opcional)
• Preparação da Entrega
• Como Executar o Projeto
• Deploy no Vercel
• Aprenda Mais

Configuração Inicial

1. Iniciar o projeto Next.js:

   npx create-next-app@latest

2. Configuração do TypeScript: Instale o TypeScript e os tipos necessários:

   npm install typescript @types/react @types/node

   Renomeie os arquivos .js para .ts e .tsx conforme necessário e configure o TypeScript.

3. Configuração do GitHub: Crie um repositório no GitHub para versionar o projeto e faça os commits iniciais.

Autenticação

1. Criação do sistema de login e cadastro:
   • Implemente páginas de cadastro e login de usuários.
   • Use bcrypt para criptografar senhas.
   • Utilize autenticação JWT para controle de sessão.
   • Garanta que o cadastro salve nome, foto, email e senha do usuário.

Gerenciamento de Projetos e Tarefas

1. Criação do CRUD de Projetos:

   • Desenvolva uma interface para criação, visualização, edição e remoção de projetos.
   • Cada projeto deve ter nome e descrição.

2. Criação do CRUD de Tarefas:

   • Para cada projeto, crie tarefas com nome, descrição, responsável (usuário), status e data de entrega.
   • Garanta que as tarefas possam ser atribuídas a usuários diferentes.

Conexão com o Backend

1. Configuração do backend com Node.js:
   • Configure o backend com Express ou Nest.js.
   • Configure a conexão com o banco de dados MySQL usando Prisma ou TypeORM.
   • Garanta que o backend ofereça endpoints para a gestão de projetos e tarefas, além de autenticação.

Integração Frontend e Backend

1. Integração via API:
   • Conecte o frontend de Next.js com o backend, fazendo chamadas às APIs para manipulação de dados (CRUD de projetos/tarefas, autenticação de usuários).

Armazenamento de Imagens

1. Salvamento de Imagens:
   • Implemente o upload de fotos de perfil dos usuários e salve no banco de dados como BLOB ou em um diretório local.

Melhoria Visual e UX

1. Design Clean:
   • Crie um design agradável e intuitivo para o usuário, garantindo que a interface seja visualmente atraente.

Funcionalidades Extras (Opcional)

1. Relatórios e Notificações:
   • Se possível, implemente relatórios sobre o status dos projetos e notificações para eventos importantes (ex. data de entrega próxima).

Preparação da Entrega

1. Dump do Banco de Dados:

   • Gere e adicione o dump do banco de dados no repositório.

2. Commit e Versionamento:

   • Garanta que o projeto esteja versionado corretamente no GitHub com commits organizados.

Como Executar o Projeto

1. Rodar o Banco de Dados e Migrations:

   npx prisma migrate dev --name init --schema ./backend/prisma/schema.prisma

2. Compilar o TypeScript:

   npx tsc

3. Iniciar o Servidor:

   node dist/backend/server.js

4. Iniciar o Servidor de Desenvolvimento:

   npm run dev
   # ou
   yarn dev
   # ou
   pnpm dev
   # ou
   bun dev

   Abra http://localhost:3000 com seu navegador para ver o resultado.

Deploy no Vercel

O jeito mais fácil de implantar seu app Next.js é usar a Plataforma Vercel, criada pelos criadores do Next.js.

Confira nossa documentação de deploy do Next.js para mais detalhes.

Aprenda Mais

Para aprender mais sobre o Next.js, dê uma olhada nos seguintes recursos:

• Documentação do Next.js - conheça as funcionalidades e a API do Next.js.
• Aprenda Next.js - um tutorial interativo sobre Next.js.

Você pode conferir o repositório do Next.js no GitHub - seus comentários e contribuições são bem-vindos!" > README.md