🇺🇸 English | 🇧🇷 Português

Um roadmap interativo e inteligente que guia profissionais de TI em sua jornada de aprendizado, combinando rastreamento de progresso, persistência de dados e o poder da IA Gemini para explicações e sugestões de projetos personalizados. Tenha controle total do seu plano de estudos, customizando cada passo do seu caminho.

• Visão Geral do Projeto
• Estrutura de Diretórios
• Destaques & Funcionalidades
• Tecnologias Utilizadas
• Pré-requisitos
• Instalação
• Como Usar
• Configuração
• Responsividade
• Validação e Tratamento de Erros
• API/Funcionalidades Avançadas
• Contribuição
• Melhorias Futuras
• Licença
• Autora

O path4developers nasceu da necessidade de organizar a vasta quantidade de tecnologias que um desenvolvedor profissional de TI precisa dominar. Mais do que uma lista estática, é uma ferramenta interativa que permite:

• Contexto e Motivação: Oferecer um caminho claro e estruturado para iniciantes e profissionais que desejam se atualizar.
• Principais Benefícios: Rastreamento visual de progresso com gráficos, explicações instantâneas via IA e persistência de dados na nuvem.
• Público-alvo: Estudantes de tecnologia, desenvolvedores em transição de carreira e autodidatas.
• Conceitos Técnicos: Integração de API de IA (Gemini), autenticação segura (JWT), manipulação avançada de DOM, e arquitetura MVC no backend.

interactive-roadmap/
├── config/
│   └── database.js        # Configuração e conexão com MongoDB Atlas
├── middleware/
│   └── auth.js            # Middleware de proteção de rotas (JWT)
├── models/
│   ├── Roadmap.js         # Schema do Mongoose para dados do roadmap
│   └── User.js            # Schema do usuário com hash de senha
├── routes/
│   ├── auth.js            # Rotas de autenticação (login, registro)
│   └── roadmap.js         # Rotas CRUD para o roadmap do usuário
├── .env                   # Variáveis de ambiente (não versionado)
├── index.html             # Frontend: UI, Lógica, Charts e Integrações
├── server.js              # Entry point: Configuração do Express e APIs
├── package.json           # Dependências e scripts do projeto
├── vercel.json            # Configuração de deploy para Vercel
└── README.md              # Documentação do projeto

• Edição Completa: O roadmap inicial é apenas um exemplo. Você tem liberdade total para renomear fases, criar novos tópicos e excluir o que não faz sentido para você.
• Drag & Drop: Priorize seus estudos arrastando e soltando itens conforme sua necessidade.
• Integração com IA (Gemini): A IA se adapta ao seu roadmap. Clique no ícone ✨ em qualquer item customizado para receber explicações contextualizadas.

• Modo Escuro/Claro: Alternância de tema com persistência de preferência do usuário.
• Visual Clean: Interface construída com TailwindCSS, focada na legibilidade e usabilidade.
• Feedback Visual: Gráficos interativos (Chart.js) mostram o progresso geral e por fase em tempo real.

• Layout Adaptável: Barra lateral retrátil em dispositivos móveis e redimensionável em desktop.
• Mobile First: Interface otimizada para toque e telas menores.
• Acessibilidade: Cores contrastantes e navegação intuitiva.

• Autenticação Segura: Sistema de login e registro com JWT e hash de senhas (bcryptjs).
• Persistência em Nuvem: Seu roadmap personalizado é salvo automaticamente no MongoDB, permitindo acesso de qualquer dispositivo.
• Rate Limiting: Proteção contra abuso nas rotas de API e autenticação.

Este projeto foi construído utilizando as seguintes tecnologias:

• Backend: Node.js com Express, estruturado em MVC (Models, Views/Routes, Controllers/Logic).
• Banco de Dados: MongoDB Atlas com Mongoose para modelagem de dados flexível (JSON store).
• Frontend: HTML5, Vanilla JS e TailwindCSS (via CDN) para agilidade e leveza.
• IA Generativa: Google Gemini API para geração dinâmica de conteúdo educacional.

Para executar este projeto localmente, você precisará de:

Ambiente e Chaves:

• Node.js v14+ instalado.
• Uma conta no MongoDB Atlas (ou MongoDB local).
• Uma chave de API do Google Gemini.

# 1. Clone este repositório
$ git clone https://github.com/emellybmuniz/interactive-roadmap.git

# 2. Navegue até o diretório do projeto
$ cd interactive-roadmap

# 3. Instale as dependências
$ npm install

# 4. Configure as variáveis de ambiente (veja seção Configuração)
# Crie um arquivo .env na raiz

# 5. Inicie o servidor de desenvolvimento
$ npm run dev

Alternativa: Acesse a versão online em path4developers.vercel.app

1. Crie uma Conta: Registre-se para salvar seu roadmap personalizado na nuvem.
2. Personalize: Use os botões de editar (✏️) e excluir (🗑️) para moldar o roadmap aos seus objetivos de carreira. Adicione novas fases e tópicos.
3. Marque seu Progresso: Clique nos checkboxes conforme domina cada tecnologia.
4. Aprenda com IA: Clique no ícone ✨ ao lado de qualquer item (mesmo os que você criou) para uma explicação rápida.
5. Pratique: Clique no botão "Projeto" em cada fase para receber uma sugestão de desafio prático da IA.

Crie um arquivo .env na raiz do projeto com as seguintes variáveis:

MONGODB_URI=sua_string_de_conexao_mongodb
GEMINI_API_KEY=sua_chave_api_google_gemini
JWT_SECRET=sua_chave_secreta_jwt
SESSION_SECRET=sua_chave_secreta_sessao
PORT=3000

• Barra lateral fixa com redimensionamento manual (drag).
• Visualização completa dos gráficos e detalhes.

• Menu "hambúrguer" para acessar a barra lateral.
• Layout de coluna única para melhor leitura.
• Modais adaptados para telas cheias ou parciais.

• Backend: Validação de campos obrigatórios (nome, email, senha) no Mongoose e unicidade de email.
• Frontend: Feedback visual em formulários e proteção de rotas na UI.

• Mensagens amigáveis via alertas ou modais em caso de falha de login ou registro.
• Logs de erro no console do servidor para depuração.
• Fallback gracioso caso a API do Gemini falhe.

Contribuições são sempre bem-vindas e muito apreciadas! Sinta-se à vontade para abrir uma issue ou enviar um pull request.

1. Fork este repositório
2. Clone seu fork: git clone https://github.com/seu-usuario/interactive-roadmap.git
3. Crie uma branch: git checkout -b feature/nova-funcionalidade
4. Faça suas alterações e teste completamente
5. Commit: git commit -m 'Adiciona nova funcionalidade'
6. Push: git push origin feature/nova-funcionalidade
7. Abra um Pull Request

• Recuperação de Senha
• Gerar projetos com IA baseado nos itens completos do roadmap
• Sugerir projeto considerando todo o progresso concluído em todas as fases

Este projeto está licenciado sob a *Licença GNU Lesser General Public License v2.1 - consulte o arquivo LICENSE para obter mais detalhes.

Desenvolvido por Emelly Beatriz com ❤️

📬 Entre em contato: 📧 [email protected] | 💼 Linkedin | 🐙 Github

⭐ Gostou do projeto? Deixe uma estrela no repositório para apoiar o desenvolvimento!