Opus Frontend

Documentação oficial do projeto "Opus Frontend", a interface responsável por conectar candidatos a empresas e serviços da região de Pedro II - PI.

Explore the docs »

Em Desenvolvimento... ⚠

Equipe de Desenvolvimento

Ruan Victor

Bruno Lima

Kely Soares

Hugo Amadio

Jorge Jesus

Matheus Mozart

Jociel Andrade

João Carlos

Abdenaide Ribeiro

Documentação

Esta documentação traz as informações necessárias para a utilização do frontend do projeto Opus. Nela você encontrará informações sobre a estrutura do projeto, as tecnologias utilizadas, os comandos para rodar o projeto e os testes.

Tecnologias Utilizadas

Tecnologia	Descrição
React	Biblioteca JavaScript para construção de interfaces de usuário
TypeScript	Superset de JavaScript com tipagem estática
Vite	Ferramenta de build rápida para frontend
Material UI	Biblioteca de componentes React para design consistente
Framer Motion	Biblioteca para animações em React
ESLint	Ferramenta de linting para código JavaScript/TypeScript
Prettier	Formatação de código

Instalação

O frontend do projeto está configurado para ser executado localmente usando Vite.

Pré-requisitos

• Node.js (versão 14 ou superior)
• Git

Comandos para rodar o projeto

1. Clone o repositório:

   git clone https://github.com/seu-usuario/front-end.git
   cd front-end

2. Instale as dependências do projeto:

   npm install

   Essas dependências são locais e são necessárias para poder fazer edições no projeto.

3. Configuração do ambiente: Crie um arquivo .env na raiz do projeto com as variáveis de ambiente necessárias. Um exemplo de .env pode ser encontrado no arquivo .env.example.

4. Rodar o projeto:

   npm run dev

   Este comando iniciará o servidor de desenvolvimento com Hot Module Replacement (HMR) ativo.

5. Acessar o projeto: Abra o navegador e vá para http://localhost:3000 (ou a porta configurada) para ver o frontend em execução.

Scripts Disponíveis

No package.json, os seguintes scripts estão disponíveis:

• npm run dev: Inicia o servidor de desenvolvimento.
• npm run build: Cria uma versão otimizada para produção.
• npm run preview: Serve a versão de produção localmente.
• npm run test: Executa os testes.
• npm run lint: Executa o ESLint para verificar o código.
• npm run format: Formata o código usando Prettier.

Adicionando Material UI, React Icons e Framer Motion

Para adicionar as bibliotecas usadas no projeto, os seguintes comandos foram utilizados:

• Material UI:

  npm install @mui/material @emotion/react @emotion/styled

• Framer Motion:

  npm install framer-motion

Estrutura do Projeto

A estrutura do projeto segue as melhores práticas para aplicações React com TypeScript e Vite, organizada para facilitar a manutenção e escalabilidade.