{"id":18311358,"url":"https://github.com/BetterCallTom/NLW-eSports","last_synced_at":"2025-12-30T19:10:07.449Z","repository":{"id":153977072,"uuid":"591480752","full_name":"T0mAlexander/NLW-eSports","owner":"T0mAlexander","description":"Encontre seu duo para jogatinas online com esta aplicação fullstack e multiplataforma desenvolvida com React, React Native e Node.js","archived":false,"fork":false,"pushed_at":"2023-05-05T07:17:24.000Z","size":7084,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T06:16:58.408Z","etag":null,"topics":["axios","babel","expo","express","google-fonts","nodejs","phosphor-icons","prisma","radix-ui","react","react-native","sqlite","tailwind-css","typescript","vitejs"],"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/T0mAlexander.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-01-20T21:32:12.000Z","updated_at":"2023-12-07T03:02:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"3d4ae8b7-e675-4eb9-8118-f1286ca82a19","html_url":"https://github.com/T0mAlexander/NLW-eSports","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T0mAlexander%2FNLW-eSports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T0mAlexander%2FNLW-eSports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T0mAlexander%2FNLW-eSports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T0mAlexander%2FNLW-eSports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/T0mAlexander","download_url":"https://codeload.github.com/T0mAlexander/NLW-eSports/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248036065,"owners_count":21037092,"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":["axios","babel","expo","express","google-fonts","nodejs","phosphor-icons","prisma","radix-ui","react","react-native","sqlite","tailwind-css","typescript","vitejs"],"created_at":"2024-11-05T16:17:26.812Z","updated_at":"2025-12-30T19:10:07.423Z","avatar_url":"https://github.com/T0mAlexander.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NLW eSports\n\n\u003e ### Descrição\n\u003e Essa é uma aplicação fullstack e multiplataforma (desktop e mobile) com o propósito de conectar jogadores em busca de parceiros para jogos multijogador online no qual foi desenvolvida utilizando majoritariamente React, React Native, Typescript, SQLite e Node.js. Também utiliza outras bibliotecas e ferramentas como Expo, Babel, Prisma e Tailwind CSS. Para utilizá-la, é necessário ter Expo CLI e Node.js instalados, além do Expo Go no smartphone\n\n## Dependências e bibliotecas\n\n- \u003cimg height=\"16\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1674280418/Github/Profile%20Markdown/react_osmnfo.svg\"/\u003e  **React:** biblioteca JavaScript para construção de interfaces de usuário. É mantida pela Meta Incorporation e é uma das tecnologias mais populares em aplicações web modernas\n- \u003cimg height=\"16\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1674280418/Github/Profile%20Markdown/react_native_uozofa.svg\"/\u003e **React Native:** framework para construção de aplicativos móveis utilizando React. Permite o desenvolvimento de aplicativos para iOS e Android com uma única base de código, utilizando componentes nativos do sistema operacional\n- \u003cimg height=\"16\" width=\"15\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\"/\u003e **Typescript:** linguagem de programação que adiciona tipagem estática e outras funcionalidades ao JavaScript. Permite detectar erros em tempo de compilação e melhorar a qualidade do código em projetos grandes\n- \u003cimg height=\"16\" width=\"15\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg\"/\u003e **Node.js:** ambiente de execução JavaScript baseado no motor V8 do Google Chrome. Permite que o JavaScript seja executado no lado do servidor, permitindo a construção de aplicações web escaláveis e de alta performance\n- \u003cimg height=\"16\" width=\"15\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sqlite/sqlite-original.svg\" /\u003e **SQLite:** banco de dados relacional que utiliza arquivos locais para armazenar dados. É uma opção leve e eficiente para aplicações que não exigem alta escalabilidade\n- \u003cimg height=\"15\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683264432/expo_dark_icon_stspgv.png\" /\u003e **Expo:** plataforma para desenvolvimento de aplicativos móveis utilizando React Native. Oferece diversas ferramentas para facilitar o desenvolvimento, como um conjunto de componentes pré-construídos e acesso a APIs nativas\n- \u003cimg height=\"16\" width=\"15\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/babel/babel-original.svg\" /\u003e **Babel:** transcompilador que permite escrever código JavaScript utilizando recursos mais modernos e compatíveis com padrões recentes, mas que ainda não são suportados por todos os navegadores. O Babel transforma esse código em uma versão compatível para uso em produção\n- \u003cimg height=\"16\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683263929/google_fonts_icon_q0pmrl.svg\" /\u003e **Google Fonts:** biblioteca de fontes gratuitas disponibilizada pelo Google. Permite que desenvolvedores utilizem fontes em seus projetos sem precisar armazenar os arquivos localmente\n- \u003cimg height=\"16\" width=\"15\" style=\"border-radius: 30px\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683264571/phosphor_icons_c7liwf.png\" /\u003e **Phosphor Icons:** conjunto de ícones de código aberto criados pela equipe do GitHub. Os ícones são disponibilizados em formato SVG e podem ser utilizados em projetos web\n- \u003cimg height=\"16\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683264796/radix_icon_vlnmh3.svg\" /\u003e **Radix:** conjunto de componentes React desenvolvido pela equipe do Modulz. Oferece componentes para construção de interfaces de usuário acessíveis e com boa performance\n- \u003cimg height=\"16\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1682825523/Github/Profile%20Markdown/prisma-orm_lxicqu.svg\" /\u003e **Prisma:** ferramenta de mapeamento objeto-relacional (ORM) para Node.js e TypeScript. Permite que desenvolvedores trabalhem com banco de dados utilizando modelos de objetos em vez de escrever SQL diretamente\n- \u003cimg height=\"16\" width=\"15\" style=\"border-radius: 30px\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683264139/express_js_icon_i3mjtq.png\" /\u003e **Express.js:** framework para construção de aplicações web em Node.js. Oferece uma camada de abstração sobre o protocolo HTTP e facilita a criação de rotas e manipulação de requisições e respostas\n- \u003cimg height=\"16\" width=\"15\" style=\"border-radius: 30px\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683265024/axios_djp6gm.ico\" /\u003e  **Axios HTTP:** biblioteca JavaScript para realização de requisições HTTP em navegadores e Node.js. Oferece uma API simples e fácil de usar para realizar chamadas a APIs externas\n- \u003cimg height=\"16\" width=\"15\" style=\"border-radius: 30px\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683265180/tailwind_icon_wpqxn8.png\" /\u003e  **Tailwind CSS:** framework CSS que utiliza classes predefinidas para facilitar a criação de layouts responsivos e estilos personalizados. Permite a criação de interfaces de usuário sem a necessidade de escrever CSS do zero\n- \u003cimg height=\"16\" width=\"15\" src=\"https://res.cloudinary.com/tommello/image/upload/v1683265251/vitejs_icon_xf8wqy.svg\" /\u003e **Vite.js:** ferramenta de inicialização rápida para projetos JavaScript e TypeScript. Permite que o desenvolvimento seja realizado com um servidor de desenvolvimento integrado e oferece recursos como recarregamento veloz para acelerar o ciclo de desenvolvimento\n\n## Pré-requisitos\n\n- [**Expo CLI**](https://docs.expo.dev/archive/expo-cli/#installation) instalado na máquina com versão mínima 48.0.0 ou superior\n- [**Node.js**](https://nodejs.org/en/download) instalado na máquina com versão mínima 17.0.0 ou superior\n- [**Expo Go**](https://expo.dev/client) instalado em seu smartphone (disponível para iOs e Android)\n\n## Instalação e uso local\n\n1. Clone o repositório\n\n```bash\ngh repo clone T0mAlexander/NLW-eSports\n```\n\n2. Acesse os diretórios `mobile`, `server` e `web` e instale as dependências\n\n```bash\ncd \u003cnome-do-diretório\u003e \u0026\u0026 npm install\n```\n\n3. Após a instalação, inicie o servidor\n\n```bash\nnpm run server\n```\n\n- 💡 O servidor estará sendo executado na porta `3000`\n\n- **Dica de ouro:** caso queira ver a interface do banco de dados, digite o comando `npx prisma studio` no terminal\n\n\u003e **Lembrete:** certifique-se antes de navegar no diretório `server`\n\n4. No diretório ``mobile``, troque o IP exemplar pelo IPV4 da sua máquina localizados nas linhas N°30 e N°37 do arquivo [src/screens/Game/index.tsx](https://github.com/T0mAlexander/NLW-eSports/blob/main/mobile/src/screens/Game/index.tsx#L30) e também na linha N° 24 do arquivo [src/screens/Home/index.tsx](https://github.com/T0mAlexander/NLW-eSports/blob/main/mobile/src/screens/Home/index.tsx#L24)\n\n❓ **Para descobrir seu IPV4**\n\n\u003e**Linux**: abra o terminal e digite o comando\n\n```bash\nifconfig | grep -m 1 inet\n```\n\n\u003e**Windows:** abra o CMD e digite\n\n```bash\nipconfig | findstr /R /C:\"IPv4 Address\"\n```\n\n5. Ao finalizar, vá até o diretório `mobile` e inicie a instância da aplicação para dispositivo móvel e em seguida, leia o QR Code gerado em seu terminal com o aplicativo do **Expo Go**\n\n```bash\nexpo start\n```\n\n\u003e ⚠️ Este processo poderá levar entre 5 até 10 minutos na primeira vez, pois o Expo estará fazendo a transcompilação do código para renderizar a aplicação. Após isso, você poderá interagir com a aplicação final\n\n6. Para iniciar a aplicação web, vá até o diretório `web` e digite o comando abaixo\n\n```bash\nnpm run dev\n```\n\n**Lembrete:** o Vite.js por padrão hospeda a prévia da aplicação desktop no endereço `http://localhost:5173`\n\n## Modelagem do Banco de Dados\n\nEste projeto utiliza o SQLite. A URL de conexão é determinada por uma variável de ambiente disponível no arquivo [.env.example](https://github.com/T0mAlexander/NLW-eSports/blob/main/server/src/.env.example) em que seu valor deverá ser o caminho relativo até o arquivo no formato **.sqlite** gerado na pasta [database](https://github.com/T0mAlexander/NLW-eSports/tree/main/server/src/database)\n\n### Tabela Game 🎮\n\nRepresenta um jogo na aplicação.\n\n| Coluna       | Descrição                                                  |\n|--------------|------------------------------------------------------------|\n| id           | ID do jogo (UUID).                                         |\n| title        | Título do jogo.                                            |\n| bannerUrl    | URL da imagem do banner do jogo.                           |\n| ads          | Relação com os anúncios publicados para este jogo.          |\n\n### Tabela Ad 📢\n\nRepresenta um anúncio de procura por parceiro.\n\n| Coluna       | Descrição                                                                        |\n|--------------|----------------------------------------------------------------------------------|\n| id           | ID do anúncio (UUID).                                                            |\n| gameId       | ID do jogo ao qual o anúncio está vinculado.                                      |\n| name         | Nome do anunciante.                                                               |\n| yearsPlaying | Quantidade de anos que o anunciante joga o jogo.                                  |\n| discord      | Nome do usuário do Discord do anunciante.                                         |\n| weekDays     | Dias da semana que o anunciante está disponível para jogar. Separados por vírgula.|\n| hourStart    | Horário de início em que o anunciante está disponível para jogar.                 |\n| hourEnd      | Horário de término em que o anunciante está disponível para jogar.                |\n| useVoip      | Preferência do usuário do chat de voz durante o jogo.                                    |\n| createdAt    | Data e hora em que o anúncio foi criado.                                          |\n\n### Relações\n\n- O modelo `Ad` possui uma relação `game` com o modelo `Game`, onde `gameId` é um chave estrangeira que referencia o campo `id` do modelo `Game`.\n\n## Termos de uso\n\nEste projeto é de livre uso para outros sem nenhuma restrição para cópias ou forks 👍🏻\n\n### Autor: Tom Alexander\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetterCallTom%2FNLW-eSports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBetterCallTom%2FNLW-eSports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetterCallTom%2FNLW-eSports/lists"}