{"id":27313040,"url":"https://github.com/camerodev/electron-typescript-react-clean-architecture","last_synced_at":"2025-04-12T06:51:15.292Z","repository":{"id":228326045,"uuid":"772768352","full_name":"camerodev/electron-typescript-react-clean-architecture","owner":"camerodev","description":":electron: Boilerplate for projects using Eletron, React and Typescript applying Clean Architecture together with Atomic Design. Including Eslint, Prettier and Jest setup","archived":false,"fork":false,"pushed_at":"2024-03-18T07:29:29.000Z","size":232,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T16:43:27.294Z","etag":null,"topics":["atomic","biolerplate","clean-architecture","electron","node","react","template","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/camerodev.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}},"created_at":"2024-03-15T21:26:35.000Z","updated_at":"2024-03-29T17:35:38.000Z","dependencies_parsed_at":"2024-03-18T08:51:25.010Z","dependency_job_id":null,"html_url":"https://github.com/camerodev/electron-typescript-react-clean-architecture","commit_stats":null,"previous_names":["slickcharmer/electron-typescript-react-clean-architecture","camerodev/electron-typescript-react-clean-architecture"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Felectron-typescript-react-clean-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Felectron-typescript-react-clean-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Felectron-typescript-react-clean-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Felectron-typescript-react-clean-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camerodev","download_url":"https://codeload.github.com/camerodev/electron-typescript-react-clean-architecture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530605,"owners_count":21119595,"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":["atomic","biolerplate","clean-architecture","electron","node","react","template","typescript"],"created_at":"2025-04-12T06:51:13.439Z","updated_at":"2025-04-12T06:51:15.279Z","avatar_url":"https://github.com/camerodev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Boilerplate definitivo para projetos Eletron.js com React, TypeScript, Clean Architecture e Atomic Design é um ponto de partida completo para o desenvolvimento de aplicações eletrônicas modernas e escaláveis. Ele combina várias práticas e padrões consagrados, fornecendo uma estrutura sólida e flexível para a criação de projetos web robustos.\n\nEste boilerplate utiliza o React, uma biblioteca JavaScript de código aberto para construir interfaces de usuário. O React é amplamente adotado na indústria de desenvolvimento web devido à sua eficiência, modularidade e reutilização de componentes. Além disso, ele oferece suporte nativo para o TypeScript, uma linguagem de programação tipada que fornece uma camada adicional de segurança e produtividade ao desenvolver aplicativos.\n\nEstá estruturado seguindo os princípios do Clean Architecture (Arquitetura Limpa). Essa abordagem divide o projeto em camadas independentes, permitindo a separação clara das responsabilidades e facilitando a manutenção, testabilidade e evolução do código.\n\nAlém disso, ele inclui configurações de ferramentas comumente utilizadas, como bundlers (por exemplo, Webpack), transpiladores (Babel), test runners (Jest) e gerenciadores de pacotes (npm ou Yarn), bem como um conjunto inicial de testes e exemplos.\n\n## Estrutura da aplicação\n\nA estrutura de pasta não segue o padrão do Clean Architecture de forma rigorosa (apenas o utiliza como base para incorporar junto a estrutura de Atomic Desing para construção do frontend da aplicação). No entanto, pode-se notar algumas semelhanças com os conceitos do Clean Architecture.\n\nNo Clean Architecture, a ideia principal é ter uma separação clara de responsabilidades e dependências, com as camadas mais internas contendo as regras de negócio e as camadas externas lidando com os detalhes de infraestrutura. Vamos analisar a estrutura de pasta fornecida:\n\n- A pasta \"src\" parece contém a maior parte do código-fonte da aplicação. Dentro dela, existem subpastas como \"application\" e \"main\", que podem indicar uma divisão entre camadas.\n\n- A pasta \"application\" contém subpastas como \"factories\", \"decorators\", \"http\" e \"validation\". Essa estrutura mostra que as responsabilidades relacionadas à lógica de aplicação estão sendo agrupadas nessa pasta.\n\n- A pasta \"main\" contém os detalhes de implementação, como \"adapters\", \"builders\", \"composites\", \"config\" e assim por diante. Isso indica uma camada externa que lida com a infraestrutura e os detalhes de implementação específicos da plataforma.\n\nÉ importante ressaltar que o Clean Architecture é mais um conjunto de princípios e diretrizes do que uma estrutura de pasta rígida,  sendo ele adaptável e podendo variar dependendo das necessidades e preferências de uma equipe ou projeto específico. Segue abaixo uma estrutura de pasta sugerida neste template para o projeto:\n\n```\n\n├─── electron\n├─── public\n│   ├─── assets\n│   │   ├─── icons\n│   │   ├─── images\n│   │   ├─── sounds\n├─── src\n│   ├─── application\n│   │   ├─── factories\n│   │   │   ├─── cache\n│   │   │   ├─── decorators\n│   │   │   ├─── http\n│   │   │   ├─── validation\n│   │   │   │   ├─── errors\n│   │   │   │   ├─── protocols\n│   │   │   │   ├─── validators\n│   ├─── main\n│   │   ├─── adapters\n│   │   ├─── builders\n│   │   ├─── composites\n│   │   ├─── adapters\n│   │   ├─── config\n│   │   ├─── presentation\n│   │   │   ├─── components\n│   │   │   │   ├─── atoms\n│   │   │   │   ├─── molecules\n│   │   │   │   ├─── organisms\n│   │   │   │   ├─── template\n│   │   │   ├─── hooks\n│   │   │   ├─── pages\n│   │   │   ├─── styles\n│   │   ├─── utils\n│   │   │   ├─── design\n├─── tests\n├─── webpack\n```\n\n## Executando a aplicação\n\nPara executar a aplicação, é necessário ter o Node.js instalado na máquina. Para instalar o Node.js, basta acessar o [site oficial](https://nodejs.org/en/download/) e seguir as instruções de instalação (Na criação desse boilerplate, foi utilizado a versão v18.16.0). Após a instalação, basta executar o comando abaixo para instalar as dependências do projeto:\n\n```bash\nnpm install\n\n## caso esteja utilizando o yarn, basta executar o comando abaixo:\n\nyarn install\n```\nDependencias instaladas, basta executar o comando abaixo para iniciar a aplicação:\n\n```bash\nnpm start\n\n## caso esteja utilizando o yarn, basta executar o comando abaixo:\n\nyarn start\n```\nE o webpack irá iniciar a aplicação em modo de desenvolvimento, abrindo uma janela do Electron com a aplicação em execução, apartir desse momento toda modificação feita no código fonte será refletida na aplicação em tempo real.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamerodev%2Felectron-typescript-react-clean-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamerodev%2Felectron-typescript-react-clean-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamerodev%2Felectron-typescript-react-clean-architecture/lists"}