We all have good days, and some not-so-great ones. We may be busy, facing complex situations, or feeling emotionally exhausted. From time to time, we all need a little pick-me-up! Sometimes, the best source of encouragement can be yourself.
There’s always positivity around us. Positivity can come from monumental occasions, such as a graduation, as well as the smaller moments, like that meme that made you smile. In an age where we are focused on the future, it can be refreshing and encouraging to recollect the smaller moments.
Our project was partly inspired by Google Photos’s Memories feature, where they would show a picture that occurred on a given date a couple years back. It was a nice feature that really brightened our day. We wanted to have a sort of memories feature for not just pictures, but anything, whether that be a story, some advice, random thoughts, or a motivational message.
What it does
wishNwell is a web application that can store and retrieve “memos”, which is short for memories.
Users first register using their name, email, and password. This adds the user’s authentication to our database. Users are also able to register using a Google account.Once registered, a user is able to sign in with their credentials.
They can then choose to “write some inspiration” to write a positive memo that they can refer to in the future. When the user has created a few memos and wants a little pick-me-up, they can access the “help me out” portion of the app. Here, they will be shown a random memo that they have previously created. The memo shows the date it was created and the text body.
How we built it
wishNwell is built with ReactJS and has calls to Google Firebase in our front end. Two members of our team worked on the front-end UI, while the other two handled the Firebase integration.
For the front-end, we decided to use React and Tailwind CSS for styling. The app is structured as a single-page application with multiple views, which are controlled by the state of the main component. Changes between views are called with a React prop that is passed from the main view down to child views.
In terms of Firebase, we first started with creating user accounts and handling account authentication. We didn’t have much knowledge about Firebase authentication beforehand, so we brushed up on some online tutorials to gain some working knowledge. Authentication involved creating a user document on Firebase a user registers or signs in with Google for the first time. The user document encrypts the user’s password, meaning we cannot see it on the Firebase console. When the user signs back in, it fetches their user document given their email and password. The next aspect was writing memos to Firebase. When a user submits a new memo, the app stores it in a collection called ‘memos’ under their user document. When they want to retrieve a memo, we read all the memos from their
memos collection, store that in a local array, and then take a random index of the array as the memo to show the user.
Challenges we ran into
We overcame many challenges while we were working, including but not limited to issues with our database populating, erroneous authorization, and the division of memos between each user.
When our database was not populating, we had to pause and take some time debugging to see what was happening. Our problem stemmed from our displayName attribute, which kept voiding entire sets of data.
Usually right after implementing a new sign-in feature, our authorization stopped working in the way which we intended. Although our errors with this seemed to be easily solvable with small adjustments to our code, we still had to pause every once in a while and address these issues, which proved to be a minor challenge.
We ran into one particularly interesting challenge when we discovered that any user could access any memo created regardless of the account that the memo was created under. This one took some more time to address than the other challenges that we faced, but we were able to address it by going back to our initial whiteboard session and assessing the scope of our memo array and how it should be partitioned between users.
What we learned
Through some of the challenges we faced with Firebase and our solutions to these issues, we learned that databases are complex structures and need a good level of care to be implemented. Firebase is quite powerful and has many tools to handle various aspects of authentication and storage, but these tools must be properly implemented to receive the utmost benefit from them.
For most of the team, this was our first time using React. Normally, learning new technologies is one of the perks of attending hackathons. However, as DubHacks was completely remote, that meant we couldn’t have the physical experience of learning together. This meant we needed to be patient and help each other out, while ensuring we make progress. As students, we learned quite a bit about how to work remotely.
What's next for wishNwell
What’s really cool about wishNwell is that it’s extensible. We have built up the base of the app at DubHacks 2020, but there are many more features we can add on top of this foundation. For instance, we could use the Google Natural Language API to detect the sentiment of memos and filter out the toxic ones. We can also implement ways to attach songs, images, and doodles onto memos to add new dimensions of positivity to our app. The UI, while already clean, would benefit from animations, such as a stack of swipeable cards and theming. These features would increase the interactivity and functionality of wishNwell