{"id":24247371,"url":"https://github.com/rodrigofontesdev/bank","last_synced_at":"2025-09-01T09:34:49.660Z","repository":{"id":271310109,"uuid":"913019010","full_name":"rodrigofontesdev/bank","owner":"rodrigofontesdev","description":"Interface de internet banking desenvolvida para o teste técnico da Dojo Solution, construído em React.","archived":false,"fork":false,"pushed_at":"2025-07-19T00:10:16.000Z","size":763,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-19T04:57:01.980Z","etag":null,"topics":["axios","clean-architecture","commitlint","css-module","eslint","husky","mvvm","prettier","react","react-hook-form","react-router","typescript","vitest","zod"],"latest_commit_sha":null,"homepage":"https://meubanco-rodrigofontesdev.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigofontesdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-01-06T21:38:30.000Z","updated_at":"2025-07-19T00:10:12.000Z","dependencies_parsed_at":"2025-07-19T02:21:37.002Z","dependency_job_id":null,"html_url":"https://github.com/rodrigofontesdev/bank","commit_stats":null,"previous_names":["rodrigofontesdev/bank"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rodrigofontesdev/bank","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fbank","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fbank/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fbank/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fbank/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigofontesdev","download_url":"https://codeload.github.com/rodrigofontesdev/bank/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fbank/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273100335,"owners_count":25045697,"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-09-01T02:00:09.058Z","response_time":120,"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":["axios","clean-architecture","commitlint","css-module","eslint","husky","mvvm","prettier","react","react-hook-form","react-router","typescript","vitest","zod"],"created_at":"2025-01-14T23:46:02.478Z","updated_at":"2025-09-01T09:34:49.630Z","avatar_url":"https://github.com/rodrigofontesdev.png","language":"TypeScript","readme":"![cover](https://github.com/user-attachments/assets/27be461c-b669-4118-88ac-5c2d8bec243d)\n\n# MeuBanco\n\nUma interface simulando o Internet Banking de um banco. O objetivo da aplicação é que o usuário possa entrar com suas credenciais e ser redirecionado para a página inicial da aplicação.\n\nA arquitetura do projeto adapta princípios da Clean Architecture e do padrão MVVM. A Clean Architecture visa aprimorar a organização, a reusabilidade e a testabilidade a longo prazo, enquanto o MVVM facilita o desacoplamento do código e a manutenção.\n\nA estrutura do projeto está organizada da seguinte forma:\n\n- :open_file_folder: **/src:**\n\n  - :open_file_folder: **/application:** Casos de uso da aplicação, incluindo interações com serviços externos e backend (autenticação, cadastro, busca de usuário, envio de e-mails, etc).\n\n  - :open_file_folder: **/domain:** Entidades (modelos) de negócio da aplicação.\n\n  - :open_file_folder: **/infra:** Adaptadores para serviços externos, como banco de dados e cliente HTTP, visando o baixo acoplamento.\n\n  - :open_file_folder: **/main:** Ponto de entrada da aplicação.\n\n  - :open_file_folder: **/presentation:** Camada de apresentação, contendo componentes da interface do usuário (React Hooks, componentes, assets, helpers, etc). Tudo relacionado à exibição de dados na UI reside neste módulo.\n\n    - :open_file_folder: **/pages:** Páginas da aplicação, utilizando o padrão MVVM.\n\n    - :open_file_folder: **/static:** Arquivos de assets, como fontes, imagens e CSS.\n\n    - :open_file_folder: **/templates:** UI que são compartilhados entre multiplas páginas.\n\n    - :open_file_folder: **/ui:** Componentes de UI que podem ser reaproveitados.\n\n  - :open_file_folder: **/test:** Mocks e testes da aplicação.\n\nPara auxiliar com importações de arquivos foi feito uso dos path aliases (`@application`, `@domain`, `@infra`, `@main`, `@presentation`, `@test`) que podem ser configurados nos arquivos **vite.config.ts** e **tsconfig.app.json**.\n\nOs componentes de página, devido à sua complexidade, lógica e dependências, adotam a arquitetura MVVM para facilitar a manutenção, testabilidade e desacoplamento. A seguinte convenção de nomenclatura foi utilizada:\n\n- **\\*.model.ts:** Contém a lógica do componente, frequentemente utilizando Custom Hooks para o gerenciamento de estado e dados.\n\n- **\\*.controller.tsx:** Representa a ViewModel, injetando dependências na camada de visão.\n\n- **\\*.view.tsx:** Camada de visão pura, sem lógica de negócio, recebendo dependências exclusivamente via propriedades.\n\n- **\\*.schema.ts:** Esquemas de validação de dados, utilizados principalmente em formulários.\n\n- **\\*.spec.ts:** Testes unitários e de integração do componente.\n\n## Pré-requisitos\n\n- Git\n- Node 20 (ou superior)\n\n## Como iniciar\n\nClone o repositório em um novo diretório:\n\n```\ngit clone git@github.com:rodrigofontesdev/bank.git\n```\n\n```\ncd bank\n```\n\nInstale as dependências do projeto:\n\n```\nnpm install\n```\n\nInicie o projeto em ambiente de desenvolvimento:\n\n```\nnpm run dev\n```\n\n## Funcionalidades\n\n- Autenticação (in-memory)\n- Suite de testes (`npm run test`)\n\n## Como usar\n\n\u003e [!NOTE]\n\u003e\n\u003e Recomendo a utilização de uma resolução de tela igual ou superior a 1280 pixels para melhor visualização.\n\nNa tela de login, para conseguir acessar a aplicação utilize as seguintes credenciais:\n\n\u003e **Usuário:** demo\n\u003e\n\u003e **Senha:** demo\n\nSe você tentar acessar qualquer uma das rotas a seguir sem estar logado, o sistema irá redirecioná-lo automaticamente para a página de login.\n\n- /dashboard\n- /dashboard/carteira\n- /dashboard/transferencias\n- /dashboard/servicos\n- /dashboard/configuracoes\n\nComo os dados de autenticação são armazenados apenas na memória, a página de login será carregada automaticamente sempre que uma página for atualizada.\n\n## Considerações finais\n\nPara simplificar, a autenticação neste projeto utiliza armazenamento em memória. Em cenário real, um sistema de autenticação robusto com JWT ou cookies seria implementado.\n\nBibliotecas como **TanStack Query**, com recursos de busca de dados, cache e sincronização, seriam ideais para gerenciar a autenticação e as informações do usuário.\n\nO estado do usuário autenticado, por sua vez, poderia ser gerenciado com **Context API** ou uma solução mais robusta como **Zustand** ou **Redux**, considerando a complexidade da aplicação.\n\n## Construído com\n\n- **Vite:** Build e bundling otimizado da aplicação.\n\n- **React:** Construção de interfaces de usuário (UI).\n\n- **TypeScript:** Tipagem estática para JavaScript.\n\n- **CSS Modules:** Estilização CSS com escopo local para componentes.\n\n- **React Router:** Gerenciamento de rotas na aplicação.\n\n- **React Hook Form:** Gerenciamento de formulários.\n\n- **Zod:** Esquemas para validação de dados.\n\n- **Axios:** Requisições HTTP.\n\n- **Vitest:** Testes unitários e de integração.\n\n- **ESLint:** Análise estática de código.\n\n- **Prettier:** Formatação consistente de código.\n\n- **Husky:** Gerenciador de Git hooks, executando o Prettier antes dos commits.\n\n- **Commitlint:** Padronização de mensagens de commit, aplicando o padrão \"Conventional Commits\".\n\n## Licença\n\nEste projeto está licenciado sob a licença MIT - consulte o arquivo [LICENSE.md](LICENSE) para obter detalhes.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigofontesdev%2Fbank","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigofontesdev%2Fbank","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigofontesdev%2Fbank/lists"}