{"id":24179831,"url":"https://github.com/rickreisdev/portalservicos","last_synced_at":"2025-08-22T18:14:54.148Z","repository":{"id":247682716,"uuid":"826554324","full_name":"rickreisdev/PortalServicos","owner":"rickreisdev","description":"(EM DESENVOLVIMENTO) Esse projeto é um sistema web base para um portal de serviços utilizado para solicitar serviços para uma faculdade hipotética. O sistema é modular, ou seja, cada serviço disponível no portal é um módulo a ser importado de seu respectivo pacote npm que tem que ser instalado.","archived":false,"fork":false,"pushed_at":"2024-07-10T02:11:37.000Z","size":550,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-06T11:35:34.089Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rickreisdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-09T23:56:33.000Z","updated_at":"2024-11-30T21:48:20.000Z","dependencies_parsed_at":"2024-07-10T03:57:15.806Z","dependency_job_id":null,"html_url":"https://github.com/rickreisdev/PortalServicos","commit_stats":null,"previous_names":["rickreisme/portalservicos","rickreisdev/portalservicos"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rickreisdev/PortalServicos","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickreisdev%2FPortalServicos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickreisdev%2FPortalServicos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickreisdev%2FPortalServicos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickreisdev%2FPortalServicos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rickreisdev","download_url":"https://codeload.github.com/rickreisdev/PortalServicos/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rickreisdev%2FPortalServicos/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271680381,"owners_count":24802074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-13T06:07:36.343Z","updated_at":"2025-08-22T18:14:54.129Z","avatar_url":"https://github.com/rickreisdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portal de Serviços\n\nEste é o repositório do meu projeto de portal de serviços, desenvolvido utilizando Vite/React.js. Inspirado no projeto desenvolvido durante o meu estágio.\n\nEste README fornece uma visão geral da estrutura do projeto, suas dependências e arquivos importantes. Para mais informações sobre como executar o projeto localmente, consulte as seções relevantes neste arquivo ou entre em contato comigo.\n\nDesenvolvido por: Rickson Reis\n\n## Sumário\n#### [Descrição do projeto](#descricao)\n#### [Linguagem/framework utilizado](#linguagem)\n#### [Dependências do projeto](#dependencias)\n#### [Como executar o projeto?](#executar)\n#### [Estrutura de pastas](#pastas)\n#### [Como publicar uma módulo de serviço do Portal de Serviços como um pacote NPM](#npm)\n\n## Descrição do projeto: \u003ca name=\"descricao\"\u003e\u003c/a\u003e\n\nSistema web base para um portal de serviços utilizado para solicitar serviços para uma faculdade hipotética. O sistma é modular, ou seja, cada serviço disponível no portal é um módulo a ser importado de seu respectivo pacote npm que tem que ser instalado.\n\n### Funcionamento\n\nNo portal os usuários solicitam serviços para a coordenaria da faculdade, que recebe e responde a solicitação através de um sistema interno (não coberto nesse projeto - por enquanto).\n- Na página 'Operador', os administradores do sistema podem adicionar e excluir módulos de serviço. A página só pode ser acessada por quem tem papel (role) de 'operador' atrelado ao seu usuário.\n\n## Linguagem/Framework utilizado: \u003ca name=\"linguagem\"\u003e\u003c/a\u003e\n### Vite React.js\n\n### Outras Ferramentas Utilizadas\n\n- Node.js: Ambiente de execução JavaScript server-side que permite a construção de aplicações escaláveis.\n- Express: Framework web minimalista e flexível para Node.js, utilizado para construir APIs e aplicações web.\n- Bootstrap: Framework de front-end para desenvolvimento ágil de sites e aplicativos web responsivos.\n- SASS: Pré-processador CSS que estende a funcionalidade do CSS convencional.\n- React Icons: Biblioteca que fornece ícones populares para uso em aplicativos React.\n\n## Dependências do Projeto \u003ca name=\"dependencias\"\u003e\u003c/a\u003e\n\n## backend\n\n### Dependencies\n\n- cors: Middleware para Express que habilita CORS (Cross-Origin Resource Sharing), permitindo o acesso a recursos de diferentes origens.\n- dotenv: Biblioteca que carrega variáveis de ambiente de um arquivo .env para process.env, facilitando a configuração da aplicação..\n- express: Framework web minimalista e flexível para Node.js, utilizado para construir APIs e aplicações web.\n\n## frontend\n\n### Dependencies\n\n- bootstrap: Framework de front-end para desenvolvimento ágil de sites e aplicativos web responsivos.\n- react-bootstrap: Versão do bootsrap otimizada para aplicações react.\n- react: Biblioteca JavaScript para criar interfaces de usuário.\n- react-bootstrap: Componentes Bootstrap reutilizáveis para React.\n- react-dom: Biblioteca JavaScript para manipulação do DOM em React.\n- react-icons: Biblioteca de ícones para React.\n- react-tooltip: Biblioteca react para implementar tooltips, ou \"dicas de ferramentas\" (pop up que abre quando o mouse fica sobre algum elemento da interface).\n\nComo não consegui acessar diretamente o repositório do GitHub, aqui está um guia genérico para executar o projeto Vite React que está localizado na pasta `frontend` da raiz do repositório. Você pode adaptar este guia conforme necessário para o seu repositório específico.\n\n## Como executar o projeto? \u003ca name=\"executar\"\u003e\u003c/a\u003e\n\n### Pré-requisitos\n\nCertifique-se de que você tem os seguintes softwares instalados em sua máquina:\n\n- [Node.js](https://nodejs.org/) (versão 14 ou superior)\n- [npm](https://www.npmjs.com/) (normalmente instalado junto com o Node.js)\n\n## Passos para Executar o Projeto\n\n### 1. Clonar o Repositório\n\nPrimeiro, clone o repositório em sua máquina local. Abra um terminal e execute o seguinte comando:\n\n```sh\ngit clone https://github.com/rickreisme/PortalServicos.git\ncd PortalServicos\n```\n\n## Para o projeto do frontend Vite React localizado na pasta `frontend` da raiz do repositório:\n\n  ### 2. Navegar até a Pasta `frontend`\n\n  Mude para o diretório `frontend` onde está localizado o projeto Vite React:\n\n  ```sh\n  cd frontend\n  ```\n\n  ### 3. Instalar Dependências\n\n  Instale as dependências do projeto usando npm:\n\n  ```sh\n  npm install\n  ```\n\n  ### 4. Executar o Servidor de Desenvolvimento\n\n  Depois de instalar as dependências, inicie o servidor de desenvolvimento do Vite:\n\n  ```sh\n  npm run dev\n  ```\n\n  Isso iniciará o servidor de desenvolvimento e você verá uma saída similar a esta:\n\n  ```\n    VITE v2.0.0  ready in 300ms\n\n    ➜  Local:   http://localhost:5173/\n    ➜  Network: use --host to expose\n  ```\n\n  Abra seu navegador e acesse `http://localhost:5173` para ver a aplicação em execução.\n\n  Para finalizar a execução aperta Ctrl+C no terminal.\n\n## Para o projeto do backend localizado na pasta `backend` da raiz do repositório:\n\n  ### 5. Navegar até a Pasta `backend`\n\n  Mude para o diretório `backend` onde está localizado o projeto Vite React:\n\n  ```sh\n  cd backend\n  ```\n  ### 6. Instalar Dependências\n\n  Instale as dependências do projeto usando npm:\n\n  ```sh\n  npm install\n  ```\n\n  ### 7. Executar o Servidor de Desenvolvimento\n\n  Depois de instalar as dependências, inicie o servidor node:\n\n  ```sh\n  node index.js\n  ```\n\n  Isso iniciará o servidor e você verá uma saída similar a esta:\n\n  ```\n  Servidor rodando na porta 5000\n  ```\n  Para finalizar a execução aperte Ctrl+C no terminal.\n\n## Estrutura de Pastas \u003ca name=\"pastas\"\u003e\u003c/a\u003e\n\n- `portal-servicos`\n  - `backend`\n  - `frontend`\n  - `modulo-teste`\n  - `projeto`\n\n### Expansão de portal-servicos:\n\n- `backend` (não possui subpastas)\n\n- `frontend`\n  - `./public`\n  - `./src`\n    - `api`\n      - `services`\n    - `assets`\n      - `icons`\n      - `imgs`\n      - `styles`\n        - `mediaQuery`\n    - `components`\n    - `contexts`\n    - `hooks`\n    - `routes`\n- `projeto` (não possui subpastas)\n\n## Conteúdo das Pastas\n\n### portal-servicos\n\n- `frontend`: Toda a estrutura front-end do projeto, feita em Vite React.\n- `backend`: Estrutura de comunicação com APIs.\n- `projeto`: Outros arquivos importantes do projeto.\n\n### frontend\n\n- `public`: Arquivos estáticos que serão servidos diretamente pelo servidor web, sem processamento pelo sistema de construção.\n- `src`: Código fonte da aplicação.\n- `src/assets`, `assets/icons`, `assets/imgs`: Ícones e imagens, arquivos de mídia que compõem as páginas e componentes.\n- `assets/styles`: Arquivos das folhas de estilo que estilizam as páginas e componentes.\n- `styles/mediaQuery`: Arquivos de folhas de estilo que estilizam as páginas em diferentes tamanhos de tela para ter responsividade.\n- `components`: Códigos fonte de componentes das páginas principais do site, componentização diminui as linhas de código nas páginas principais.\n- `contexts`: Contém os contextos, que compartilham os estados da aplicação entre os componentes.\n- `hooks`: Contém os hooks, que permitem utilizar uma funcionalidade ou contexto no componente.\n- `routes`: Contém as rotas, ou seja, as páginas do site.\n  Atualmente, as rotas são:\n    - `/`: Rota principal, página inicial do Portal.\n    - `/portal`: Página que exibe todos os serviços disponíveis no Portal.\n    - `/operador`: Página de gerenciamento que somente usuários com papel de operador poderão acessar.\n    - `/service/agendamento`: Página do módulo teste de Agendamento do Portal, seguir esse padrão para definir as demais rotas de módulos (/service/nome-modulo).\n\n## Arquivos em Cada Pasta\n\n## portal-servicos\n\n- `.gitignore`: Arquivo que define os arquivos e pastas a serem ignorados pelo Git.\n- `README.md` (este arquivo): Arquivo com informações e visão geral mais compreensível sobre o projeto, forma de documentação do código.\n\n## backend\n\n- `index.js`: Arquivo com as rotas e configurações da API do projeto.\n    Atualmente, as rotas são:\n    - `/services`: `GET` - Obtém os serviços registrados no db.json na API.\n    - `/services`: `POST` - Adiciona um novo serviço no db.json da API (usado no código dos módulos para passar as informações deles para o backend).\n    - `/install`: `POST` - instala um módulo novo no sistema base.\n    - `/uninstall`: `POST` - desinstala um módulo do sistema base.\n\n- `package-lock.json`: Arquivo de bloqueio gerado automaticamente pelo npm após uma instalação de pacotes.\n- `package.json`: Arquivo de manifesto do projeto, contém metadados sobre o projeto e onde as dependências são definidas.\n\n## frontend\n\n### `raiz`\n\n- `.eslintrc.cjs`: Arquivo de configuração do ESLint.\n- `index.html`: Arquivo HTML base para o site, onde é definido o favicon, linguagem e outros metadados do site.\n- `package-lock.json`: Arquivo de bloqueio gerado automaticamente pelo npm após uma instalação de pacotes.\n- `package.json`: Arquivo de manifesto do projeto, contém metadados sobre o projeto e onde as dependências são definidas.\n- `vite.config.js`: Arquivo de configuração do Vite.\n\n### `./public`\n\n- `favicon-80x80.png` e `favicon.png`: Favicons do site.\n\n### `./src`\n\n- `App.jsx`: Principal componente do do site, contém importações globais de arquivos e estilos, de onde todos os componentes recebem o cabeçalho e o rodapé.\n- `main.jsx`: Renderiza o componente raiz (ReactDOM.render()), ponto de entrada da aplicação. Também possui importações globais e\n\n### `./src/api/services`\n\n- `services.json`: Estrutura json da API que retorna os serviços disponíveis do site para serem renderizados na página Portal.jsx (**atualmente desativado** - por hora essa estrutura está disponível em api feita no Glicth baseada em um servidor feito com server.json - [Link da API no Glitch](https://glitch.com/edit/#!/sheer-oceanic-lightyear?path=db.json%3A31%3A14), [Link do repositório do servidor no GitHub](https://github.com/rickreisme/api-teste-servicos))\n\n### `./src/assets/imgs`\n\n\n### `./src/assets/styles`\n\n- `App.scss`: Estilos da página principal em SASS.\n- `Footer.scss`: Estilos da seção footer da página principal em SASS.\n- `global.scss`: Estilos globais do site em SASS.\n- `sidebar.scss`: Estilo da barra lateral do menu (atualmente desativada).\n- `vars.scss`: Variáveis em SASS de estilos pré-definidos (cores em sua maioria).\n\n### `./src/styles/mediaQuery`\n\n- `min375px.scss`: Estilos do site aplicados quando a largura de tela tem no mínimo 375px.\n- `max1015px.scss`: Estilos do site aplicados quando a largura de tela tem no máximo 1015px.\n\n### `./src/components`\n\n- `Footer.jsx`: Componente rodapé do site.\n- `Header.jsx`: Componente do cabeçalho do site.\n- `Sidebar.jsx`: Componente da barra lateral do menu **(atualmente desativado)**.\n- `SidebarItems.jsx`: Componente dos itens presentes dentro da barra lateral do menu **(atualmente desativado)**.\n\n### `./src/contexts`\n\n- `auth.jsx`: Contexto que configura a lógica de autenticação interna do site.\n\n### `./src/hooks`\n\n- `useAuth.jsx`: Hook que permite a aplicação do AuthContext do auth.jsx em componentes do site.\n\n# Como publicar uma módulo de serviço do Portal de Serviços como um pacote NPM \u003ca name=\"npm\"\u003e\u003c/a\u003e\n\nO projeto do Portal de Serviços prevê que cada serviço disponível seja um módulo a ser instalado no sistema base, dessa forma a estratégia escolhida foi desenvolver cada módulo como uma aplicação Vite React da mesma forma que o sistema base foi feito e publicá-la em forma de pacote NPM para ser importada no código do sistema base. Este guia irá orientá-lo nesse processo.\n\n## Pré-requisitos\n\n- Node.js e npm instalados na sua máquina.\n- Conta no npm (você pode se registrar em https://www.npmjs.com/signup).\n\n## Passos para Publicação\n\n### 1. Configuração do Projeto\n\nPrimeiro, crie um projeto Vite com React:\n\n```sh\nnpm create vite@latest meu-app-vite --template react\ncd meu-app-vite\nnpm install\n```\n\n### 2. Estrutura do Projeto\n\nA estrutura do seu projeto deve se parecer com isso:\n\n```\nmeu-app-vite/\n├── node_modules/\n├── public/\n├── src/\n│   ├── assets/\n│   ├── components/\n│   ├── App.jsx\n│   └── main.jsx\n├── .gitignore\n├── index.html\n├── package.json\n├── README.md\n├── vite.config.js\n└── yarn.lock\n```\n\n### 3. Ajustar `package.json`\n\nAdicione os campos necessários no `package.json` para a publicação:\n\n```json\n{\n  \"name\": \"meu-app-vite\",\n  \"version\": \"0.0.1\", //importante manter o controle das versões quando for publicar o pacote no NPM\n  \"description\": \"Uma aplicação Vite React publicada como um pacote NPM\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"vite build\",\n    \"prepublishOnly\": \"npm run build\"\n  },\n  \"keywords\": [\n    \"vite\",\n    \"react\",\n    \"npm\",\n    \"package\"\n  ],\n  \"author\": \"Seu Nome \u003cseu-email@example.com\u003e\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"vite\": \"^2.0.0\",\n    \"react\": \"^17.0.0\",\n    \"react-dom\": \"^17.0.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^17.0.0\",\n    \"react-dom\": \"^17.0.0\"\n  }\n}\n```\n\n### 4. Configurar o Vite para Exportar como um Pacote\n\nAltere o `vite.config.js` para garantir que o Vite está configurado para gerar uma build adequada para um pacote NPM:\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  build: {\n    lib: {\n      entry: './src/main.jsx',\n      name: 'MeuAppVite',\n      fileName: (format) =\u003e `meu-app-vite.${format}.js`\n    },\n    rollupOptions: {\n      // Certifique-se de externalizar dependências que você não quer incluir no seu pacote\n      external: ['react', 'react-dom'],\n      output: {\n        globals: {\n          react: 'React',\n          'react-dom': 'ReactDOM'\n        }\n      }\n    }\n  },\n  plugins: [react()]\n});\n```\n\n### 5. Construir a Aplicação\n\nExecute o comando de build:\n\n```sh\nnpm run build\n```\n\nIsso gerará a pasta `dist` com os arquivos necessários para distribuição.\n\n### 6. Publicar no NPM\n\nFaça login no npm (se ainda não estiver logado):\n\n```sh\nnpm login\n```\n\nDepois, publique seu pacote:\n\n```sh\nnpm publish\n```\n\nSe tudo estiver configurado corretamente, seu pacote será publicado no NPM e estará disponível para instalação no sistema base via comando `npm install meu-app-vite`.\n\nSe for necessário, verifique o módulo de teste `modulo-agendamento` (que está na pasta de mesmo nome na raiz do repositório) para entender melhor na prática.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickreisdev%2Fportalservicos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frickreisdev%2Fportalservicos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frickreisdev%2Fportalservicos/lists"}