{"id":29804500,"url":"https://github.com/marcelomduarte/javascript_react_memo_game","last_synced_at":"2026-04-04T20:32:45.325Z","repository":{"id":301485121,"uuid":"984372064","full_name":"marcelomduarte/javascript_react_memo_game","owner":"marcelomduarte","description":"🧠 Jogo da Memória","archived":false,"fork":false,"pushed_at":"2025-06-27T05:25:51.000Z","size":99,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-28T13:03:52.437Z","etag":null,"topics":["babel","css","html","react","webpack"],"latest_commit_sha":null,"homepage":"https://the-memo-game.vercel.app","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/marcelomduarte.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,"zenodo":null}},"created_at":"2025-05-15T20:30:11.000Z","updated_at":"2025-06-27T05:31:42.000Z","dependencies_parsed_at":"2025-06-27T05:35:00.663Z","dependency_job_id":null,"html_url":"https://github.com/marcelomduarte/javascript_react_memo_game","commit_stats":null,"previous_names":["marcelomduarte/javascript_react_memo_game"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marcelomduarte/javascript_react_memo_game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelomduarte%2Fjavascript_react_memo_game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelomduarte%2Fjavascript_react_memo_game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelomduarte%2Fjavascript_react_memo_game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelomduarte%2Fjavascript_react_memo_game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcelomduarte","download_url":"https://codeload.github.com/marcelomduarte/javascript_react_memo_game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcelomduarte%2Fjavascript_react_memo_game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["babel","css","html","react","webpack"],"created_at":"2025-07-28T13:01:09.179Z","updated_at":"2026-04-04T20:32:45.291Z","avatar_url":"https://github.com/marcelomduarte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧠 Jogo da Memória\n\n## 🎯 Sobre o projeto\n\nO **Jogo da Memória** é uma aplicação web desenvolvida com **React puro**, criada como parte de um curso para ensinar fundamentos de React. Utiliza **Webpack** e **Babel** para configuração do ambiente e oferece uma experiência interativa com troca de tema (claro/escuro) e um jogo da memória baseado em pares de emojis.\n\n## 🎬 Demonstração\n\n- 🔗 **Acesse o jogo online:** [https://the-memo-game.vercel.app/](https://the-memo-game.vercel.app/)\n\n- 🎨 **Interface do frontend**:\n\n   ![Tela Inicial do App](./assets/homepage.png)\n\n## ✨ Funcionalidades\n\nO jogo da memória oferece uma experiência interativa onde os jogadores precisam encontrar pares de cartas idênticas. As principais funcionalidades incluem:\n\n- **Tabuleiro dinâmico**: Cartas são distribuídas aleatoriamente a cada nova partida.\n- **Lógica de jogo**: Gerenciamento de virada de cartas, verificação de pares e ocultação de cartas não correspondentes.\n- **Controle de estado**: Demonstração clara de como o estado é gerenciado em componentes React para controlar o fluxo do jogo.\n- **Reiniciar jogo**: Botão para recomeçar uma nova partida a qualquer momento.\n- **Componentização**: O projeto é dividido em componentes reutilizáveis (e.g., `Board`, `Card`) para uma arquitetura modular e de fácil manutenção.\n- **Context API**: Utilização da Context API do React para gerenciamento de temas (claro/escuro).\n\n## ⚙️ Tecnologias utilizadas\n\n- **React.js**: Biblioteca JavaScript para construção de interfaces de usuário.\n- **Webpack**: Empacotador de módulos para aplicações JavaScript.\n- **Babel**: Transpilador JavaScript para garantir compatibilidade com versões mais antigas do navegador.\n- **HTML5**: Estrutura semântica da página.\n- **CSS3**: Estilização e responsividade.\n\n## 📂 Estrutura do projeto\n\n```text\n/javascript_react_memo_game\n├── /assets                   \n│   └── homepage.png          \n├── /dist                   \n│   ├── index.html                       \n│   └── style.css         \n├── /src\n│   ├── /components\n│   │   ├── Board.jsx\n│   │   └── Card.jsx\n│   ├── /context\n│   │   └── ThemeContext.jsx\n│   ├── App.jsx\n│   └── index.jsx                        \n├── .babelrc                  \n├── .gitignore \n├── package-lock.json\n├── package.json             \n├── webpack.config.js        \n└── README.md                \n```\n\n## 🚀 Instalação e execução\n\n### 💻 Pré-requisitos\n\nCertifique-se de ter o **Node.js** (versão 14 ou superior) instalado em sua máquina. O npm (Node Package Manager) é incluído automaticamente com a instalação do Node.js.\n\n### ▶️ Passos para execução\n\nPara configurar e rodar o Jogo da Memória em seu ambiente de desenvolvimento local, siga os passos abaixo:\n\n1. **Clone o repositório**:\n\n   ```bash\n   git clone https://github.com/marcelomduarte/javascript_react_memo_game.git\n   ```\n\n2. **Acesse o diretório**:\n\n   ```bash\n   cd javascript_react_memo_game\n   ```\n\n3. **Instale as dependências**:\n\n   ```bash\n   npm install\n   ```\n\n4. **Inicie o servidor de desenvolvimento**:\n\n   ```bash\n   npm start\n   ```\n\n5. **Acesse o Jogo no navegador**:\n\n   Abra seu navegador e navegue para `http://localhost:8080` para jogar.\n\n### 📦 Build para produção\n\nPara gerar uma versão otimizada do aplicativo para deployment em produção, execute o comando de build. Os arquivos estáticos serão gerados na pasta `./dist`.\n\n   ```bash\n   npm run build\n   ```\n\n## 🎮 Como jogar\n\n1. Clique em duas cartas para revelá-las;\n2. Se as cartas formarem um par, elas permanecerão viradas;\n3. Se não formarem par, elas voltarão a ficar ocultas;\n4. Continue até encontrar todos os pares;\n5. Tente completar no menor tempo e com menos tentativas possível!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcelomduarte%2Fjavascript_react_memo_game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcelomduarte%2Fjavascript_react_memo_game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcelomduarte%2Fjavascript_react_memo_game/lists"}