Ravn GraphQL Code Challenge

This is an Android mobile app that allows you to browse all the characters in the Star Wars GraphQL API.

Technologies

React Native

A framework for building native apps for Android and iOS using React.

React Navigation

Stack navigator for use on iOS and Android.

Apollo Client

A library for JavaScript that enables manage data with GraphQL.

Running the project

Prerequisites

Install Android Studio on your computer.
Install NodeJS on your computer.
Install react-native-cli globally on your computer.

npm install -g react-native-cli

Setup

Clone this project

git clone < project-url.git >

Install dependencies.

npm install

Run project

Launch a virtual android device (through Android Studio for instance)

If you have never installed any android virtual device, follow those instructions

Then, run the project:

react-native run-android

Project Description

The project consumes a GraphQL-based service to display all the characters in the Star Wars universe and allows us to select each character to display information about them.

Project structure

The project has four main folders: screens contains the differents presentations of the app, api has the configuration and the queries of graphql, components is composed of the objects neccesary to solve the challenge, navigation has the configuration necesary to move on the app, App.js works like a main root of the project, and finally theme control the style of the application.

starwars 
└── src
    └── api
    │   ├── Client.js
    │   ├── Query.js
    ├── components
    │   ├── Detail
    │   │   ├── Detail.js
    │   │   └── Detail.style.js
    │   ├── ItemList
    │   │   ├── ItemList.js
    │   │   └── ItemList.style.js
    │   ├── List
    │   │   ├── List.js
    │   │   └── List.style.js
    │   ├── Loading
    │   │   ├── Loading.js
    │   │   └── Loading.style.js
    │   └──
    ├── navigation
    │   └── StackNavigator.js 
    ├── screens
    │   ├── Home.js
    │   └── Info.js    
    ├── App.js
    └── theme.js

Navigation

When the application starts it will try to load the first 5 characters and you will see the loading icon.

If the query fails for any reason it will display an error notice.

The application will load the characters 5 by 5 using pagination until all are loaded.

If you click in one of the characters the app will load the information of the selected character.

Additional information

The query allPeople explote the graph structure of GraphQL getting all the information necesary when the app start.
The pagination used is cursor-based and the useQuery function necessary to fetch more data was replace for TypePolicy introduced in apollo 3.0.

patrick100/Ravn-Challenge-V2-PatrickLazo