🚀 Projeto Elevate: Frontend

Bem-vindo ao repositório do frontend do Projeto Elevate, a porta de entrada para a sua jornada de sucesso no mundo da tecnologia!

✨ Visão Geral

O frontend do Elevate é a camada interativa e dinâmica da nossa plataforma, projetada para proporcionar uma experiência de usuário (UX) intuitiva, responsiva e envolvente. Ele se comunica de forma fluida com o backend para entregar uma série de funcionalidades que transformam a maneira como você constrói sua carreira tech.

🌟 O Projeto Elevate: Seu GPS para a Carreira Tech Ideal

Você já se sentiu perdido(a) no vasto universo da tecnologia? Sem saber por onde começar, qual caminho seguir ou como se destacar no mercado? O Projeto Elevate nasceu para resolver exatamente essa dor.

Somos mais do que uma plataforma de aprendizado; somos seu parceiro estratégico para a ascensão profissional.

Como o Elevate te Impulsiona:

• Teste de Perfil Vocacional Inteligente:

  • Problema Resolvido: A incerteza sobre qual área tech é a melhor para você.
  • Solução: Um teste cuidadosamente elaborado por especialistas, que vai além das habilidades técnicas. Ele explora seu dia a dia ideal, seus gostos, seu propósito e suas características inatas para mapear qual das profissões tech em alta (Front-End, Back-End, Full Stack, DevOps, Data Science & IA, UX/UI, QA) se encaixa perfeitamente com você.
  • Benefício: Elimine as dúvidas e descubra o caminho onde seu talento brilhará com menos esforço, maximizando seu potencial e satisfação.

• Trilhas de Aprendizado Personalizadas (Do Zero ao Expert):

  • Problema Resolvido: Conteúdo desorganizado e a dificuldade de evoluir consistentemente.
  • Solução: Nossas trilhas são meticulosamente curadas e estruturadas, levando você do absoluto zero ao nível de especialista. Cada módulo é um degrau, com aulas em vídeo (integradas diretamente do YouTube), artigos, quizzes e projetos práticos.
  • Benefício: Tenha um roteiro claro e personalizado, focado no que o mercado realmente exige, com a flexibilidade de aprender no seu ritmo.

• Simulador de Entrevista com Mentor IA:

  • Problema Resolvido: A ansiedade e a falta de prática para entrevistas técnicas.
  • Solução: Pratique com nosso Mentor IA, um entrevistador virtual que simula cenários reais de entrevista. Receba perguntas sobre tópicos específicos (React, Python, Comportamental) e aprimore suas respostas em um ambiente seguro.
  • Benefício: Ganhe confiança e prepare-se para brilhar em entrevistas, entendendo suas forças e pontos a melhorar antes do grande dia.

• Comunidade Ativa e Fórum Interativo:

  • Problema Resolvido: O sentimento de isolamento e a falta de networking.
  • Solução: Conecte-se com outros desenvolvedores, mentores experientes e entusiastas da tecnologia. Participe de discussões, compartilhe conhecimentos e colabore em projetos.
  • Benefício: Expanda sua rede de contatos, tire dúvidas e encontre apoio em sua jornada, acelerando seu aprendizado e abrindo portas para novas oportunidades.

• Progresso e Certificação Validados:

  • Problema Resolvido: Dificuldade em comprovar suas habilidades e acompanhar seu avanço.
  • Solução: Acompanhe seu progresso aula por aula, módulo por módulo. Ao concluir uma trilha, reivindique seu certificado com um código de validação único, que pode ser facilmente verificado por qualquer empresa.
  • Benefício: Tenha uma prova concreta de suas conquistas, construa um portfólio sólido e demonstre seu valor para o mercado.

Sua Carreira Tech Começa Agora. Eleve Suas Habilidades. Conquiste Seu Propósito.

Junte-se à Elevate e transforme seu futuro!

🌟 Destaques da Arquitetura e Design

