{"id":19070352,"url":"https://github.com/kaualandi/cloud-store-front","last_synced_at":"2026-05-16T18:02:55.629Z","repository":{"id":176477817,"uuid":"658172952","full_name":"kaualandi/cloud-store-front","owner":"kaualandi","description":"Frontend para um e-commerce de dropshipping","archived":false,"fork":false,"pushed_at":"2023-09-18T09:49:23.000Z","size":4825,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-02T15:49:58.500Z","etag":null,"topics":["angular","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/kaualandi.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":"2023-06-25T02:09:31.000Z","updated_at":"2023-11-20T14:55:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"1a208857-8358-4fc4-9e72-11e79fb845ab","html_url":"https://github.com/kaualandi/cloud-store-front","commit_stats":null,"previous_names":["kaualandi/cloud-store-front"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaualandi%2Fcloud-store-front","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaualandi%2Fcloud-store-front/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaualandi%2Fcloud-store-front/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaualandi%2Fcloud-store-front/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaualandi","download_url":"https://codeload.github.com/kaualandi/cloud-store-front/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240122574,"owners_count":19751142,"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","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":["angular","typescript"],"created_at":"2024-11-09T01:18:16.308Z","updated_at":"2026-05-16T18:02:55.565Z","avatar_url":"https://github.com/kaualandi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebBoilerplate\n\nProjeto gerado com [Angular CLI](https://github.com/angular/angular-cli) versão 14.2.10.\n\n## Clonando para um novo projeto\n\n```bash\ngit clone https://bitbucket.org/noclaftech/boilerplate-web-angular \u003cnome-do-projeto\u003e\n```\n\n## Servidor de dev\n\n```bash\nng serve\n```\n\nE abra o navegador em [localhost:4200](http://localhost:4200). A aplicação irá recarregar automaticamente caso haja alguma alteração no código.\n\n## Build\n\nPara gerar uma build de produção.\n\n```bash\nnpm run build:prod\n```\n\nOu para gerar uma build de desenvolvimento.\n\n```bash\nnpm run build\n```\n\nOs arquivos serão gerados na pasta `dist/`.\n\n## Gerando componentes\n\n```bash\nng generate component nome-do-componente\n```\n\nPara gerar um novo componente. Você também pode usar `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Gerando componentes com lazy loading\n\n```bash\nng generate module pages/nome-do-componente --routing=true \u0026\u0026 ng generate component pages/nome-do-componente --module=pages/nome-do-componente\n```\n\nPara gerar um novo componente com lazy loading\n\n## Libs instaladas\n\n- Angular Material\n  - `ng add @angular/material`\n- ngx-mask\n  - `npm i ngx-mask`\n- md5-typescript\n  - `npm i md5-typescript`\n- ngx-cookie-service\n  - `npm i ngx-cookie-service`\n\n## Links úteis\n\n### Pacotes instalados\n\n- [Angular](https://angular.io/)\n- [Angular Material](https://material.angular.io/)\n- [ngx-mask](https://github.com/JsDaddy/ngx-mask)\n\n### Outros\n\n- [Charts](https://apexcharts.com/docs/angular-charts/)\n- [Carrosel/Slides](https://swiperjs.com/angular)\n- [Captcha](https://github.com/leNicDev/ng-hcaptcha#readme)\n- [Scroll animado (ngx-scrollreveal)](https://tinesoft.github.io/ngx-scrollreveal/doc/index.html)\n- [Scroll animado (AOS)](https://michalsnik.github.io/aos/)\n- [Icones](https://fw2svg.kaualf.com/)\n\n## Componentes compartilhados\n\nLoading\n\n```html\n\u003cloading\u003e\u003c/loading\u003e\n```\n\nLoading da página\n\n```html\n\u003cpage-loading\u003e\u003c/page-loading\u003e\n```\n\nPaginação de tabela\n\n```html\n\u003cpagination (pageChange) [back] [next] [current] [total]\u003e\u003c/pagination\u003e\n```\n\n## Estilização\n\nPara criar novos estilos globais, como por exemplo, para botões, formulários, modais, etc, é preciso criar o arquivo `.scss` na pasta `src/styles`, por exemplo, `src/styles/_buttons.scss`. Após isso importe-o no arquivo `src/styles.scss` como: `@import 'styles/buttons';`. Não se esqueça do `_` no início do nome do arquivo.\n\nAs variáveis de estilização estão no arquivo `src/styles/_variables.scss`.\n\n### Media screens\n\nPara criar media screens use\n\n```scss\n@include media('\u003c=tablet') {\n  // \u003e | \u003c | \u003c= | \u003e=\n  // Estilos aqui\n}\n```\n\nCaso queira adicionar novos breakpoints use o arquivo `src/styles/_media.scss`.\n\nPara mais informações, acesse a documentação do [Include Media](https://eduardoboucas.github.io/include-media).\n\n## Diretivas\n\nDiretivas são utilizadas para criar componentes reutilizáveis.\n\n### Input mask\n\n```html\n\u003cinput type=\"text\" name=\"phone\" mask=\"(00) 00000-0000\" /\u003e\n```\n\n### Input file\n\n\u003e O evento do `(upload)` retorna o base64 do arquivo selecionado, quando se trata de uma imagem, ela já é compressada com o service `compressor`.\n\n```html\n\u003cinput type=\"file\" name=\"logo\" appInputFile (upload)=\"handleInputChange($event)\" /\u003e\n```\n\n### Icones\n\n```html\n\u003ci icon=\"icon-name\"\u003e\u003c/i\u003e\n```\n\n## Serviços\n\n### Custom validators\n\n\u003e Validadores customizados para o formControl do Angular. Existem atualmente validadores para CPF e CNPJ.\n\n```ts\nconstructor(private customValidators: CustomValidatorsService) {}\n\ncpfInput = new FormControl('', [\n  Validators.required,\n  this.customValidators.cpf(),\n]);\n```\n\n### Snackbar\n\n\u003e Serviço para exibir mensagens na tela.\n\n```ts\nconstructor(private snackbar: SnackbarService) {}\n\nthis.snackbar.success('Mensagem');\nthis.snackbar.error('Mensagem');\nthis.snackbar.info('Mensagem');\n```\n\n### Storage\n\n\u003e Serviço para armazenar dados e evitar requisições desnecessárias.\n\nJá possui uma função para salvar o token de acesso no cookie e um `get` para obter o mesmo.\n\n```ts\nconstructor(private storage: StorageService) {}\n\ntoken = this.storage.token;\nthis.storage.setToken('token', keepLogged);\n```\n\n## PWA\n\n### Logos\n\nAdicionar as logos corretamente coforme o `manifest.webmanifest`. Respeite as dimensões e substitua com as logos corretas que estão em `src/assets/icons`.\n\n### Variáveis\n\nAs variáveis `name`, `short_name`, `theme_color` e `background_color` devem ser configuradas no arquivo `manifest.webmanifest`.\n\n## Lint\n\nUtilize este comando para executar a verificação de sintaxe em todo o projeto.\n\n```bash\nng lint\n```\n\n### Funções\n\n- Nomes de funções para ouvintes de eventos, usar o prefixo `handle`. Exemplo: `handleDeleteTask()`\n- Nomes de funções para funções de callback, usar o prefixo `on`. Exemplo: `onTaskDeleted()`\n- Nomes de funções para funções de validação, usar o prefixo `validate`. Exemplo: `validateTask()`\n- Descritivas, porém não muito extensas.\n- Utilizar camelCase\n\n### Variáveis\n\n- Todas as variáveis devem ser escritas em inglês.\n- Descritivas, porém não muito extensas.\n- Tipar sempre que possível.\n- Utilizar snake_case.\n\n### Interfaces\n\n- Precede o `I` antes da nomenclatura que segue o padrão PascalCase.\n- Utilizar pasta de models para o armazenamento das mesmas.\n\n### HTML\n\n- Os campos de formulário com mais de uma tag `\u003cinput\u003e` devem conter uma tag `\u003cform\u003e` como pai e nele conter um evento `(ngSubmit)` e um `type='submit'` no botão ao invés de um `(keyup.enter)`.\n- Usar form-control ao invés de ngModel.\n- Todas as tags `\u003cinput\u003e` que possuirem um respectivo `\u003clabel\u003e`, utilizar um `id` no input que tenha o mesmo valor que o `for` do label.\n\n## Commits\n\n\u003e Preferencialmente feitos em inglês.\n\n- **chore:** Atualização de tarefas que não ocasionam alteração no código de produção, mas mudanças de ferramentas, mudanças de configuração e bibliotecas.\n\n- **feat:** São adições de novas funcionalidades ou de quaisquer outras novas implantações ao código.\n\n- **fix:** Essencialmente definem o tratamento de correções de bugs.\n\n- **refactor:** Utilizado em quaisquer mudanças que sejam executados no código, porém não alterem a funcionalidade final da tarefa impactada.\n\n- **docs:** Inclusão ou alteração somente de arquivos de documentação.\n\n- **perf:** Uma alteração de código que melhora o desempenho.\n\n- **style:** Alterações referentes a arquivos de estilo como SCSS ou CSS.\n\n- **build:** Alterações que afetam o sistema de construção ou dependências externas (escopos de exemplo: gulp, broccoli, npm).\n\n- **ci:** Mudanças em nossos arquivos e scripts de configuração de CI (exemplo de escopos: Travis, Circle, BrowserStack, SauceLabs).\n\n- **env:** Utilizado na descrição de modificações ou adições em arquivos de configuração em processos e métodos de integração contínua (CI), como parâmetros em arquivos de configuração de containers.\n\n### Exemplos de Commits:\n\n- chore: add commitlint and husky\n- chore(eslint): require semicolon\n- refactor: typed variables\n- feat: add axios / search and check data\n- feat(page/home): created route for home page\n- fix: NH-3 button color in login\n\n## Branchs\n\n\u003e Prerencialmente feitos em inglês.\n\n- _bugfix/_: Responsável por corrigir bugs pequenos em ambiente de desenvolvimento.\n\n- _feature/_: O nome já diz, uma nova feature que será adicionada ao projeto, componente e afins.\n\n- _hotfix/_: Responsável por corrigir algum erro critico que impeça o cliente de executar alguma função em ambiente de produção.\n\n- _improvement/_: Em si é uma melhoria para uma feature já existente, seja de performance, de escrita, de layout, etc.\n\n### Exemplos de Branchs:\n\n- _bugfix/login-submit-form_: Correção de bug ao submeter o formulário de login\n- _feature/login-page-form_: Adição de formulário na página de login\n- _hotfix/login-page-submit-button_: Correção de bug no botão de submeter o formulário de login já em produção\n- _improvement/login-page-section_: Melhoria na seção de login\n\n## Estrutura dos diretórios\n\nGere um arquivo de texto com a estrutura de diretórios\n\n```bash\nnpm run tree\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaualandi%2Fcloud-store-front","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaualandi%2Fcloud-store-front","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaualandi%2Fcloud-store-front/lists"}