https://github.com/t0malexander/nlw-esports
Encontre seu duo para jogatinas online com esta aplicação fullstack e multiplataforma desenvolvida com React, React Native e Node.js
https://github.com/t0malexander/nlw-esports
axios babel expo express google-fonts nodejs phosphor-icons prisma radix-ui react react-native sqlite tailwind-css typescript vitejs
Last synced: 2 months ago
JSON representation
Encontre seu duo para jogatinas online com esta aplicação fullstack e multiplataforma desenvolvida com React, React Native e Node.js
- Host: GitHub
- URL: https://github.com/t0malexander/nlw-esports
- Owner: T0mAlexander
- Created: 2023-01-20T21:32:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-05T07:17:24.000Z (about 2 years ago)
- Last Synced: 2025-02-15T06:16:58.408Z (4 months ago)
- Topics: axios, babel, expo, express, google-fonts, nodejs, phosphor-icons, prisma, radix-ui, react, react-native, sqlite, tailwind-css, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 6.76 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NLW eSports
> ### Descrição
> 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
## Dependências e bibliotecas
- 
**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
- 
**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
- 
**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
- 
**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
- 
**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
- 
**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
- 
**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
- 
**Google Fonts:** biblioteca de fontes gratuitas disponibilizada pelo Google. Permite que desenvolvedores utilizem fontes em seus projetos sem precisar armazenar os arquivos localmente
- 
**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
- 
**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
- 
**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
- 
**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
- 
**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
- 
**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
- 
**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
## Pré-requisitos
- [**Expo CLI**](https://docs.expo.dev/archive/expo-cli/#installation) instalado na máquina com versão mínima 48.0.0 ou superior
- [**Node.js**](https://nodejs.org/en/download) instalado na máquina com versão mínima 17.0.0 ou superior
- [**Expo Go**](https://expo.dev/client) instalado em seu smartphone (disponível para iOs e Android)
## Instalação e uso local
1. Clone o repositório
```bash
gh repo clone T0mAlexander/NLW-eSports
```
2. Acesse os diretórios `mobile`, `server` e `web` e instale as dependências
```bash
cd && npm install
```
3. Após a instalação, inicie o servidor
```bash
npm run server
```
- 💡 O servidor estará sendo executado na porta `3000`
- **Dica de ouro:** caso queira ver a interface do banco de dados, digite o comando `npx prisma studio` no terminal
> **Lembrete:** certifique-se antes de navegar no diretório `server`
4. 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)
❓ **Para descobrir seu IPV4**
>**Linux**: abra o terminal e digite o comando
```bash
ifconfig | grep -m 1 inet
```
>**Windows:** abra o CMD e digite
```bash
ipconfig | findstr /R /C:"IPv4 Address"
```
5. 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**
```bash
expo start
```
> ⚠️ 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
6. Para iniciar a aplicação web, vá até o diretório `web` e digite o comando abaixo
```bash
npm run dev
```
**Lembrete:** o Vite.js por padrão hospeda a prévia da aplicação desktop no endereço `http://localhost:5173`
## Modelagem do Banco de Dados
Este 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)
### Tabela Game 🎮
Representa um jogo na aplicação.
| Coluna | Descrição |
|--------------|------------------------------------------------------------|
| id | ID do jogo (UUID). |
| title | Título do jogo. |
| bannerUrl | URL da imagem do banner do jogo. |
| ads | Relação com os anúncios publicados para este jogo. |
### Tabela Ad 📢
Representa um anúncio de procura por parceiro.
| Coluna | Descrição |
|--------------|----------------------------------------------------------------------------------|
| id | ID do anúncio (UUID). |
| gameId | ID do jogo ao qual o anúncio está vinculado. |
| name | Nome do anunciante. |
| yearsPlaying | Quantidade de anos que o anunciante joga o jogo. |
| discord | Nome do usuário do Discord do anunciante. |
| weekDays | Dias da semana que o anunciante está disponível para jogar. Separados por vírgula.|
| hourStart | Horário de início em que o anunciante está disponível para jogar. |
| hourEnd | Horário de término em que o anunciante está disponível para jogar. |
| useVoip | Preferência do usuário do chat de voz durante o jogo. |
| createdAt | Data e hora em que o anúncio foi criado. |
### Relações
- 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`.
## Termos de uso
Este projeto é de livre uso para outros sem nenhuma restrição para cópias ou forks 👍🏻
### Autor: Tom Alexander