Code Monkey home page Code Monkey logo

avengers-characters's Introduction

Personagens dos Vingadores

Conheça os principais personagens da edição #1

Mobile Application Demo

Funcionamento

  • Home: tela de apresentação do aplicativo, que permite que o usuário acesse a listagem e conheça os personagens.
  • List Characters: essa tela conta com a relação de todos os personagens da edição #1 dos Vingadores, obtida através da requisição da Marvel Comics API, sendo possível clicar sobre o personagem desejado para visualizar todos os detalhes.
  • Details Character: nessa tela é possível visualizar todos os detalhes do personagem escolhido, tais como imagem, nome, descrição (caso tenha), número de HQs em que ele aparece e a listagem com o nome das 20 primeiras.

Tecnologias

  • Expo - permite desenvolver aplicações mobile com React Native e com o Javascript como linguagem de programação. Para a criação do projeto foi utilizada a configuração Expo Bare Workflow, que além de trazer as facilidades proporcionadas pelo Expo, permite ter autonomia para realizar customização nas pastas nativas (Android e iOS) caso necessário.
  • Expo Vector Icons: ao utilizar o Expo, é possível usufruir do Expo Vector Icons, uma coleção que reuni várias bibliotecas de ícones. Para essa aplicação foi utilizado o MaterialIcons, que apresentava todos os ícones desejados para a aplicação.
  • TypeScript: o TypeScript foi utilizado com o intuito de adicionar tipagem aos componentes da aplicação, de modo a facilitar a manutenção, aumentar a produtividade (IntelliSense) e evitar erros.
  • Expo Font e Expo Google Fonts: possibilitou utilizar as fontes Chivo e Overpass do Google para personalizar a tipografia da aplicação.
  • App Loading: recurso utilizado para manter a aplicação na tela de splash enquanto as fonts são carregadas.
  • React Navigation: essa biblioteca foi utilizada com o intuito de criar a navegação e rotas da aplicação.
  • Styled Components: biblioteca de estilização baseada em CSS. Ela foi utilizada devido à flexibilidade e dinamismo que oferece, possibilitando utilizar propriedades com base em estados.
  • React Native Responsive Font Size: a partir dessa biblioteca foi possível utilizar a função RFValeu, que faz o tratamento do valor inserido, possibilitando trabalhar com diferentes proporções.
  • Axios: essa biblioteca foi utilizada para lidar com requisição HTTP com a API.
  • Moti: baseado na biblioteca Reanimated v2, o Moti permite criar animações para React Native.
  • Expo Linear Gradient: possibilita trabalhar com o preenchimento gradiente nos componentes.
  • Babel Plugin Inline Dotenv: permite gerenciar os dados sensíveis da aplicação.
  • React Native Testing Library: biblioteca de testes que faz o uso do Jest, uma das bibliotecas mais utilizadas para testes em ambiente Java Script.

Instruções

Para clonar e executar essa aplicação, execute os seguintes comandos:

# Clonar o repositório
$ git clone https://github.com/isabelamoraes/avengers-characters.git avengers-characters

# Acessar a pasta do projeto
$ cd avengers-characters

# Installar as dependências
$ yarn

# Executar o projeto com o Expo
$ expo start

# Executar o teste
$ yarn test

Referência

As informações sobre os personagens dessa aplicação são obtidas através da Marvel Comics API.

Design da Aplicação

De modo a auxiliar o processo de desenvolvimento do aplicativo, o design foi projetado no Figma e o modelo está disponível para visualização nesse link.

avengers-characters's People

Contributors

isabelamoraes avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.