Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewarriorsdevs/opus-frontend
Repositório frontend do Opus, uma plataforma com o objetivo de facilitar a empregabilidade na região de Pedro II - PI
https://github.com/codewarriorsdevs/opus-frontend
material-ui projeto-ativo reactjs styled-components typescript
Last synced: 10 days ago
JSON representation
Repositório frontend do Opus, uma plataforma com o objetivo de facilitar a empregabilidade na região de Pedro II - PI
- Host: GitHub
- URL: https://github.com/codewarriorsdevs/opus-frontend
- Owner: codewarriorsdevs
- Created: 2024-09-18T14:53:30.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-15T15:17:02.000Z (about 1 month ago)
- Last Synced: 2024-10-16T17:44:29.852Z (about 1 month ago)
- Topics: material-ui, projeto-ativo, reactjs, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 9.44 MB
- Stars: 0
- Watchers: 0
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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.
## 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](https://nodejs.org/) (versão 14 ou superior)
- [Git](https://git-scm.com/)
### Comandos para rodar o projeto
1. **Clone o repositório:**
```bash
git clone https://github.com/seu-usuario/front-end.git
cd front-end
```
2. **Instale as dependências do projeto:**
```bash
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:**
```bash
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:**
```bash
npm install @mui/material @emotion/react @emotion/styled
```
- **Framer Motion:**
```bash
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.