Concept

Inspired by the Japanese concept of 'Ikigai', our app "Grounded" was designed to help users capture and appreciate the little things, whether it’s the morning air, a cup of coffee or a gorgeous sunset. Our app encourages users to stay grounded by being in the present, appreciating the beautiful world around them, and journaling.

The app achieves this by multiple feature. First, the application acts as a platform for a community of people who are seeking to enjoy the little moments, and explore environment around them, by allowing users to share images with captions of their surroundings. The images can be seen by viewers in a similar way that social media platforms like instagram can be seen, however, these images have no faces, nor statistics like likes and comments- it is centered around simply the moment of the picture and sharing that image. The images each also have a location attached to them, which then gets added to a map (if users give permission for the location to be shared), which is then used to help people find places nearby them. In the users home, explore page, images of plaes near them will be seen, with an associated map of where exactly it is so they can go there. When users go to different locations, they can also add it to the mapping feature of this app, which users can then use later to reflect back on or visit again.

For the community aspect, each user has their own QR code, and username, which allows users to connect with friends and see the locations they have been exploring. The app also includes a daily journaling feature, again as a reminder for people to remain grounded in the moment.

Figma Prototype

The prototype was created by individuals who were focused on the design of the app rather than the coding. My focus was on the coding of different features and the actual devleopment of the app on React Native, which will be further explored later. However, during the initial stage of ideation, I also contributed a bit and learnt about how Figma is used. Our Figma prototype can be seen here:

Development

Camera

The camera feature was coded to take images using existing repositories from GitHub. The camera button was replaced by the app's logo for aesthetic. The camera was able to use flash, flip cameras, and adjust image cropping.

Once the image was captured by the user, the user would be allowed to write captions and link the location of where they were. The images with the following data would then be uploaded alongside the photo to a firebase storage.

The mapping feature was one of the features I contributed the most in. For this feature, I learned about how to use GPS API's to gather data on locations where users currently are and display it on a map.

With this, I was able to code in the feature for the GPS coordinates to be recorded as soon as the camera feature was opened, so when an image was captured, the users can add in the location for the purpose of the mapping feature listed in the concept section. The location data would be stored as the picture was saved.

Once the picture is captured and saved, an associated pin would be placed on the map.

Journal

Map

The profile page of our app displayed the journal feature. Here, users see a 14-day preview of the last 14 days of journal entries. There was also a button to access the full calendar with dates marked, and a feed of journal entries associated with that date. This was developed using JavaScript by one of the other developers.

Discover and Naviagtion Page

I was also heavily involved with developing the navigation and discover page. This page involved a lot more front-end development, which I already had experience with from prior coding experience with HTML and CSS. Here, a lot of the CSS was accessed from our Figma, though slightly altered as the aesthetics were iterated through.

The Nav Bar used custom fonts and icons for each user, and included a discover page displaying people's posts. It also filtered depending on how far away someone's post was captured at.

One new element I learned from this page was how to create a "read more" text button, and how to use CSS from an existing Figma and convert it to code.

With more time and development of this app, we would have also wanted to incorporate code that would filter the pages so that friends' posts would be priortized as well as posts within the vicinity.

Conclusions

Create & Edit Profile

The create profile page allowed users to create accounts using google accounts. Here, users could then choose custom usernames, and avatars from our database of avatars (we didn't allow users to upload images as that would potentially involve having people's faces, which could again create judgemental attitudes, and take away from the purpose of our app). All data was updated and displayed dynamically through Firebase.

Users would also have access to their own personal QR codes, which their friends could use to add them (and vice versa). This would also be backed up on Firebase.

Through the development of this app, I learned how to use React Native, a bit of the basics of Firebase, and got a lot more familiar with GitHub, the pushing and pulling process, and branches. This was the first experience I had with application development, and learned a lot by working in a team of others who had a bit more experience. I learned how to use existing repositories of code and adjusting it for the requirements of the page, as well as how to use Figma to make a mockup of an app.

With more time, it would have been cool if we could have ended up developing this app to its entirety, polishing up features such as adding better filters and algorithms to the explore page. I would have also wanted to expand the map feature, so that it would add in locations on users "wish lists" of places to visit, and give them a notification when they are very close to those locations, encouraging users to check it out. It would also be cool to incorporate review features at the end of each month or year, giving users a recap of their past year, and their moments being grounded. A meditation feature was also discussed, which would have been cool to incorporate and in line with the motivations of our apps.

With app development, I'm interested in learning more about Android app development, as we were all focused on the iOS application development. I would also like to learn more about how firebase worked, as I only learned how to view it and link it, but did not learn how to set it up and manage it.

Overall, it was incredible working in this team to develop our app, both with the atmosphere our team created of happiness and motivation towards creating an app that encouraged joy.

Developing Grounded