| 🇺🇸 English |
| 🇧🇷 Português |
Vídeo | Tecnologias | Sobre | Telas | Componentes | Clone | Contato
copa-mobile-video.1.mp4
Caso o vídeo apresente algum erro, recarregue a página!
- 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
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.
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.
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
PRIMARYeSECONDARY. - 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.
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:19500)
Vitrine.Dev 🪟
|
Lucas Maciel
|
