Memory Garden

A garden that flourishes with all your great memories

Comment

Inspiration

This project intends to promote health and wellness of users, facilitating their mental health by reminding them of positive aspects of their lives, spreading gratitude and self-love.
Life can feel stressful at times. Sometimes we go about the day feeling tired and disappointed, without realizing how many beautiful things actually take place in our daily lives. I believe that good memories: kind words that we hear from others, fun nights out with friends, accomplishments that we always looked forward to... Might be hard to remember sometimes, but they always stay deep inside with us, carrying us through the challenges we would never imagine to conquer otherwise. So what if we had a secret garden just for ourselves, where we can give a place for them to flourish... and even better, for us to flourish along with them?

What it does

The web application allows the users to sign up and log in to their own accounts, which, upon successful login, takes them to their own memory garden. To plant a memory: Click on the button on the garden page, and journal down what made you smile today To visit a memory: Just click on the corresponding plant! The more you visit your plant, the more it will flourish.

How I built it

Thanks to the ACM workshop, we learned how to set up the server using express. We then set up a standard folder structure to keep our html, css, and javascript files; along with the .gitignore file. Two of our teammates, Derek and Nathan Yik, worked mostly on the front end using HTML and CSS. Derek also collected royalty-free images and used gimp to create images of a flower's different stages as they grow. The other two teammates, Nathan Sit and Maggie, collaborated on the back end - together they set up a firebase account and configured it in their server.js file. With the help of a mentor, Maggie was able to finally push data from the front end to fire base.

Challenges I ran into

Because our team consists of four beginners, we ran into many cases where we feel lost about implementing a certain function / feature. Thanks to the passion and dedication of our teammates (as well as Google and StackOverflow), we managed to help ourselves / each other tackle the challenges with our newly learned knowledge.

Accomplishments that I'm proud of

Even though we all had little to none previous experience with web app development, our front-end developers created an amazing user interface, while our back-end developers successfully debugged all the 404's and undefined data sets to finally push data successfully from a form. Most importantly, despite the various difficulties we ran into, we still worked through this 36 hours with our encouragement and support from each other.

What I learned

  • Setting up server using express
  • Configuring firebase
  • Forms in html, and functionalities in pushing to database
  • Linking CSS to HTML, animation / transition of elements
  • My teammates are amazing!

What's next for Memory Garden

Allow the user to have a preview of their memory entries by hovering their mouse over their flower Implement a timeline for the user to find their memories more easily Allow tags on the flowers, examples of tags include "family", "friendship", "encouragements", and "interesting discovery"

Share this project:

Updates