NextTrain - Connecticut is a mobile app for searching train schedules published by the Shore Line East transit agency in Connecticut.
It relies on a back-end web service I created, called the Next Train API, to provide train schedules in JSON format upon request.
Demo:
The front-end mobile application is available to download for Android via the Google Play store.
This is the first time I have released an Android app to the store!
Shore Line East’s online Trip Planner does not produce an optimal user experience. It involves too many clicks (a minimum of seven). It doesn’t allow the user to customize preferred stations. And when it returns results, it obscures relevant information inside a small modal window.
There has to be a simpler, easier way!
When designing this app, I prioritized efficiency of the schedule search process. Specifically, my goal was to minimize the number of required clicks.
I noticed from my own user behavior that I was taking the same one or two trips over and over. I assumed commuters would have the same user experience. So I allowed the user to specify favorite routes to minimize future clicking. Once a user has specified a favorite route, the route shows up automatically when they open the app, and subsequent schedule searches only involve one click!
I also noticed I usually searched for today’s schedule or tomorrow’s schedule, so I hard-coded these favorite searches into the user interface, while at the same time allowing the user to optionally search a custom date.
The best user feedback I have received about this app is that “It looks like it was built by Google”. So kudos to Native Base and React Native Vector Icons for providing the slick UI components and icons, respectively. Also thanks to the React Native Date-picker and React Native Swipe List libraries for providing intuitive ways to pick dates and delete list items, respectively.
Note: I would consider using NativeBase components in the future, but I also have my eye on Twitter Bootstrap components making their way into the React Native ecosystem. I look forward to evaluating Twitter Bootstrap components for upcoming projects.
While developing this Android app, I learned how to use React Native’s AsyncStorage functionality, which accesses a MongoDB-like NoSQL datastore that comes pre-installed on Android devices. Specifically, I used it to store a user’s favorite transit routes so they wouldn’t disappear after the user closes the app.
These calls to the local filesystem require logic to handle asynchronous responses. They return Promises and can be chained. To avoid JSON parsing errors, make sure to use JSON.stringify() before storing the object and JSON.parse() after retrieving it.
Relevant code snippets:
