Assignment 1

Assignment 1 has come to an end and this is the final product we ended up with:

Some things I have learnt from this assignment:

  1. Various css/javascript tricks for mobile responsiveness (eg. the use of window.onresize to make Twitter Bootstrap’s ButtonGroup horizontal when overflown to next line since some component props cannot be altered by CSS alone)
  2. Redux’s mapStateToProps gets invoked for all components whenever any part of the redux state tree changes, then a shallow comparison between the new props and previous props is done to determine if component should be re-rendered (after the additional shouldComponentUpdate check)
  3. null and undefined have very significant difference when it comes to optional parameters, as null overrides the default argument in Redux reducers while undefined does not. Hence in initial hydration of the store (eg. from local storage), fields that are not set should be set to the value of undefined rather than null so that default arguments don’t get overridden.
  4. The trade-off between storing all states in Redux store vs keeping UI-specific states within local components. The former allows time travel debugging and caching if desired, while the latter is simpler to implement/modify (skip all the boilerplates to interact with the Redux store) and keeps the Redux state tree cleaner.
  5. Implementation of routers for modals and collapsible panels in order to allow Facebook sharing integration.
  6. The intricacies of presentational and container components pattern. Eg. when a stateless functional component contain containers, it might affect the reusability of that component. Hence Redux’s ubiquitous store should not be abused and sometimes it’s still better to pass down props from parent components to child components (instead of child components getting state from Redux store directly) to enhance reusability.

Assignment 3

For assignment 3,  our group realised we have a common problem of missing the train/bus stop to align as we were too focused on our phone/dozed off. Furthermore, it’s very inconvenient to check the google maps/look outside the window constantly to see if we have arrived at the intended bus stop.

To solve this problem, we wanted to create a mobile app in React Native that automatically triggers a mobile notification/alarm when we reach a destination.

The destination will be manually set by the user initially (through selecting the MRT/bus stop name) but the setting will have an option to be recurred so that users will not have to set it manually every time before a trip.

There will also be smart detection to make sure it only alerts when user is actually arriving at destination instead of leaving the destination. (eg. alerts when user arrive at Com 2 bus stop from Clementi, but not when user is at com2 bus stop but is actually leaving for Clementi)

Unfortunately, the teaching team limits assignment 3 to pure PWA  (Progressive Web App) only and disallows React Native.

A PWA is not able to retrieve user’s geolocation when the browser is closed. There was a specification to add Geofencing to service workers but it was abandoned 🙁

As a result, we have to make adjustment to the idea. The user will now have to activate the app every time before the trip instead of automated recurrence. Thankfully, Web Push API has been implemented in all major browsers. Hence, our users will be able to receive push notifications on their mobile even when the browser is closed and the phone screen is turned off.