⚽ Copa Project Mobile Interface

📹 Apresentação em Vídeo do Projeto

copa-mobile-video.1.mp4

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 🪟

_{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