Voltar para Alura
Início Profile Projeto
Avatar de

Lucas Maciel

Veja no Github

⚽ Copa Mobile Interface

  • react native
  • typescript
  • nativebase
  • phosphor
  • react navigation
  • dotenv
  • country list
  • axios
  • dayjs
  • expo
  • react native svg
  • react native safe area context
  • react native screens
  • react native country flag
  • npm
🇺🇸 English
🇧🇷 Português

luk4x-repo-status luk4x-repo-license

⚽ Copa Project Mobile Interface


Vídeo   |    Tecnologias   |    Sobre   |    Telas   |    Componentes   |    Clone   |    Contato


📹 Apresentação em Vídeo do Projeto

Caso o vídeo apresente algum erro, recarregue a página!

🚀 Tecnologias utilizadas

📝 Sobre

Assistir o vídeo acima ajudará na compreensão da explicação!

Esse projeto é a Interface Mobile da Copa, uma aplicação temática da copa do mundo que realiza o cadastro e a gerência de bolões, jogos e usuários, desenvolvida durante a trilha Ignite da NLW Copa da Rocketseat.
Os dados são fornecidos pela sua API desenvolvida essencialmente com Fastify.

📄 Telas

O projeto é composto por 5 componentes de tela, sendo eles:

  • SignIn: Além de ser a tela inicial, nela o usuário deve se cadastrar no App, e utilizo o sistema de autenticação do Google para tal.
  • Pools: Essa tela é responsável por listar todos os bolões que o usuário criou e/ou participa.
  • New: Essa tela é responsável pela criação de um bolão.
  • Find: Essa tela é responsável pela busca de um bolão por seu código. Caso o bolão seja encontrado, você se tornará participante dele automaticamente.
  • Details: Essa tela é responsável por mostrar os detalhes de um bolão: Quem o criou, quantos participam dele e quais jogos ele tem. Você também pode dar palpites nesses jogos e acessar seu Ranking.

📑 Demais Componentes

O projeto conta com mais 16 componentes que são reaproveitados pela aplicação, sendo eles:

  • Button: Esse componente é relativo ao botão de destaque que se repete nas telas da aplicação. Ele tem o modo PRIMARY e SECONDARY.
  • ButtonIcon: Esse componente é relativo a qualquer botão que seja apenas um ícone que se repete no Header da aplicação.
  • EmptyMyPoolList, EmptyPoolList, EmptyRankingList: Esses componentes são relativos às suas respectivas listas, mostrados quando elas estão vazias.
  • Flag, Team: Esses componentes são relativos aos ícones das bandeiras dos países na tela de Details.
  • Game: Esse componente é relativo aos jogos na tela de Details.
  • Guesses: Esse componente retorna a lista de jogos(Games) na tela de Details.
  • Header: Esse componente é relativo ao cabeçalho que se repete nas telas da aplicação.
  • Input: Esse componente é relativo aos Inputs que se repetem nas telas da aplicação.
  • Loading: Esse componente é relativo ao efeito de carregamento, usado para aguardar requisições.
  • Option: Esse componente é relativo às opções de lista na tela de Details.
  • Participants: Esse componente é responsável por exibir os participantes de um bolão, utilizado no PoolHeader.
  • PoolHeader: Esse componente é responsável por exibir os dados do bolão na tela de Details.
  • PoolCard: Esse componente é responsável por exibir os dados do bolão resumidos e em um card, como utilizados na tela de Pools.

Destaco mais 3 componentes que desempenham um papel fundamental na aplicação:

  • AuthContext e useAuth: São respectivamente, o contexto que guarda informações do usuário, e o hook criado para utilizá-lo de forma simplificada. Eles são responsáveis por deixar as informações do usuário acessíveis pela aplicação.
  • api: Criado com o auxílio do axios, esse componente guarda a URL base da API que fornece os dados para o projeto.

📖 Clonando o Projeto

Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v18.12.0 ou superior previamente instalados.
Você também precisará da API do projeto rodando, portanto, antes de continuar por aqui, vá ao Repositório da API e faça os passos sobre como cloná-la e executá-la primeiro!
Feito esses dois passos, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/copa-mobile

# Entre no repositório com:
> cd copa-mobile

# Instale as dependências com:
> npm install

# Execute o projeto com:
> npx expo start

# Feito isso, você já poderá acessar o projeto pelo seu celular com QR Code que aparecerá no terminal! (ou por um link como: exp://192.168.0.112:19000)

🤝 Contato dos Contribuintes

Vitrine.Dev 🪟
Luk4x Github Photo
Lucas Maciel
🪧 Vitrine.Dev Lucas Maciel
✨ Nome ⚽ Copa Mobile Interface
🏷️ Tecnologias react native, typescript, nativebase, phosphor, react navigation, dotenv, country list, axios, dayjs, expo, react native svg, react native safe area context, react native screens, react native country flag, npm
📷 Img

Voltar ao Topo

Veja meu projeto em: https://github.com/Luk4x/copa-mobile