iGames - Seu App Game mais completo

Sobre • Layout • Funcionalidades • Como executar • Tecnologias • Autor

---

💻 Sobre o projeto

iGames é um app de consulta que utiliza a API da RAWG para trazer informações sobre GAMES.

---

🎨 Layout

O layout da aplicação está disponível no Figma:

Telas

---

⚙️ Funcionalidades

TELA HOME

• Tela principal, contendo:
  • Listagem dos trending Games
    • Ao clicar nos games, acessa a tela de datlhes sobre o game escolhido
  • Busca de games pelo nome
    • Digitando o nome e clicando na busca, acessa a tela de SEARCH trazendo todo os GAMES que contem o termo buscado
  • Bookmark para acessar os favoritos do usuario (salvo em localStorage)
  • Listagem das categorias dos Games.
    • Ao clicar na categoria, acessa a tela de categorias trazendo todos os games da categoria escolhida

TELA DETAILS

• Tela de datlhes do jogo, contendo:
  • Caroussel de fotos (arrastando lateralmente)
  • Informações do Game
    • (Avaliação, Nome, Descrição, PLataformas e Lojas)
  • Botão para descrição maior
    • Ao clicar, abre uma bottom Sheet contendo a descricao inteira

TELA SEARCH

• Tela de busca, contendo:
  • Todos os games encontrados pelo termo buscado

TELA CATEGORIES

• Tela de busca por categoria, contendo:
  • Todos os games encontrados pela categoria escolhida

TELA FAVORITES

• Tela de Favoritos, contendo:
  • Todos os games salvos pelo usuário

---

🚀 Como executar o projeto

💡 Este projeto utiliza o EXPO CLI como ferramenta de desenvolvimento, portanto é preciso ter o EXPO instalado na máquina.

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

• Git
• Node.js
• VSCode

🎲 Rodando o Projeto

Clone este repositório

  
git clone https://github.com/lucashs94/React_Native_-_iGames.git
  

Acesse a pasta do projeto

  
cd React_Native_-_iGames
  

Instale as dependências

  
npm install
  

Altere o arquivo .env

  
cp .env.exampe .env
nano .env
  

Rode o projeto com Expo limpando o cache

  
npx expo start --clear
  

---

✨ Tecnologias

• React Native
• Typescript
• Styled Components
• React Native Bottom Sheet (@horhom)
• Expo
• Async Storage
• Vector Icons
• Axios
• Expo Google Fonts
• Expo Splash Screen
• React Navigation
• React Native Gesture Handler
• React Native Reanimated
• React Native Safe Area Context

Veja o arquivo package.json

---

🦸 Autor