• Componentização Modular: Desenvolvido com componentes React reutilizáveis, garantindo alta manutenibilidade e escalabilidade.
• Design System Robusto: Implementado com Tailwind CSS e um conjunto de variáveis semânticas para uma identidade visual coesa em toda a aplicação.
• Experiência do Usuário (UX) Otimizada: Foco em fluxos de navegação intuitivos, feedback visual claro (carregamento, erros, sucesso), microinterações e acessibilidade.
• Totalmente Responsivo: Design adaptável a diversas telas e dispositivos, do mobile ao desktop.

🛠️ Tecnologias Utilizadas

Este projeto foi construído com as seguintes tecnologias e bibliotecas essenciais, cada uma escolhida por suas contribuições específicas para a qualidade e funcionalidade do frontend:

• React
  • Por que: É a biblioteca primária para construção da interface do usuário. Sua abordagem baseada em componentes permite criar UIs complexas e dinâmicas de forma eficiente e modular, facilitando a reutilização de código e a manutenção.
• React Router DOM
  • Por que: Essencial para o gerenciamento de navegação em Single Page Applications (SPAs). Permite definir rotas declarativas e navegar entre as diferentes páginas da aplicação sem recarregar a página inteira, proporcionando uma experiência de usuário fluida.
• Tailwind CSS
  • Por que: Um framework CSS utilitário que acelera drasticamente o processo de estilização. Permite construir designs complexos e responsivos diretamente no HTML, mantendo a consistência visual e gerando um CSS final otimizado e leve.
• Lucide React
  • Por que: Oferece uma coleção de ícones vetoriais modernos e personalizáveis. Integrados como componentes React, eles são leves, de alta qualidade e fáceis de estilizar, aprimorando a estética e a usabilidade visual da interface.
• Axios
  • Por que: Um cliente HTTP baseado em Promessas que simplifica a comunicação com a API backend. Facilita o envio e recebimento de dados, com recursos como interceptores de requisição/resposta para tratamento global de tokens e erros.
• @supabase/supabase-js
  • Por que: O cliente JavaScript oficial do Supabase, permitindo interagir diretamente com os serviços de autenticação (Auth) e banco de dados (Database) do lado do cliente. Fundamental para o gerenciamento de sessões de usuário e dados públicos.
• React Confetti
  • Por que: Um componente React que adiciona efeitos visuais de confetes animados. Utilizado para enriquecer a experiência do usuário, celebrando conquistas e marcos importantes (ex: conclusão do teste de perfil).
• React Use
  • Por que: Uma coleção de Hooks React utilitários prontos para usar. Reduz o código boilerplate e melhora a produtividade e a performance, fornecendo soluções comuns como useWindowSize (para responsividade) e useDebounce (para otimização de busca).
• Normalize.css
  • Por que: Um pequeno arquivo CSS que garante que os navegadores renderizem todos os elementos de forma mais consistente e em conformidade com os padrões. Ajuda a evitar inconsistências visuais indesejadas entre diferentes navegadores.
• Vite
  • Por que: Uma ferramenta de build de próxima geração que oferece um ambiente de desenvolvimento frontend extremamente rápido. Proporciona Hot Module Replacement (HMR) instantâneo e builds altamente otimizadas para produção.

📁 Estrutura do Projeto

A organização do código segue uma estrutura lógica e modular para facilitar o desenvolvimento, a manutenção e a escalabilidade.

