luk4x / copa-mobile

⚽ NLW Copa Mobile Interface - A Mobile Application for Copa Web Interface | React Native, NativeBase, Phosphor...

🇺🇸 English

🇧🇷 Português

⚽ Copa Project Mobile Interface

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

📹 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

• Typescript
• React Native
• NativeBase
• Phosphor React Native
• React Navigation
• Dotenv
• Country List
• Axios
• Dayjs
• Expo
• Expo Auth Session
• Expo Status Bar
• Expo Font
• React Native Safe Area Context
• React Native Screens
• React Native Svg
• React Native Svg Transformer
• React Native Country Flag
• npm

📝 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