maykonmichel / space-xplorer

SpaceX mission launches app

SpaceX mission launches app

🚀 About the project

This project uses SpaceX open API to show the latest missions and launch details

🔰 Features

• ✅ Latest launches displayed chronologically
• ✅ Launch card
  • Mission name
  • Launch date formatted
  • Mission cover image if available
• ✅ Launch details screen
  • Mission name
  • Launch date formatted
  • Rocket name
  • Details if available
  • Article button link if available
• ✅ Images carousel with 3 items at most if available
• ✅ Individual toggle favorite image on tap it
• ✅ Favorite heart animated
• ✅ Favorite button animated
• ✅ Animated empty feedback
• ✅ Animated error feedback
• ✅ Animated loading feedback
• ✅ Image caching
• ✅ Data caching
• ✅ Cache persisting
• ✅ Unit testing

💡 Roadmap

• ☑️ Full compatibility with dark theme
• ☑️ Infinite scroll
• ☑️ Pull to refresh
• ☑️ Icon
• ☑️ Splashscreen
• ☑️ e2e tests
• ☑️ Sort by launch date asc or desc
• ☑️ Continuous integration
• ☑️ Automated build
• ☑️ Automated store deployment
• ☑️ Code push
• ☑️ Continuous deployment
• ☑️ Performance monitoring
• ☑️ Crash monitoring

⚙️ Tech stack

• TypeScript - Typed JavaScript
• React Native - Hybrid mobile development
• React Navigation - Routing and navigation
• Apollo GraphQL
  • Remote GraphQL client
  • Local state management
  • Caching
• Lottie - Lightweight and scalable animations
• Snap carousel - React native carousel library
• date-fns - Date utility library
• Ramda - Practical functional library
• Jest - Testing framework
• Testing library - Well... a testing library
• Faker.js - Generate fake data for tests
• ESLint - Static testing
• Husky - Git hooks
• Lint staged - Lint files staged by git

👋 Getting Started

These instructions will get you a base project structure and running on your local machine for development and testing purposes.

📋 Prerequisites

Setting up the development environment

You can follow the React Native CLI quickstart for your development OS target OS.

📦 Running

Installing Dependencies:

yarn install

Installing Pods (only for iOS):

cd ios && pod install

Running the app:

yarn start

For starting the app on a specific OS:

yarn ios

yarn android

👩🏾‍💻 Development

• Eslint is used in the project to enforce code style and should be configured in your editor.

• Prettier is also used and apply automatically by eslint

• Typescript is used in the project for type-checking and should be configured in your editor.

You can check this manually by running:

yarn lint

You can ask eslint to fix issues by running:

yarn lint:fix

🛠 Testing

Use the following command to run unit tests:

yarn test

Use the following to update the snapshots of unit tests:

yarn test -u

Use the following to run unit tests in watch mode while developing:

yarn test --watch