Ever since I began taking the Miami Dade Metrorail this year I immediately became frustrated by their app. It's very bloated and the information that I need is not presented in an easy to understand manner, as well as cumbersome to access. Therefore I set out to make an app focused soley on the Metrorail that delivered the info I needed in a simple and easy to use manner.
- Create a React Native application centered around a bottomTabNavigator for navigation.
- Use Axios to make API calls to the official Miami Dade Metro API.
- Store the data in a global state using React-Redux.
- Save user settings and preferences using React-Persist so the data stays intact, even after the app has been forced closed.
- Use iOS design cues to style the application.
For more details on the code and logic used, please refer to the comments and documentation inside of the code.*
- On the main page one can quickly and easily toggle between their set morning and evening stations
- Here they have can see when the next two incoming trains are due
- In the Settings tab users can set what their morning and evening stations are
- This is saved globally so they can now see the info in the Trains tab
- Users can set what their display preference is
- This change is reflected across the entire app
- User settings are saved locally using React Persist and Asynchronous Storage
- These settings persist wwhen the app is closed or force closed from multitasking
- Clone the repo
- Use
npm installoryarn installto install the necessary dependencies - Install the latest version of Xcode as well as the React Native CLI
- Run
react-native run-ios - iPhone simulator will launch for testing
- Open the Metro.xcodeproj from the iOS folder in Xcode
- Select your device
- Run the build
- React Native - Application Design Language
- Xcode - Simulator and Deploying to device
- Javascript - Frontend and backend
- React Redux - Global state manager
- Redux Persist - Allows for persistance of data