Back in 2014, there was a website called The Thoughts Room. In it, you can write out all your thoughts and watch it disappears into stars. For a lot of people, including myself, this website literally saved their life. It was a beautiful and comforting way to declutter our mind, especially at times when we can't talk to other people. However, that website has long gone (Their server crashed and there was no way to resurrect it).

Having missed The Thoughts Room and knowing how it has helped a lot of people, I decided to rebuilt a similar website during the Christmas break of 2019.

What it does

Its main use is to let user write down their thought and slowly watch it dissolve into raindrops. A couple months later I added a stress tracker feature that lets users create an account and keep track of their daily stress level.

How I built it

It was built with plain HTML, CSS, Javascript (not even with JQuery or Bootstrap). For the stress tracker, I use Firebase API.

Challenges I ran into

This project was my very first exposure to web development. Prior to this, I only know very little on HTML & CSS, but never actually used Javascript DOM. In the beginning, positioning elements can take hours. I wasn't sure what's the difference between position absolute & relative, flex and grid display, how to make animations, etc. It took me very long to finally understand how everything works together.

What I learned

A lot. There are small things such as putting "alt" on and understanding the importance of "inspect element" feature on every web browsers, to big things such as how to make animations with plain css and how to connect to use Firebase API.

What's next for Be Okay

Makes the rain animation smoother, refine the css so it works on every web browser.

Share this project: