HIT - Hawaii Trails
Team Members
Yong Kim - Leader
Overview
Department of Land & Natural Resources is encountering high volumes of traffic on popular trails that lead to crowding, resource damage, and community conflict. The team Hanabata-Code participated to solve the DNLR challenge on Hawai’i Anual Code Challenge 2021. Our main goal of the challenge is to have a way to track the number of people on each trail on time and use the data to show how busy trails are at the moment. Furthermore, we wanted to encourage people to discover less popular/crowded trails to reduce conflict between the community. To achieve our goal, we implemented GPS-based check-in functionality and a reward point system on our project named HIT, Hawai’i Trails.
Development
The project HIT is structured in three components: a Meteor/Mongo DB backend server, a React Native app With expo for users, and a Meteor/React web app for admins
The overall structure of HIT is to fetch aggregated cell phone traffic from Best Time and Popular Times APIs from Meteor, insert the data into the connected database, MongoDB, then reflect that traffic data on the phone app and the web app. The reason why decided to make our native app over Meteor is that Meteor provides popular frameworks and tools right out of the box. Since we only had a limited time to accomplish our desired features, we wanted to reduce time to set up the database and the account management system. With the basic package out-of-the-box, we extended the REST-API to act Meteor like a central server for both the phone app and the web app.
Meteor packages we used for back-end: MongoDB, Account-Base, Simple:json-routs, Simple:rest-account-password.
It’s worth noting that “account-base” securely stores userId and passwords in encrypted value and tokens that are created through the “simple:rest-account-password” endpoint is also hashed in the database. The authentication requires generated token when connecting and fetching data from the Meteor server and userId will never be saved in phone storage for security reasons. One of the benefits of using token-based authentication is we could allow users to stay logged in until the token expires.
Meteor web app packages we used for front-end: Semantic-UI-React, Uniform-Semantic, React: Class, React-Meteor-Data: withTracker.
The packages we used for the web app are the same as the packages we used in the project Cokoa. This is where our journey started and what we were most comfortable with. The withTracker tracks the data transformation in each component and re-render it accordingly.
Native phone app packages we used: React-Native, React: Context-API, React: Hook, React-Native-Elements, React-Navigation.
The biggest difference and the challenge we made is using React Hook and Context API. Since the phone app doesn’t support meteor, we implemented Context API for the replacement of Meteor withTracker. The similarity between those two is when data has been altered. When data changes in the children component it will also reflect on the parent components accordingly. The key difference is withTracker has to update the database to reflect its changes but Context-API uses local data structure to reflect the changes. With Context API, The phone app doesn’t have to call and update the database every time there is data manipulation, only when it’s necessary.
Contribution
My contributions as the leader to project Hit are management, basic setup, data manipulation/transformation/binding, the Meteor connection, authentication system, enhancement, and reinforcement. Besides the technical part, I also volunteered to do pitch training, rehearsal, demo video, and presentation for HACC 2021.
We have set up the overall structure of our app by drawing and pushing the initial setup on Github. There was nothing much to set up for the Meteor and the web app except we had to implement the REST API endpoint. For the phone app, I’ve implemented Context API and the navigation system to separate our tasks by pages. Since I took the role of the leader, I assigned each member which task they should focus on and gave out challenges progressively. While Keith is working on collecting data and others are working on the Meteor web app, I’ve set up the Authentication system with “simple: rest” packages. I’ve heavily focused on manipulating, transforming, and binding data for Context API and MongoDB so that others can work on UI and its features smoothly. lastly, I’ve overseen the entire project where everyone is working and how it’s being done. Some enhancements and reinforcements were made in the process.
Experience
I have previous experience of working in front-end web development but it was my first time leading a team as a leader and working as a full-stack developer for web and phone apps. we had lots of communication issues at the beginning of the development because we all had various depths of experience in application development. I learned at some point, I, the leader, have to make tough decisions on how the apps should work overall and encourage our team to embrace the new technology that will benefit us. We had lots of learning curves, such as using a public API to get aggregated traffic data, setting up the REST API, querying data from MongoDB, getting familiar with React Hooks, and setting up token-based authentication. It wouldn’t be possible to succeed in what we accomplished in the project if we weren’t creative and innovative. What I’m most gratified of my team, Hanabata-Code is we never stopped learning new technology. We stepped out of our comfort zone and strived for a new discovery in application development. It has certainly widened our sight of view. I’m proud of what we achieved throughout the project HIT.