Space Seek - Space Data

Space Seek is an iOS and Android app, built with React Native. You can view information about upcoming and previous rocket launches worldwide, thanks to The Space Devs API.

This app is a follow up of my "Space Viewer", due to a breaking API change. The source code for Space Seek can be found here, the code for Space Viewer can be found here.

Rocket Launches

The app's main screen consists of a list of upcoming and already happened rocket launches. On tablets, the list has two columns to take advantage of the space.

On the top right, you can press a button to open a search input field. Pressing one of the items in the list leads the user to a details page.

Space Seek upcoming rocket launches screen shots

Rocket Details

When opening the details screen for a specific rocket, the app fetches all data to be displayed. On the top, a counter or past launch date is displayed.

All other content related to the mission, rocket details and further links are displayed below. Additionally, you may jump to the rocket pad launch location (map screen) directly. Links to video streams are also displayed.

Space Seek details and rocket pad location search screen shots

Settings

The settings page allows the user to open certain links. They can also toggle between the dark and light mode. By default, the app takes the user's preferred color mode, or defaults to the dark theme.

Space Seek dark and light mode screen shots

How many people are in space right now?

'How many people are in space right now?' is an iOS and Android app, built with Flutter. In collaboration with berger-apps.de, this app has similar functionality to Space Viewer. Additionally, the app's main screen shows the number of people, that are in space right now.

Flutter is a framework to build cross platform native apps in the Dart programming language. It has similar goals as React Native (fully native applications, not based on web views). I have documented my experience and made a comparisonhere.

Space Viewer - Rocket Infos

Space Viewer is an iOS and Android app, built with React Native. You can view information about upcoming and previous rocket launches worldwide, thanks to launchlibrary.net.

The app has several lists, that lead the user to a screen, where they can see more detailed information about the rocket launch. These could be:

Location (where it launches)
Date (when it launches)
Details about the mission
Links to the video stream, to watch the launch live

The technology stack has changed since I initially developed the app. When I initially started building it in 2018, Redux/Saga, React Navigation and React component classes were used.

End-to-End Tests

After some months of the initial release, I've added End-to-End (E2E) tests, based on Detox and Appium. The reason I did both is because I wanted to compare both. I've documented my experience here.

Continuous Integration and Delivery

The next iteration of the project was the addition of a test and build automation, or CI/CD. I've configured Github Actions, Fastlane and Detox to run E2E test after each commit and before each automatic release to the app stores. This dramatically simplified the release process, once configured correctly.

Next, I've enabled the app to be used for React Native Web.

React Native Web

React Native Web is a tool (library) to reuse your React Native components for the Web. This means, writing code once and using it across Android, iOS and Web. The idea behind it is not (in my opinion), to write your whole code to be used on the web. Rather, you could share critically, complicated or just same looking components across these platforms.

Sharing code in a (large) codebase can be tricky. Especially in JavaScript/TypeScript projects, where different code conventions and file structures can really quickly lead to a mess.
A common way to solve this problem is by having a monorepo. This is basically a collection of multiple repositories to be used as a single one. This can improve code browsing, code reusing and version management (individual versions for sub-packages for example).

I've decided to go with yarn workspaces, since I've been using yarn anyways. The configuration was a bit tricky, especially due to the usage of TypeScript and JavaScript together (bundler), as well as the native project configurations (require files from the node_modules).