SpaceX Missions (SpaceXplorer) ·

The SpaceXplorer app is an app that displays SpaceX mission launches using the SpaceX GraphQL API. The application was developed using React Native and Expo, a set of tools and services built around React Native and native platforms that helps the development, build and deploy of multiplatform projects and quickly iterate on iOS, Android, and web apps from the same codebase.

Table of content

• Features
• Getting Started
  • _Requirements
• Development
  • _{Install Dependencies}
  • _{Network Configuration}
  • _{Running the Project}
• Main Packages
• Project Structure
• Contributing

Features

Flow (Figma)

Intro Screen (Bonus)

A simple welcome screen.

Home Screen

Displays latest launches data chronologically in a user-friendly manner.

• List pagination using infinite scroll. (Bonus)
• Minor modifications to the request query to provide performance improvements (added launch id) and infinite scroll (query variables). (Bonus)
• Preview of the number of images and rocket name (Bonus)
• Visual Feedbacks
  • List skeleton loading (Bonus)
  • List empty state (Bonus)

Launch Details

Displays launch details including images and the link to the launch article. The launch images can be be toggled as a favorite. You can access the article by tapping the article description item or share the link to the article by tapping the share option in the upper right corner of the screen.

• Share launch article (Bonus)
• Image modal (Bonus)

Link to project visualization in Figma

Getting Started

git clone https://github.com/ozielalves/spacexplorer
cd spacexplorer

Requirements

Instructions for setting up your development workstation and phone.

Workstation

Mac OSX:

• Install node v6+

  • npm v3+

• Install yarn for package management

npm install -g yarn

• Xcode
  • Xcode command line tools

xcode-select --install

Phone

CRNA's development environment uses a client app called Expo Client for live-reloading in development. Its pretty magical.

Go to the App Store on your iOS or Andriod device, and install the Expo Client app (ios, andriod).

Development

Run the project on your workstation and preview app on your phone or in simulator.

Install dependencies

This will create a node_modules folder in your application's root directory and a lock file.

yarn install

Network configuration

If you are running the project on your iOS or Android device, both the device and your workstation must be on the same network! If you are on Windows using WSL, use Tunnel connection option.

Running the project

expo start

To view the app on your phone:

1. Open Expo Client on phone
2. Scan QR code presented in terminal
3. Enjoy launches

Alternatively, you can run the app in a simulator on your workstation:

IOS:

expo start --ios

Android:

expo start --android

Main Packages

All packages used in these project can be found in the package.json file.

Fonts

The inter and rajdhani fonts from the expo-google-fonts package were used in the project.

Navigation

The react-navigation package is responsible for the app's stack navigation.

Beatiful Gradients

The expo-linear-gradient package was used to render some beautiful linear gradients within the application.

Should not be a problem for Iphone X

The react-native-iphone-x-helper package was imported and used to ensure that iPhone X and onwards users can correctly view all screen elements.

Vectors for life

react-native-svg and react-native-svg-transformer were necessary packages for using SVG elements.

Project Structure

├── src
│   ├── assets
│   │   ├── camera.svg
│   │   ├── empty-avatar.png
│   │   ├── illustration.png
│   │   ├── launch-rocket.svg
│   │   └── spaceship.svg
│   ├── components
│   │   ├── Avatar
│   │   ├── Background
│   │   ├── ButtonIcon
│   │   ├── DetailItem
│   │   ├── GuildIcon
│   │   ├── Header
│   │   ├── ImageModal
│   │   ├── ImageSlider
│   │   ├── ListDivider
│   │   ├── ListHeader
│   │   ├── ListItem
│   │   ├── ListSkeleton
│   │   ├── Missions
│   │   ├── MissionsEmptyState
│   │   ├── MissionsErrorState
│   │   ├── Profile
│   │   └── Skeleton
│   ├── global
│   │   └── styles
│   │       └── theme.ts
│   ├── hooks
│   │   └── useMissions
│   │       ├── constants.ts
│   │       ├── index.tsx
│   │       └── queries.ts
│   ├── models
│   │   └── mission.ts
│   ├── routes
│   ├── screens
│   │   ├── Home
│   │   ├── Intro
│   │   └── LaunchDetails
│   ├── services
│   │   ├── cache.ts
│   │   └── client.ts
│   ├── @types
│   │   ├── png.d.ts
│   │   └── svg.d.ts
│   └── utils
│       └── getFormatedDate.ts
├── .gitignore
├── app.json
├── App.tsx
├── babel.config.js
├── metro.config.js
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

Contributing

PR's welcome!