- MySQL (recomenda-se o uso do MySQL Workbench) instalado
- Abra seu MySQL Workbench e execute (recomendo o vídeo do CFB cursos para aprender a fazer a instalação):
CREATE DATABASE jobify;- Clone o repositório:
git clone https://github.com/sophi-hub/mbras-jobify-challenge.git-
Configure as variáveis de ambiente:
- Acesse o arquivo .env.example no diretório da pasta backend.
- Preencha com seus dados (host, usuário, senha etc.) e renomeie para .env.
-
Instale as dependências e rode o backend:
cd backend
npm i
node dist/server.js- Instale as dependências e rode o frontend:
cd frontend
npm i
npm run dev- A resposta da API pode apresentar latência em máquinas com menor desempenho. Caso a listagem de vagas demore a ser exibida, recomenda-se recarregar a página para forçar uma nova requisição.
- Exibição de vagas via API do Remotive.
- Filtragem por categoria de vagas.
- Campo de busca para encontrar vagas por palavras-chave.
- Contador de vagas favoritadas visível na interface.
- Botão "Ver mais vagas": carrega +18 vagas por clique para evitar sobrecarga.
- API de favoritos: salva as vagas favoritas no banco de dados.
- Persistência de favoritos na página "Favorite", mesmo após atualizar.
- Modal de detalhes da vaga com botão para se candidatar.
- Arquitetura MVC organizada e modular.
- Responsividade para todos os dispositivos.
- Animações com Frame Motion e componentes animados com React Bits.
- Acessibilidade com
alt,aria-labeleonekeyspara navegação assistiva.
- Primeiro contato com TypeScript, estudado com curso da Alura e documentação.
- TailwindCSS e ShadCN: aprendidos via documentação oficial.
- Produção completa em 3 dias:
- Dia 1: Aprendizado de TypeScript, Tailwind e ShadCN + integração com Remotive + API de favoritos com persistência em banco.
- Dia 2: Criação da página de favoritos + implementação de Frame Motion.
- Dia 3: Finalização do design, ajustes visuais e responsividade.
- Integração completa de Frontend com Backend usando TypeScript -> Node + Express, Axios, Sequelize e MySQL.
| Tecnologia/Metodologia | Descrição | Badge |
|---|---|---|
| React | Biblioteca para UI |  |
| TypeScript | Tipagem segura no projeto |  |
| TailwindCSS | Estilização rápida e utilitária |  |
| ShadCN | Componentes acessíveis e modernos |  |
| Frame Motion | Animações visuais suaves |  |
| React Bits | Componentes animados reutilizáveis | |
| Vite | Ferramenta de build ultra-rápida |  |
| Node.js | Backend para manipulação de dados |  |
| Express.js | Framework leve para APIs REST |  |
| Sequelize | ORM para integração com SQL |  |
| MySQL | Banco de dados relacional |  |
| Axios | Comunicação com APIs | |
| Arquitetura MVC | Organização modular de código | |
| Acessibilidade | Interface inclusiva e navegação por teclado |