├── components/           # Componentes React reutilizáveis e específicos
│   ├── Auth/             # -> AuthModal.jsx: Interface de login/registro.
│   ├── Common/           # -> Button.jsx: Componente de botão reutilizável.
│   │   ├── Modal.jsx: Base para todos os pop-ups.
│   │   ├── PathCard.jsx: Card de resumo de trilha.
│   │   └── PathCardSkeleton.jsx: Esqueleto de carregamento para PathCard.
│   └── Navigation/       # -> Header.jsx: Componente de cabeçalho.
│       └── Footer.jsx: Componente de rodapé.
├── contexts/             # Contextos React para estado global
│   └── AuthContext.js: Gerencia o estado de autenticação e o AuthModal.
├── hooks/                # Custom Hooks para lógica reutilizável
│   └── useDebounce.js: Hook para otimizar funções de busca.
├── layouts/              # Layouts principais da aplicação
│   └── MainLayout.jsx: Estrutura base de todas as páginas (Header, Main, Footer).
├── lib/                  # Configurações de bibliotecas externas
│   └── supabase-frontend.js: Inicialização do cliente Supabase para o frontend.
├── pages/                # Componentes que representam páginas completas
│   ├── CertificatesPage.jsx: Exibe certificados conquistados.
│   ├── CommunityPage.jsx: Página principal do fórum.
│   ├── DashboardPage.jsx: Painel do usuário com resumo de progresso.
│   ├── ForumTopicDetailsPage.jsx: Detalhes de um tópico do fórum.
│   ├── HomePage.jsx: Página inicial da aplicação.
│   ├── InterviewSimPage.jsx: Simulador de entrevista com IA.
│   ├── LearningPathsPage.jsx: Explorador de todas as trilhas de aprendizado.
│   ├── NotFoundPage.jsx: Página de erro 404.
│   ├── PathDetailsPage.jsx: Detalhes de uma trilha específica e suas aulas.
│   ├── ProfileTestPage.jsx: Página do teste de perfil vocacional.
│   ├── PublicCertificatePage.jsx: Validação pública de certificados.
│   └── TestResultPage.jsx: Página de resultados do teste de perfil.
├── services/             # Serviços para comunicação com APIs
│   └── api.js: Configuração da instância Axios e interceptores.
├── index.css             # Estilos globais e configurações base do Tailwind
└── main.jsx              # Ponto de entrada principal da aplicação React

🚀 Como Começar

Siga estas instruções para configurar e rodar o frontend do Projeto Elevate em seu ambiente de desenvolvimento local.

Pré-requisitos

• Node.js (versão 18.x ou superior)
• npm (gerenciador de pacotes)

🛠️ Instalação

1. Clone o repositório do frontend:

   git clone <URL_DO_SEU_REPOSITORIO_FRONTEND>
   cd <pasta-do-seu-frontend>

2. Instale as dependências:

   npm install

🔑 Configuração de Variáveis de Ambiente

1. Crie um arquivo .env (ou .env.local) na raiz do projeto frontend.
2. Adicione as seguintes variáveis, substituindo os placeholders pelos valores reais do seu projeto Supabase e a URL do seu backend local:

   # Variáveis de Ambiente para o Frontend
   VITE_SUPABASE_URL="[https://seu-projeto-id.supabase.co](https://seu-projeto-id.supabase.co)"
   VITE_SUPABASE_ANON_KEY="sua-chave-anonima-publica-do-supabase"
   VITE_API_URL="http://localhost:3001/api" # URL do seu backend local
   

   • Importante: Para deploy em Vercel, VITE_API_URL será a URL do seu backend no Render.

▶️ Execução

Para iniciar o servidor de desenvolvimento do frontend:

npm run dev
O aplicativo estará acessível em http://localhost:5173 (ou outra porta disponível).

☁️ Deploy (Vercel)

O deploy contínuo do frontend é automatizado via Vercel.

Conecte seu repositório Git (ex: GitHub, GitLab) ao Vercel. Configure as variáveis de ambiente no Dashboard do Vercel: No Dashboard do seu projeto Vercel, vá em Settings > Environment Variables. Adicione as seguintes variáveis com seus valores reais de produção:

VITE_SUPABASE_URL
VITE_SUPABASE_ANON_KEY
VITE_API_URL: https://elevate-backend-1pwj.onrender.com/api (URL do seu backend deployado no Render)

Certifique-se de que estas variáveis estão configuradas para os ambientes corretos (ex: Production, Preview, ou All Environments). Verifique as configurações de Build & Development do Vercel: Framework Preset: Vite Build Command: npm run build Output Directory: dist Crie um arquivo vercel.json na raiz do projeto frontend para garantir o roteamento correto de Single Page Applications (SPAs) no Vercel: JSON

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Force um novo Deploy (com cache limpo) no Vercel após qualquer alteração no código, nas variáveis de ambiente ou no vercel.json.

🤝 Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues ou pull requests.