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.
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.
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.
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.
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.
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.
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).
Below you may see a "lite" version rendered of the app to web using React Native Web. Please note that this rather a beta-version and should show the practicability of React Native Web: *Update 20201: Due to API deprecation the web version is not shown anymore